FlexibleUI Suite - Procedural Image, Blur, And More!
Jeff Graw Assets
$30.25
$60.50
50%OFF
Jump AssetStore
The Flexible UI Suite is the all-in-one solution for performant, tailored UI, combining Flexible Image and Flexible Blur, respectively the most advanced procedural UI and UI blur solutions for Unity.The FlexibleUI bundle contains both Flexible Blur and Flexible Image.Flexible Blur requires URP specifically, while Flexible Image works in any render pipeline.While both assets are pre-integrated in the bundle, purchasing this bundle grants a 100% discount on the individual versions of the assets.DISCUSSION | DISCORD | SUPPORT/INQUIRIES(Reviews prior to November 2025 are from a previous version of a similar asset, which recieved a free upgrade)The best Procedural UI and Blur assets, togetherINCLUDES:Flexible Image — procedurally-generated UI shapes, gradients, strokes, patterns, and animations. Always shares a material, and batches to 1 draw call.Flexible Blur — The most advanced, efficient, and configurable UI blur system for Unity.Regular combined price: $73.50Both assets are pre-integrated into the Flexible UI Suite, configured to work together out of the box.Purchasing this bundle also provides a 100% discount on the individual assets, so they can be used individually if desired.Any future related assets will be added to the bundle at no cost.***Flexible Image***One shared material. Everything batchesFlexible Image extends Unity's Image component with GPU-based shape generation. All properties are delivered through packed vertex attributes, so every element uses the same material regardless of appearance. This means you can have any number of wildly different elements that go through the same draw call.Multiple shapes per componentFlexible Image can render multiple shapes in one component, also without adding draw calls. Each shape has independent anchoring, sorting, and full property control. Build complex UI elements without nesting GameObjects.FEATURESSHAPE CONTROL▪ Per-corner chamfer.▪ Toggle between per-corner concavity (round, flat, scooped) or smoothness (squircles!)▪ Edge collapse enables dynamic transformation from rectangle to triangle, trapezoid, or parallelogram▪ Edge softness for anti-aliasing▪ Stroke▪ Tools for even more complex shapes, including cutouts and UV Rect for partial shape rendering▪ Transform-independant size, position, rotation▪ Advanced raycast target mode selects which procedural shape properties apply to mouse/pointer input (can account for rounded corners, stroke, cutout, etc.)COLOR SYSTEM▪ Four color sections: primary, outline, procedural gradient, and pattern▪ Each section supports vertex gradients (up to 3x3 color grids)▪ Alpha channel for each section can control transparency, or blend with the section below.▪ Procedural gradients can be positioned relative to the mouse cursor to create responsive interactable elements▪ Procedural gradients are per-pixel and intelligently dithered, with modes for SDF, angle, radial and conical gradients▪ Procedural gradient and pattern sections can independently display over the primary color, outline color, or both▪ Procedural gradient and pattern sections can be rendered in screen-space, allowing continuity between componentsANIMATION▪ The fastest way to author AAA-quality UI animations▪ Built-in animation state machine responds to Selectable events▪ Option to override the (somewhat infamous) default behaviour where Selected state is not able to transition back to Highlighted state▪ Tween any numeric property▪ Lighter than Unity's animation system, more powerful than color/sprite swapsTEXTURE BAKING▪ Bake any procedural setup to a texture▪ Configurable resolution and supersampling▪ Optional 1px padding for filteringCOMPATIBILITY▪ Tested on Unity 2022.3+ (likely works back to 2022.1, but not officially supported)▪ Works with all Canvas types and render pipelines▪ Supports UGUI. Does not support UIToolkit▪ Advanced raycast mode filters input hotzone by selected procedural properties (rounded corners, cutouts, etc.)▪ Supports all standard "UGUI Image" component features (masks, fills, sliced sprites, etc.)MISC.▪ Source code and documentation included▪ Higher visual quality and generally better performance (at native resolution) than texture-based UIs on modern hardware▪ Extremely competitive performance with other procedural UI solutions, even when controlling for draw calls (i.e. many instances of similar elements that share the same material), with potentially much greater performance in the real world***Flexible Blur***The Pinnacle of UI BlurFlexible Blur is the most versatile, advanced, and performant UI blur solution for Unity, solving the difficult problems other solutions ignore. Flexible Blur gives you complete control over quality, and the tools to reach the highest performance for your specific requirements.Dynamic batchingOther aproaches either don't batch at all, or are encumbered with a limitation that every blur on screen (or belonging to a camera) needs to share settings. Flexible Blur is the only approach that allows differing blurs to coexist, while equivalent blurs can batch together. The best of both worlds!FEATURESCORE FUNCTIONALITY▪ Simple setup: Include the FlexibleBlur renderer feature, add BlurredImage components▪ Equavalent blurs can be batched, while differing blurs can coexist▪ Choice of nine blur algorithms: including true Gaussian blur with variable horizontal and vertical kernel size▪ Algorithms cam be combined and chained together▪ Resolution-independent▪ Minimal overdraw. Blurs the smallest necessary area by default, along with the option to pad blur area to reduce edge temporal noise▪ The only asset that allows stacked blur (ie. blur components can blur one another) in a shared camera setup. (Blurring other UI content requires additional cameras, same as every other solution)ADDITIONAL FEATURES▪ Components can use presets which are responsive to quality settings▪ Choice between traditional and compute shaders▪ Adjustable dithering (interleaved gradient noise)▪ Brightness, contrast, vibrancy, and tint controls▪ Blur rendering can be paused. Useful to save power/performance in pause screens, where everything under the blur can then be safely disabled▪ Platform-specific settings, such as texture formats▪ Additional uses, such as a low-noise pixellation effect▪ And more!COMPATIBILITY▪ Tested on Unity 2022.3+ (likely works back to 2022.1, but not officially supported)▪ Supports URP. Does not support BiRP or HDRP renderers.▪ Supports Unity 6 Rendergraph▪ VR-compatible, including single-pass▪ Supports all UGUI canvas types. Does not support UIToolkit▪ Supports all standard "UGUI Image" component features (masks, fills, sliced sprites, etc.)Flexible Blur integrates with Flexible Image, the most advanced and highly performant procedural UI solution for Unity, to add beautiful blur effects to procedural elements.Flexible Image: High-Performance Procedural RenderingSDF-based shader for perfectly crisp, resolution-independent visuals at any scale.Advanced data-packing architecture to minimize CPU overhead and draw calls.Render thousands of unique UI elements in a single batch, ideal for complex and data-dense interfaces.Multiple data, Single ComponentThe Flexible Image component has a mode to display multiple procedural Images, composited with anchors, to reduce hiearchy bloat and overhead. As an example, instead of parenting a panel to a shadow, you can define both the shadow and the panel in the same component. Or more poetically, in the spirit of Xzibit, "I heard you like procedural UI, so I put procedural UI in your procedural UI component so you can compose procedural UI while you compose procedural UI."Deep Customization & EffectsProcedural quadrilateral base shape with full control over skewing (parallelograms) and edge collapse (triangles, trapezoids).Per-corner rounding (chamfer) and concavity control.Configurable outlines that can expand inwards or outwards from the shape's edge.Multi-step gradients (SDF distance-based, Angle, Radial).8 animated, screen-space or object-space patterns (lines, grids, circles, etc.).Rectangular shape cutouts with configurable logic.Built-in High-Performance AnimationPowerful, zero-setup tweening system for all properties, designed as a high-performance alternative to the Animator.Automatically integrates with Selectable states (Normal, Highlighted, Pressed, etc.) for effortless interactive feedback.Minimal to zero runtime garbage allocation.Advanced Features & CompatibilityPixel-perfect raycasting that precisely matches the visible procedural shape.Optional helper component (FlexibleImageAnimator) for full compatibility with standard AnimationClips and Unity's Animator window.Support for rich vertex color gradients via runtime mesh subdivision.Optional screen-space background blur effect.Compatible with the all render pipelines.Flexible Blur:Most flexible UI blur solution on the asset store.Unity 6 RenderGraph support.Being built specifically for URP means a more tailored and elegant solution. There is a Renderer Feature, blur components, and that's it. Scenes are straightforward to set up. No component needs to be added to cameras.Choice between compute and fragment shader paths.Blurs can be set up individually, or with shared presets.Presets can respond to quality settings.Very fine grained control over quality versus performance.One reason I deciced to create Flexible Blur was that other solutions had a tendency to sacrifice quality on the altar of performance (or vice-versa) and were not able to be configured outside of a certain range in quality.Supports resolution independant blur (the strength of blurs in other assets may shrink as applicaiton resolution increases.)Supports dithering to eliminate banding on very strong blurs.Supports stacked blur via multiple camerasAlso supports limited blur stacking with a single camera, where blurs can see one another, but not other UI elements on the same canvas.Choice of two different blur components: UIBlur is lightweight but limited, while ProceduralBlurredImage leverages, and expands upon, existing features of UGUI Image components.Able to setup platform-specific texture formats and shader path.Supports world space, screen space, and overlay canvases.Practically performance cost when no blurs are active.As opposed to other assets that apply blur to every pixel on that a camera can see, Flexible Blur only blurs the pixels that are needed.Unlike certain competitors, you are not constrained to a single blur source per camera. There is no requirement that all blurs share the settings.By extension, blurs can fade in and out naturally instead of relying on alpha blending.There's is a trade-off between the total number of sampled pixels and the overhead each blur incurs (but lower overhead per blur with the compute path).But with Flexible Blur, you decide which tradeoffs are needed.ProceduralBlurredImages can be marked as batchable, where applicable blurs will automatically share a source.These batches blurs behave similarly to the way some competitors work by default, with similar limitations.Even with batched blurs we still avoid blurring every pixel, and just blur the minimum area required to contain the batched elements. But batched blurs can be set to blur the whole screen to capture edge cases.
