# Shaders — Complete Component Reference > Auto-generated documentation for AI assistants > Last updated: 2026-08-15T19:33:26.563Z ## Overview Shader is a component library for Vue, React, Svelte, Solid & JS that empowers developers to build creative WebGPU effects with a declarative, component-based syntax. This library provides 192 shader components organized into categories. ## Architecture ### Hierarchical Composition - Components use a tree-based structure with parent-child relationships - Effects with `requiresChild: true` need child components to function (they transform/filter) - Generative components (`requiresChild: false`) create their own visuals - Components can be nested to create complex effects ### JSON Format for Shader Definitions ```json { "components": [ { "type": "ComponentName", "id": "unique-id", "props": { /* component-specific properties */ }, "children": [ /* optional nested components */ ] } ] } ``` ### Universal Properties All components automatically support these properties: - `blendMode`: String - Compositing mode (normal, multiply, screen, overlay, add, subtract, difference, exclusion, lighten, darken, colorDodge, colorBurn, hardLight, softLight, hue, saturation, color, luminosity) - `opacity`: Number (0-1) - Layer opacity - `visible`: Boolean - Show/hide layer - `maskSource`: String - ID reference to another component for masking - `maskType`: String - alpha, alphaInverted, luminance, luminanceInverted - `transform`: Object with: - `offsetX`: Number - Horizontal offset - `offsetY`: Number - Vertical offset - `rotation`: Number - Rotation in degrees - `scale`: Number - Uniform scale - `anchorX`: Number (0-1) - Transform origin X - `anchorY`: Number (0-1) - Transform origin Y - `edges`: String - Edge handling (stretch, transparent, mirror, wrap) - `boundingBox`: Object - Explicit placement box for the layer. Each dimension is `{ value, unit }` (unit: px or uv): - `x`, `y`: Position of the box (measured from `origin`) - `width`, `height`: Box size - `origin`: String - Reference corner/edge (center, top-left, bottom-right, …) - `rotation`: Number - Rotation in degrees - `cornerRadius`: Number - Corner rounding in px - `flow`: Object (Group only) - Flex-like layout of the group's children: - `mode`: String - none, column, row - `gap`: Number - Space between children in px - `align`: String - Cross-axis alignment (start, center, end) - `anchor`: String - Where the content block pins on the canvas (center, top-left, bottom-right, …) - `anchorOffset`: Object { x, y } - px inset from the anchor (resize-stable) - `absolute`: Boolean - Opts a child out of an ancestor Group's flow (CSS position:absolute semantics) ### ID Generation Pattern IDs follow the pattern: `id[timestamp_base36][random_base36]` Example: `id17ab8e4g5` ## Category: Blurs Components in this category: 9 ### AngularBlur - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `20` - Range: min: 0, max: 100, step: 1 Intensity of the angular blur effect - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the rotation ### Blur - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `50` - Range: min: 0, max: 200, step: 1 Intensity of the blur effect ### BokehBlur - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `radius` (range,map) - Default: `50` - Range: min: 0, max: 100, step: 1 Defocus amount — how far the lens blur spreads - `highlightGain` (range,map) - Default: `4` - Range: min: 0, max: 10, step: 0.1 How strongly bright highlights bloom into discs - `highlightThreshold` (range,map) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Brightness above which a highlight forms a disc - `bladeShape` (select) - Default: `blades` Aperture shape the highlights bloom into — bladed iris or a novelty cut-out (heart, star, …) - `bladeCount` (range) - Default: `6` - Range: min: 0, max: 9, step: 1 Blade or point count for the Blades, Star and Flower shapes — 0–2 blades is a circular iris - `bladeRotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the aperture shape (in degrees) - `chromaticFringe` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 Lens colour fringing on the disc edges ### ChannelBlur - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `redIntensity` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Blur intensity for red channel - `greenIntensity` (range,map) - Default: `20` - Range: min: 0, max: 100, step: 1 Blur intensity for green channel - `blueIntensity` (range,map) - Default: `40` - Range: min: 0, max: 100, step: 1 Blur intensity for blue channel ### DiffuseBlur - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `30` - Range: min: 0, max: 100, step: 1 Intensity of the diffuse blur effect - `edges` (select) - Default: `stretch` How to handle edges when distortion pushes content out of bounds ### LinearBlur - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `30` - Range: min: 0, max: 100, step: 1 Intensity of the linear blur effect - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction of the linear blur (in degrees) ### ProgressiveBlur - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `50` - Range: min: 0, max: 100, step: 1 Maximum intensity of the blur effect - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction of the blur gradient (in degrees) - `center` (position) - Default: `{"x":0,"y":0.5}` Center point where blur begins - `falloff` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.1 Distance over which blur transitions to full strength ### TiltShift - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `50` - Range: min: 0, max: 100, step: 1 Maximum blur intensity at edges - `width` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.1 Width of the sharp focus area - `falloff` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.1 Distance over which blur transitions to full strength - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation angle of the focus line (in degrees) - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center point of the focus line ### ZoomBlur - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `30` - Range: min: 0, max: 100, step: 1 Intensity of the zoom blur effect - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center point of the zoom blur ## Category: Shapes Components in this category: 16 ### Arc - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the arc - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the arc - `radius` (range) - Default: `0.38` - Range: min: 0, max: 1, step: 0.01 Radius of the pie sector - `aperture` (range) - Default: `270` - Range: min: 0, max: 360, step: 1 Aperture angle of the wedge in degrees (360 = full circle) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Circle - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` The color of the circle - `radius` (range,map) - Default: `1` - Range: min: 0, max: 2, step: 0.01 The radius of the circle. A value of one (1) is sets the circle to fit the canvas. - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer. - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the circle - `strokeThickness` (range,map) - Default: `0` - Range: min: 0, max: 0.5, step: 0.01 The thickness of the stroke outline. Zero (0) means no stroke. - `strokeColor` (color) - Default: `#000000` The color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the circle edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors in soft edges ### Crescent - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the crescent - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the crescent - `radius` (range) - Default: `0.3` - Range: min: 0.05, max: 1, step: 0.01 Outer circle radius - `innerRatio` (range) - Default: `0.8` - Range: min: 0.3, max: 1.2, step: 0.01 Inner (bite) circle radius as a fraction of outer radius - `offset` (range) - Default: `0.2` - Range: min: 0.01, max: 0.5, step: 0.01 Horizontal distance the bite circle is shifted from center - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Cross - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the cross - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the cross - `radius` (range) - Default: `0.35` - Range: min: 0, max: 1, step: 0.01 Arm half-length — distance from center to the end of each arm - `thickness` (range) - Default: `0.08` - Range: min: 0.01, max: 0.5, step: 0.005 Arm half-width — controls how wide each arm is - `rounding` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Corner rounding — rounds the arm ends and concave corners - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees (45° turns a plus into an ×) - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Ellipse - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the ellipse - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the ellipse - `radiusX` (range) - Default: `0.35` - Range: min: 0.01, max: 1, step: 0.01 Horizontal semi-axis radius - `radiusY` (range) - Default: `0.2` - Range: min: 0.01, max: 1, step: 0.01 Vertical semi-axis radius - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Flower - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the flower - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the flower - `radius` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Outer petal tip radius in UV space - `sides` (range) - Default: `5` - Range: min: 3, max: 12, step: 1 Number of petals - `innerRatio` (range) - Default: `0.4` - Range: min: 0.1, max: 0.95, step: 0.01 Inner valley radius as a ratio of outer radius — lower values make deeper notches - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Heart - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the heart - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the heart - `radius` (range) - Default: `0.32` - Range: min: 0, max: 1, step: 0.01 Size of the heart (fit radius) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Line - **Properties**: - `color` (color) - Default: `#ffffff` The color of the line - `pointA` (position) - Default: `{"x":0.2,"y":0.5}` The start point of the line - `pointB` (position) - Default: `{"x":0.8,"y":0.5}` The end point of the line - `thickness` (range,map) - Default: `0.01` - Range: min: 0, max: 0.25, step: 0.001 The thickness of the line. A value of one (1) matches the canvas height. - `style` (select) - Default: `solid` The line style: solid, dashed, or dotted. Dashes and dots are spaced to land exactly on both endpoints. - `dashLength` (range,map) - Default: `0.05` - Range: min: 0, max: 0.5, step: 0.001 The length of each dash, including its caps - `gapLength` (range,map) - Default: `0.025` - Range: min: 0, max: 0.5, step: 0.001 The gap between dashes, or the spacing between dots - `capStart` (select) - Default: `rounded` Cap shape at the start of the line (point A). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the A-facing end of each dash and dot. - `capEnd` (select) - Default: `rounded` Cap shape at the end of the line (point B). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the B-facing end of each dash and dot. ### Parallelogram - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the parallelogram - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the parallelogram - `width` (range) - Default: `0.32` - Range: min: 0.02, max: 1, step: 0.01 Half-width of the parallelogram - `height` (range) - Default: `0.22` - Range: min: 0.02, max: 1, step: 0.01 Half-height of the parallelogram - `skew` (range) - Default: `0.15` - Range: min: -0.4, max: 0.4, step: 0.01 Horizontal skew of the top edge - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Polygon - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the polygon - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the polygon - `radius` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Circumradius — distance from center to vertices in UV space - `sides` (range) - Default: `6` - Range: min: 3, max: 12, step: 1 Number of sides (3 = triangle, 4 = square, 6 = hexagon, etc.) - `rounding` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Corner rounding — 0 is sharp vertices, 1 morphs into a circle - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Ring - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the ring - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the ring - `radius` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Distance from center to the ring's midline in UV space - `thickness` (range) - Default: `0.07` - Range: min: 0.005, max: 0.3, step: 0.005 Half-width of the ring band — total ring width is twice this value - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing (applied to both inner and outer ring edges) - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the ring edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### RoundedRect - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the rectangle - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the rectangle - `width` (range) - Default: `0.35` - Range: min: 0.01, max: 1, step: 0.01 Half-width of the rectangle - `height` (range) - Default: `0.25` - Range: min: 0.01, max: 1, step: 0.01 Half-height of the rectangle - `rounding` (range) - Default: `0.05` - Range: min: 0, max: 0.5, step: 0.01 Corner rounding radius — set to min(width, height) for a pill shape - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Star - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the star - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the star - `radius` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Outer tip radius — distance from center to the pointed tips - `sides` (range) - Default: `5` - Range: min: 3, max: 12, step: 1 Number of points on the star - `innerRatio` (range) - Default: `0.4` - Range: min: 0.1, max: 0.9, step: 0.01 Inner vertex radius as a ratio of outer radius (0.382 = golden-ratio 5-star) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Teardrop - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the teardrop - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the teardrop - `radius` (range) - Default: `0.22` - Range: min: 0.02, max: 0.6, step: 0.01 Radius of the rounded bulb - `height` (range) - Default: `0.4` - Range: min: 0.1, max: 0.7, step: 0.01 Length from the bulb to the point - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Trapezoid - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the trapezoid - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the trapezoid - `bottomWidth` (range) - Default: `0.35` - Range: min: 0.01, max: 1, step: 0.01 Half-width of the bottom edge - `topWidth` (range) - Default: `0.2` - Range: min: 0.01, max: 1, step: 0.01 Half-width of the top edge - `height` (range) - Default: `0.25` - Range: min: 0.01, max: 1, step: 0.01 Half-height of the trapezoid - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ### Vesica - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `color` (color) - Default: `#ffffff` Fill color of the vesica - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the vesica - `radius` (range) - Default: `0.35` - Range: min: 0.05, max: 1, step: 0.01 Radius of the two overlapping circles - `spread` (range) - Default: `0.5` - Range: min: 0.05, max: 0.95, step: 0.01 Circle separation — 0 = full circle overlap, 1 = infinitely thin lens - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees - `softness` (range) - Default: `0` - Range: min: 0, max: 0.1, step: 0.001 Edge softness for antialiasing - `strokeThickness` (range) - Default: `0` - Range: min: 0, max: 0.2, step: 0.005 Stroke thickness. Zero means no stroke. - `strokeColor` (color) - Default: `#000000` Color of the stroke outline - `strokePosition` (select) - Default: `center` Position of the stroke relative to the shape edge - `colorSpace` (select) - Default: `linear` Color space for blending fill and stroke colors ## Category: Stylize Components in this category: 30 ### Ascii - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `characters` (text) - Default: `@%#*+=-:.` Characters ordered from dense to sparse. First character is used for bright areas, last for dark areas. - `cellSize` (range) - Default: `30` - Range: min: 8, max: 100, step: 1 Size of each ASCII character cell (normalized to 1080p reference, scales proportionally at other resolutions) - `fontFamily` (select) - Default: `JetBrains Mono` Font family for characters - `spacing` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Character size within each cell (1.0 = optimal size, 0.0 = smallest) - `gamma` (range,map) - Default: `1` - Range: min: 0.25, max: 3, step: 0.01 Brightness curve adjustment. <1 brightens darks (more light characters), >1 darkens midtones (more dark characters). Use to better fit characters to image brightness range. - `alphaThreshold` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Pixels with alpha below this threshold become fully transparent. - `preserveAlpha` (checkbox) - Default: `true` When enabled, output alpha matches input alpha. When disabled, pixels above the alpha threshold become fully opaque. ### Chalkboard - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `boardColor` (color) - Default: `#000000` Background board color - `chalkColor` (color) - Default: `#eceadb` Chalk stroke color - `edgeSensitivity` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How readily edges are detected and drawn as chalk strokes - `edgeThickness` (range,map) - Default: `1.5` - Range: min: 0.5, max: 4, step: 0.1 Thickness of the chalk outline strokes - `shading` (range,map) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Amount of cross-hatch shading filling darker regions - `hatchScale` (range,map) - Default: `16` - Range: min: 3, max: 24, step: 0.5 Spacing of the cross-hatch lines in pixels - `grain` (range,map) - Default: `0.45` - Range: min: 0, max: 1, step: 0.01 Chalk dustiness / grain that breaks up the strokes ### ChromaticAberration - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `strength` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 Overall strength of the chromatic aberration effect - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction of the chromatic aberration in degrees - `redOffset` (range,map) - Default: `-1` - Range: min: -2, max: 2, step: 0.1 Red channel offset multiplier - `greenOffset` (range,map) - Default: `0` - Range: min: -2, max: 2, step: 0.1 Green channel offset multiplier - `blueOffset` (range,map) - Default: `1` - Range: min: -2, max: 2, step: 0.1 Blue channel offset multiplier ### CompressionArtifacts - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `quality` (range,map) - Default: `12` - Range: min: 1, max: 100, step: 1 JPEG quality (1 = heavily destroyed, 100 = near lossless) ### ContourLines - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `levels` (range,map) - Default: `5` - Range: min: 2, max: 30, step: 1 Number of contour levels - `lineWidth` (range,map) - Default: `2` - Range: min: 0.5, max: 5, step: 0.1 Width of the contour lines in pixels - `softness` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Edge softness of the lines (0 = sharp, 1 = soft) - `gamma` (range,map) - Default: `0.5` - Range: min: 0.1, max: 2, step: 0.01 Contour distribution. <1 clusters in bright, >1 clusters in dark - `invert` (checkbox) - Default: `false` Invert the source values - `source` (select) - Default: `luminance` Use luminance or alpha channel for contours - `colorMode` (select) - Default: `source` Use source image colors or custom colors - `lineColor` (color) - Default: `#000000` Color of the contour lines (custom mode) - `backgroundColor` (color) - Default: `transparent` Background color (custom mode) ### CRTScreen - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `pixelSize` (range,map) - Default: `128` - Range: min: 8, max: 128, step: 1 Size of individual TV pixels (lower = more pixels) - `colorShift` (range,map) - Default: `1` - Range: min: 0, max: 10, step: 0.1 Chromatic aberration amount - `scanlineIntensity` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.1 Strength of horizontal scanlines - `scanlineFrequency` (range,map) - Default: `200` - Range: min: 100, max: 800, step: 10 Number of scanlines across screen - `brightness` (range,map) - Default: `1` - Range: min: 0.5, max: 2, step: 0.1 Screen brightness boost - `contrast` (range,map) - Default: `1` - Range: min: 0.5, max: 2, step: 0.1 Screen contrast enhancement - `vignetteIntensity` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.1 Strength of corner darkening effect (0 = off) - `vignetteRadius` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the vignette extends inward (0 = edges only, 1 = reaches center) ### DataMosh - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `0.7` - Range: min: 0, max: 1, step: 0.01 How much of the image locks and smears — the fraction of corrupted macroblocks - `blockSize` (range) - Default: `48` - Range: min: 30, max: 150, step: 1 Macroblock size — the granularity of the corruption - `drift` (range,map) - Default: `0.35` - Range: min: 0, max: 1, step: 0.01 Motion vector strength — how fast corrupted areas drag their pixels away - `churn` (range,map) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 How often each block re-rolls its fate — low values let corrupted regions melt for a long time before recovering - `blend` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Blend between the live image and the moshed stream - `speed` (range) - Default: `1` - Range: min: 0, max: 4, step: 0.1 Simulation speed. 0 freezes the decay in place. - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for the corruption layout ### Dither - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `pattern` (select) - Default: `bayer4` Dithering pattern algorithm - `pixelSize` (range) - Default: `4` - Range: min: 1, max: 20, step: 1 Size of dithering pixels - `threshold` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Luminance threshold for dithering - `spread` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 How much of the luminance range participates in dithering (lower = more solid areas) - `colorMode` (select) - Default: `custom` How colors are determined - `colorA` (color) - Default: `transparent` Dark color for dithering - `colorB` (color) - Default: `#ffffff` Light color for dithering ### DropShadow - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `color` (color) - Default: `#000000` Shadow color - `distance` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.005 How far the shadow is offset from the content - `angle` (range,map) - Default: `135` - Range: min: 0, max: 360, step: 1 Direction the shadow is cast (compass degrees: 0=up, 90=right, 135=lower-right, 180=down) - `blur` (range,map) - Default: `5` - Range: min: 0, max: 20, step: 0.5 Shadow softness (blur radius in pixels) - `intensity` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Shadow intensity — how strong/visible the shadow is - `cutout` (checkbox) - Default: `false` Hide the original layer and show only the shadow ### Engraving - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `style` (select) - Default: `crosshatch` The engraving cut: a single line plate, cross-hatched plates building up the shadows, or one continuous spiral - `frequency` (range,map) - Default: `90` - Range: min: 20, max: 300, step: 1 Line density — how many engraved lines span the height of the canvas - `angle` (range,map) - Default: `8` - Range: min: 0, max: 360, step: 1 Direction of the base line work (in degrees) - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center the spiral coils outward from - `relief` (range,map) - Default: `0.6` - Range: min: 0, max: 2, step: 0.01 How strongly the image brightness displaces the lines — the engraved 'lines climb over the form' effect - `waviness` (range,map) - Default: `0.35` - Range: min: 0, max: 1, step: 0.01 Organic meander of the line work, like a hand-pulled burin stroke - `contrast` (range,map) - Default: `1.15` - Range: min: 0.25, max: 3, step: 0.01 Tonal contrast applied before the lines are cut — higher pushes mid-tones toward pure line or pure paper - `inkColor` (color) - Default: `#1a1410` Color of the engraved ink - `paperColor` (color) - Default: `#f4eee2` Paper color shown between the lines ### FilmGrain - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `strength` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.025 Intensity of the film grain noise - `bias` (range) - Default: `2` - Range: min: 0, max: 10, step: 0.1 Concentrates grain in darker areas. Higher values focus grain more heavily on shadows; 0 applies grain uniformly. - `animated` (checkbox) - Default: `false` When enabled, the grain pattern changes each frame for a dynamic film effect ### Glitch - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Overall glitch strength and frequency of glitch bursts - `speed` (range) - Default: `1` - Range: min: 0.1, max: 5, step: 0.1 How fast the glitch pattern evolves - `rgbShift` (range,map) - Default: `5` - Range: min: 0, max: 20, step: 0.5 Amount of chromatic aberration (RGB channel splitting) - `blockDensity` (range,map) - Default: `10` - Range: min: 2, max: 50, step: 1 Base number of horizontal glitch bands - `colorBarIntensity` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 Intensity of vivid neon color bar overlay in glitch regions - `mirrorAmount` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Chance of glitch blocks showing mirrored/flipped content - `scanlineIntensity` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 Visibility of CRT-style horizontal scanlines in distorted areas ### Glow - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `1` - Range: min: 0, max: 50, step: 0.5 Glow intensity (brightness of the glow effect) - `threshold` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Brightness threshold for glow extraction (lower = more glow) - `size` (range,map) - Default: `25` - Range: min: 0, max: 100, step: 1 Glow spread in pixels (clean up to ~72px, mild banding above) ### GradientMap - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `palette` (select) - Default: `rainbow` Built-in cosine palette, or Custom Colors to pick your own stops - `colorLow` (color) - Default: `#1a0b2e` Color for the darkest tones - `colorMid` (color) - Default: `#e94560` Color for the midtones - `colorHigh` (color) - Default: `#f9ed69` Color for the brightest tones - `speed` (range,map) - Default: `0.15` - Range: min: -2, max: 2, step: 0.01 Gradient animation speed (0 = static). The gradient cycles seamlessly. - `contrast` (range,map) - Default: `1` - Range: min: 0, max: 3, step: 0.01 Steepness of the luminance-to-gradient mapping - `blackPoint` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Input shadow clip — luminance at/below this maps to the start of the gradient - `whitePoint` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Input highlight clip — luminance at/above this maps to the end of the gradient - `strength` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Blend between the original image (0) and the gradient-mapped result (1) - `colorSpace` (select) - Default: `oklch` Color space for interpolating custom colors ### Halftone - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `style` (select) - Default: `classic` Halftone rendering style - `frequency` (range,map) - Default: `100` - Range: min: 10, max: 300, step: 1 Frequency of the halftone dots - `angle` (range,map) - Default: `45` - Range: min: 0, max: 360, step: 1 Rotation angle of the pattern (in degrees) - `cyanAngle` (range,map) - Default: `15` - Range: min: 0, max: 360, step: 1 Screen angle for the cyan plate (in degrees) - `magentaAngle` (range,map) - Default: `75` - Range: min: 0, max: 360, step: 1 Screen angle for the magenta plate (in degrees) - `yellowAngle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Screen angle for the yellow plate (in degrees) - `blackAngle` (range,map) - Default: `45` - Range: min: 0, max: 360, step: 1 Screen angle for the black plate (in degrees) - `misprint` (range,map) - Default: `0` - Range: min: 0, max: 0.01, step: 0.0005 Simulated mis-registration between plates. Plates are offset around the misprint angle, producing colour fringing at the edges of inked regions. - `misprintAngle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction the plates drift apart. Rotating this rotates the colour-fringing pattern. - `paperColor` (color) - Default: `#ffffff` Paper/substrate color shown where no ink lands - `cyanColor` (color) - Default: `#00ffff` Cyan ink color - `magentaColor` (color) - Default: `#ff00ff` Magenta ink color - `yellowColor` (color) - Default: `#ffff00` Yellow ink color - `blackColor` (color) - Default: `#000000` Black (key) ink color ### KeyFrames - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `trackers` (range,map) - Default: `12` - Range: min: 1, max: 64, step: 1 Number of simultaneous trackers. - `detect` (select) - Default: `bright` What the trackers hunt for. - `threshold` (range) - Default: `0.15` - Range: min: 0, max: 0.9, step: 0.01 Feature floor — content scoring below this doesn't count as trackable at all. - `variance` (range,map) - Default: `0.8` - Range: min: 0, max: 1, step: 0.01 Spread of tracker preferences — 0 hunts only the strongest features, 1 distributes trackers across the whole brightness range. - `agility` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How fast trackers travel and how wide they search. - `lifespan` (range,map) - Default: `6` - Range: min: 0, max: 20, step: 0.5 Seconds a tracker follows its target before retiring and reacquiring elsewhere. 0 = track forever. - `trail` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Visibility of the keyframe trail each tracker leaves behind. - `markerSize` (range) - Default: `28` - Range: min: 8, max: 80, step: 1 Tracker gizmo size in pixels. - `lineWidth` (range) - Default: `1.5` - Range: min: 0.5, max: 6, step: 0.25 Stroke width in pixels. - `markerColor` (color) - Default: `#54d66b` Tracker gizmo color. - `keyframeColor` (color) - Default: `#ffcf33` Keyframe diamond color. - `pathColor` (color) - Default: `#ffffffb8` Motion path color. ### LensDistortion - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the lens effect — the focus zone, lens warp, circle crop and swirl all pivot around it - `spread` (range,map) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Strength of the color split; how far the color layers are pushed apart (0 is off) - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction of the spread in degrees - `perspective` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Shapes the spread direction from a straight line (0) to a radial burst out from the centre (1) - `bias` (range,map) - Default: `1` - Range: min: -1, max: 1, step: 0.01 Shifts the colors toward one end of the spread; 0 spaces them evenly - `count` (range,map) - Default: `35` - Range: min: 2, max: 50, step: 1 Number of sampled color layers along the spread; higher is smoother and costlier - `dispersion` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Overall amount of color dispersion; 1 gives each layer its own color from the spectrum, 0 keeps the original color - `dispersionShift` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Balance of the dispersion between a soft circular zone at the centre and the rest; -1 keeps it in the centre only, 1 at the edges only - `dispersionColor` (range,map) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Rotates the dispersion colors around the hue wheel, 0 to 1 for a full turn - `focusCenter` (range,map) - Default: `0.8` - Range: min: 0, max: 1, step: 0.01 Reduces the spread in a circular zone at the centre; 0 keeps it full to the centre - `focusEdges` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Reduces the spread toward the edges; 1 restores the original image there - `lensBulge` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Radial lens warp; positive bulges out like a fisheye, negative pinches in like a pincushion - `lensCircle` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Squeezes pixels outside the inscribed circle inward so the outline becomes a circle - `swirl` (range,map) - Default: `0.35` - Range: min: -1, max: 1, step: 0.01 Rotates the color layers around the centre by an angle growing along the spread; 0 is off - `noise` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Scatters the spread direction with noise; 0 is off - `noiseFrequency` (range,map) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Frequency of the direction noise; higher is finer (no effect with noise at 0) - `noiseOffset` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Offsets the noise pattern for a different seed (no effect with noise at 0) - `grainMixer` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Scatters the spread with grain noise, breaking up the edges of the color layers - `grainOverlay` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Post-processing black/white grain overlay ### LensFlare - **Properties**: - `lightPosition` (position) - Default: `{"x":0.3,"y":0.3}` Position of the light source - `intensity` (range,map) - Default: `0.5` - Range: min: 0, max: 2, step: 0.01 Master brightness of the entire lens flare effect - `ghostIntensity` (range,map) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Brightness of internal reflection ghost discs along the flare axis - `ghostSpread` (range) - Default: `0.7` - Range: min: 0.1, max: 2, step: 0.01 Spacing between ghost reflections along the flare axis - `ghostChroma` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Rainbow chromatic fringing around ghost element edges - `haloIntensity` (range,map) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Brightness of the circular halo ring from internal reflection - `haloRadius` (range) - Default: `0.6` - Range: min: 0.1, max: 1, step: 0.01 Radius of the halo ring - `haloChroma` (range,map) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Spectral dispersion on the halo creating rainbow color separation - `haloSoftness` (range,map) - Default: `0.8` - Range: min: 0.01, max: 3, step: 0.01 Thickness and softness of the halo ring - `starburstIntensity` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Brightness of diffraction spikes radiating from the light source - `starburstPoints` (range,map) - Default: `6` - Range: min: 4, max: 16, step: 1 Number of starburst spikes (simulates aperture blade count) - `streakIntensity` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Brightness of horizontal anamorphic light streak - `streakLength` (range,map) - Default: `0.5` - Range: min: 0.1, max: 1, step: 0.01 Horizontal extent of the anamorphic streak - `glareIntensity` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 Soft veiling glare that washes out contrast around the light - `glareSize` (range,map) - Default: `0.5` - Range: min: 0.1, max: 1, step: 0.01 Size of the soft glare glow - `edgeFade` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 How much the flare fades when the light source is near the screen edge (0 = no fade, 1 = heavy fade) - `speed` (range) - Default: `0.5` - Range: min: 0, max: 3, step: 0.1 Speed of subtle flare shimmer and starburst rotation ### LightLeak - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `position` (position) - Default: `{"x":0.95,"y":0.4}` Anchor point of the leak — the light beams from here toward the canvas centre - `spread` (range,map) - Default: `0.55` - Range: min: 0.1, max: 1.5, step: 0.01 How far the light bleeds into the frame - `intensity` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Exposure strength of the leak - `streaks` (range,map) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Strength of the parallel streak bands further into the frame - `colorHot` (color) - Default: `#fff3c4` Core color where the leak is fully overexposed - `colorMid` (color) - Default: `#ff7a2f` Main body color of the leak - `colorFringe` (color) - Default: `#a63d8f` Outer fringe color where the light fades out - `flicker` (range,map) - Default: `0.35` - Range: min: 0, max: 1, step: 0.01 Breathing of the leak intensity - `speed` (range) - Default: `1` - Range: min: 0, max: 4, step: 0.1 Speed of the breathing, drift and evolution. 0 freezes the leak. - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed — re-rolls the drift and breathing pattern ### ObjectTracker - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `detectionMode` (select) - Default: `bright` What counts as a detectable object. - `threshold` (range) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Detection cut-off. - `layout` (select) - Default: `mosaic` How the canvas is partitioned into detection cells. - `cellSize` (range) - Default: `400` - Range: min: 24, max: 800, step: 1 Base cell size in pixels - `maxDepth` (range) - Default: `2` - Range: min: 1, max: 5, step: 1 Maximum subdivision levels for Quadtree/Mosaic layouts (each level can quarter a cell). - `boxStyle` (select) - Default: `corners` Bounding box outline style - `lineWidth` (range) - Default: `1.5` - Range: min: 0.5, max: 12, step: 0.5 Thickness of the box outline in pixels. - `cornerRadius` (range) - Default: `0` - Range: min: 0, max: 40, step: 1 Corner radius of the box outline in pixels - `strokeColor` (color) - Default: `#ffffff` Bounding box outline colour. - `fillColor` (color) - Default: `#5a79911a` Bounding box fill color. - `labelColor` (color) - Default: `#000000` Label text color. - `labelBackgroundColor` (color) - Default: `#ffffff` Label pill background color. - `labelMode` (select) - Default: `none` What each label shows. - `labelPosition` (select) - Default: `bottom-right` Which corner of the box the label anchors to. - `labelRadius` (range) - Default: `0` - Range: min: 0, max: 30, step: 1 Corner radius of the label pill in pixels. - `labelInset` (checkbox) - Default: `true` Place the label inside or outside the box. - `fontFamily` (font-family) - Default: `Inter` Google Fonts family used for label text. - `fontWeight` (font-weight) - Default: `500` Font weight for label text. - `fontSize` (range) - Default: `0.015` - Range: min: 0.01, max: 0.5, step: 0.005 Label text size as a fraction of canvas height. - `letterSpacing` (range) - Default: `0` - Range: min: -0.1, max: 0.5, step: 0.005 Letter spacing for label text, in em units. ### Paper - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `roughness` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Surface roughness — higher values create more pronounced brightness variation - `grainScale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the paper grain — lower = coarser, higher = finer - `displacement` (range) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Surface micro-roughness — shifts pixels at grain scale like real paper fiber bumps - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation ### ParticleField - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `count` (range) - Default: `15000` - Range: min: 1000, max: 40000, step: 500 Number of particles — how finely the child is sampled into the field - `depthSource` (select) - Default: `luminance` Which channel of the child drives each particle's depth toward or away from the camera - `depth` (range,map) - Default: `0.7` - Range: min: 0, max: 2, step: 0.01 Depth of the relief — how far bright and dark areas rise toward and sink away from the camera - `particleShape` (select) - Default: `dot` What each particle is drawn as — a crisp dot or square, or a soft glow puff - `particleSize` (range,map) - Default: `0.75` - Range: min: 0.3, max: 3, step: 0.01 Size of each particle relative to the grid spacing - `depthShading` (range) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 How much far particles dim into the distance — the main cue that sells the 3D relief - `wobble` (range,map) - Default: `0.35` - Range: min: 0, max: 1, step: 0.01 Gentle idle drift that keeps the field breathing even on a still image - `zoom` (range,map) - Default: `1` - Range: min: 0.3, max: 2.5, step: 0.01 Camera distance — dolly the whole field closer or further away - `rotationX` (range,map) - Default: `0` - Range: min: -180, max: 180, step: 1 Camera orbit around the horizontal axis — tilt the relief toward or away from you - `rotationY` (range,map) - Default: `0` - Range: min: -180, max: 180, step: 1 Camera orbit around the vertical axis — view the particle extrusion from the side - `rotationZ` (range,map) - Default: `0` - Range: min: -180, max: 180, step: 1 Camera roll around the view axis - `offsetX` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Shift the whole field horizontally across the frame (in screen widths) - `offsetY` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Shift the whole field vertically across the frame (in screen heights) — tilt it flat, then sink it toward the bottom like a ground plane - `cursorMode` (select) - Default: `push` How the cursor disturbs the field — push throws particles away and toward you, pull gathers them in - `cursorStrength` (range) - Default: `0.8` - Range: min: 0, max: 2, step: 0.01 Strength of the cursor force — how hard particles get thrown before springing back - `cursorRadius` (range) - Default: `0.2` - Range: min: 0.05, max: 1, step: 0.01 Reach of the cursor field, in screen units ### Pixelate - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `scale` (range,map) - Default: `50` - Range: min: 1, max: 200, step: 1 Number of pixels along the longest edge (higher = smaller pixels) - `gap` (range,map) - Default: `0` - Range: min: 0, max: 0.95, step: 0.01 Space between pixels as a fraction of cell size (0 = no gap, 1 = fully invisible) - `roundness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Roundness of each pixel's corners (0 = square, 1 = circle) ### ReflectivePlane - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `height` (range,map) - Default: `0.7` - Range: min: 0, max: 1, step: 0.01 Vertical position of the reflective surface - `distance` (range,map) - Default: `0.5` - Range: min: 0.01, max: 1, step: 0.01 How far below the floor the reflection remains visible before fully fading to transparent. - `falloff` (range,map) - Default: `0.5` - Range: min: 0, max: 3, step: 0.01 Width of the fade zone, as a fraction of reflection distance. - `blur` (range,map) - Default: `3` - Range: min: 0, max: 5, step: 0.01 Maximum blur applied to the reflection far from the surface. - `blurDistance` (range) - Default: `0.3` - Range: min: 0.01, max: 1, step: 0.01 How far below the surface the blur takes to ramp from sharp to maximum. - `edges` (select) - Default: `stretch` How to handle reflected samples that fall outside the source content. ### Stone - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Strength of the relief shading applied to the child content - `scale` (range) - Default: `1` - Range: min: 0.1, max: 8, step: 0.05 Scale of the pattern — lower = larger features, higher = finer grain - `contrast` (range) - Default: `0` - Range: min: -1, max: 2, step: 0.05 Contrast of the texture — negative flattens it into a subtle overlay - `distortion` (range) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Surface distortion — warps the child along the texture like carved relief - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation ### TimeTrail - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `trailSource` (select) - Default: `motion` What sheds the trail — Motion trails whatever changes frame-to-frame (works on opaque images and video), Alpha trails the child's transparency coverage (best for a clean shape over empty canvas) - `motionThreshold` (range,map) - Default: `0.06` - Range: min: 0.01, max: 0.5, step: 0.01 How much a pixel must change between frames to shed a trail (Motion source only) — lower catches subtle movement, higher only fast motion - `trailLength` (range,map) - Default: `0.6` - Range: min: 0.05, max: 4, step: 0.01 How long the trail lingers, in seconds — the time constant of the fade (the star control) - `diffusion` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 How much the trail smears and softens as it fades — 0 keeps crisp ghost frames, higher melts them together - `trailOpacity` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Overall strength of the trail behind the live frame - `trailBlend` (select) - Default: `normal` How the trail combines with the frame — Add / Screen build glowing light-painting trails, Multiply lays down dark ink ghosts, plus the full standard blend set - `driftX` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Sideways drift of the trail per second — smears the trail in a direction - `driftY` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Vertical drift of the trail per second - `zoom` (range,map) - Default: `1` - Range: min: 0.9, max: 1.1, step: 0.001 Per-frame zoom of the trail around the centre — above 1 pulls the trail into an outward tunnel, below 1 sucks it inward - `tintMode` (select) - Default: `none` Colour the trail — Color tints it a single hue, Rainbow cycles hue as the trail ages - `tint` (color) - Default: `#33aaff` Trail tint colour (used in Color mode) - `speed` (range) - Default: `1` - Range: min: 0, max: 4, step: 0.1 Simulation speed. 0 freezes the trail in place. ### VHS - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `wobble` (range,map) - Default: `1` - Range: min: 0, max: 5, step: 0.01 Overall amount of tape damage — waves, creases, and head-switching noise. Bursts on and off organically over time. - `scanlineNoise` (range,map) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Per-scanline fine chroma/luma jitter. Adds the classic horizontal-streak detail. - `smear` (range,map) - Default: `0.2` - Range: min: -2, max: 2, step: 0.01 Horizontal chroma smear (color bleed) amount. Positive trails colour to the right (classic VHS), negative trails it to the left. - `speed` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.1 Animation speed of the tape effects. ### Vignette - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `color` (color) - Default: `#000000` Color of the vignette at the edges - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center of the clear area where the vignette begins - `radius` (range,map) - Default: `0.5` - Range: min: 0, max: 1.5, step: 0.01 Distance from center where the vignette begins to fade in - `falloff` (range,map) - Default: `0.5` - Range: min: 0.01, max: 1.5, step: 0.01 Width of the transition zone from clear to full vignette - `intensity` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Strength of the vignette effect ### Watercolor - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `radius` (range) - Default: `3` - Range: min: 1, max: 8, step: 1 Brush size — radius of the painterly flattening - `bleed` (range,map) - Default: `1` - Range: min: 0, max: 3, step: 0.01 Amount the pigment bleeds and wobbles past hard edges - `strength` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Blend between the original image (0) and the full watercolor effect (1) - `paper` (range,map) - Default: `0.35` - Range: min: 0, max: 1, step: 0.01 Strength of the paper grain the pigment settles into - `paperColor` (color) - Default: `#fbf7ec` Tint of the paper grain ### Wool - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Strength of the relief shading applied to the child content - `scale` (range) - Default: `4` - Range: min: 0.1, max: 8, step: 0.05 Scale of the pattern — lower = larger features, higher = finer grain - `contrast` (range) - Default: `-0.5` - Range: min: -1, max: 2, step: 0.05 Contrast of the texture — negative flattens it into a subtle overlay - `distortion` (range) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Surface distortion — warps the child along the texture like carved relief - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation ## Category: Textures Components in this category: 52 ### Aurora - **Properties**: - `colorA` (color) - Default: `#a533f8` Edge color at the curtain base - `colorB` (color) - Default: `#22ee88` Core color in the bright center - `colorC` (color) - Default: `#1694e8` Tip color at the ray ends - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `balance` (range,map) - Default: `50` - Range: min: 0, max: 100, step: 1 Shifts color distribution across the curtain height - `intensity` (range,map) - Default: `80` - Range: min: 0, max: 100, step: 1 Overall aurora brightness - `curtainCount` (range) - Default: `4` - Range: min: 1, max: 4, step: 1 Number of aurora curtain layers - `speed` (range) - Default: `5` - Range: min: -10, max: 10, step: 0.1 Animation speed - `waviness` (range,map) - Default: `50` - Range: min: 0, max: 200, step: 1 How much the curtains undulate - `rayDensity` (range,map) - Default: `20` - Range: min: 0, max: 100, step: 1 Density of vertical ray structures - `height` (range,map) - Default: `120` - Range: min: 10, max: 200, step: 1 How tall the aurora extends - `center` (position) - Default: `{"x":0.5,"y":0}` Center position of the aurora - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for variation ### Beam - **Properties**: - `startPosition` (position) - Default: `{"x":0.2,"y":0.5}` Starting point of the beam - `endPosition` (position) - Default: `{"x":0.8,"y":0.5}` Ending point of the beam - `startThickness` (range,map) - Default: `0.2` - Range: min: 0, max: 2, step: 0.1 Thickness at the start of the beam - `endThickness` (range,map) - Default: `0.2` - Range: min: 0, max: 2, step: 0.1 Thickness at the end of the beam - `startSoftness` (range,map) - Default: `0.5` - Range: min: 0, max: 50, step: 0.1 Edge softness at the start of the beam - `endSoftness` (range,map) - Default: `0.5` - Range: min: 0, max: 20, step: 0.1 Edge softness at the end of the beam - `insideColor` (color) - Default: `#FF0000` Color at the center of the beam - `outsideColor` (color) - Default: `#0000FF` Color at the edges of the beam - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Blob - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `colorA` (color) - Default: `#ff6b35` Primary color of the blob - `colorB` (color) - Default: `#e91e63` Secondary color of the blob - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `size` (range) - Default: `0.5` - Range: min: 0, max: 2, step: 0.01 Size of the blob - `deformation` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 How organic and blobby the shape is (0 = circle, 1 = very blobby) - `softness` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 Softness of the blob edges (combines edge width and transition curve) - `highlightIntensity` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 Intensity of specular highlight effect - `highlightX` (range) - Default: `0.3` - Range: min: -1, max: 1, step: 0.1 Light direction X component - `highlightY` (range) - Default: `-0.3` - Range: min: -1, max: 1, step: 0.1 Light direction Y component - `highlightZ` (range) - Default: `0.4` - Range: min: -1, max: 1, step: 0.1 Light direction Z component - `highlightColor` (color) - Default: `#ffe11a` Color of the specular highlight - `speed` (range,map) - Default: `0.5` - Range: min: 0, max: 2, step: 0.1 Animation speed - `seed` (range) - Default: `1` - Range: min: 0, max: 100, step: 1 Adjusts the starting state, useful for variation - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the blob - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### BlockNoise - **Properties**: - `colorA` (color) - Default: `#ffffff` First color - `colorB` (color) - Default: `#000000` Second color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `scale` (range) - Default: `2` - Range: min: -2, max: 5, step: 0.1 Pattern scale (higher = larger patterns) - `contrast` (range,map) - Default: `0` - Range: min: -1, max: 5, step: 0.1 Pattern contrast (higher = sharper transitions) - `balance` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.05 Balance between colors (negative = more colorB, positive = more colorA) - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `speed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Animation speed ### BlueNoise - **Properties**: - `colorA` (color) - Default: `#ffffff` First color - `colorB` (color) - Default: `#000000` Second color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `grain` (range) - Default: `1` - Range: min: 1, max: 32, step: 1 Grain size in pixels (1 = per-pixel, higher = chunkier speckle) - `contrast` (range,map) - Default: `0` - Range: min: -1, max: 5, step: 0.1 Pattern contrast (higher = sharper transitions) - `balance` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.05 Balance between colors (negative = more colorB, positive = more colorA) - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation ### BrickPattern - **Properties**: - `colorBrick` (color) - Default: `#000000` Brick color - `colorMortar` (color) - Default: `#ffffff` Mortar / gap color - `cellsX` (range,map) - Default: `8` - Range: min: 1, max: 30, step: 1 Number of bricks per row - `cellsY` (range,map) - Default: `10` - Range: min: 1, max: 30, step: 1 Number of brick rows - `mortar` (range,map) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Width of mortar gaps — equal pixel thickness in both directions - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Softness of the brick edges (0 = crisp, 1 = very soft) - `variation` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Per-brick random lightening/darkening of the brick color - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the pattern in degrees - `speed` (range) - Default: `0` - Range: min: -2, max: 2, step: 0.1 Animation speed - `offset` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Static horizontal offset — shifts the brick pattern without animating - `speedVariance` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 How much each row's speed varies — at high values rows move at different speeds and directions - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for per-row speed variation - `colorSpace` (select) - Default: `linear` Color space for interpolation ### Checkerboard - **Properties**: - `colorA` (color) - Default: `#cccccc` First color of the checkerboard pattern - `colorB` (color) - Default: `#999999` Second color of the checkerboard pattern - `cells` (range,map) - Default: `8` - Range: min: 1, max: 50, step: 1 Number of cells along the canvas height (creates square cells). Switch the unit to px in the editor to set an absolute cell size instead. - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.1 Smoothness of the transition between colors (0 = hard edges, 1 = very soft) - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Chevron - **Properties**: - `colorA` (color) - Default: `#000000` First color - `colorB` (color) - Default: `#ffffff` Second color - `count` (range,map) - Default: `5` - Range: min: 1, max: 30, step: 1 Number of chevron pairs visible - `angle` (range,map) - Default: `0` - Range: min: -180, max: 180, step: 1 Rotation angle of the chevrons - `balance` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Ratio of the two colors - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Edge softness - `speed` (range) - Default: `0` - Range: min: -2, max: 2, step: 0.1 Animation speed - `offset` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Phase offset for pattern positioning - `colorSpace` (select) - Default: `linear` Color space for interpolation ### ColorWheel - **Properties**: - `mode` (select) - Default: `rainbow` Rainbow cycles through the full spectrum; Custom loops through your three chosen colors - `colorA` (color) - Default: `#ff0000` First color in the cycle - `colorB` (color) - Default: `#00ff88` Second color in the cycle - `colorC` (color) - Default: `#0066ff` Third color in the cycle - `scale` (range,map) - Default: `1` - Range: min: 0.1, max: 10, step: 0.1 Number of color cycles across the viewport - `angle` (range,map) - Default: `0` - Range: min: -180, max: 180, step: 1 Direction the gradient flows - `speed` (range) - Default: `0.05` - Range: min: -1, max: 1, step: 0.01 Speed at which the gradient cycles - `colorSpace` (select) - Default: `oklch` Color space for blending between custom colors ### ConicGradient - **Properties**: - `colorA` (color) - Default: `#FF0080` Starting color of the sweep - `colorB` (color) - Default: `#00BFFF` Ending color of the sweep (wraps back to Color A) - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center point of the sweep - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation offset in degrees — shifts where Color A begins - `repeat` (range,map) - Default: `1` - Range: min: 1, max: 24, step: 1 Number of times the gradient repeats around the circle. Values above 1 create a starburst pattern. - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### CurlNoise - **Properties**: - `colorA` (color) - Default: `#ffffff` First color - `colorB` (color) - Default: `#000000` Second color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `scale` (range) - Default: `2` - Range: min: -2, max: 5, step: 0.1 Pattern scale (higher = larger patterns) - `contrast` (range,map) - Default: `0` - Range: min: -1, max: 5, step: 0.1 Pattern contrast (higher = sharper transitions) - `balance` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.05 Balance between colors (negative = more colorB, positive = more colorA) - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `speed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Animation speed ### DiamondGradient - **Properties**: - `colorA` (color) - Default: `#4ffb4a` Color at the center of the diamond - `colorB` (color) - Default: `#4f1238` Color at the outer edges of the diamond - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center point of the diamond - `size` (range,map) - Default: `0.7` - Range: min: 0.01, max: 2, step: 0.01 Extent of the gradient — controls how far Color A reaches before transitioning to Color B - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees — tilts the diamond into a rhombus - `repeat` (range,map) - Default: `1` - Range: min: 1, max: 16, step: 0.5 Number of times the gradient repeats outward. Values above 1 create concentric diamond or square bands. - `roundness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Morphs from a sharp diamond (0) to a square (1) - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### DotGrid - **Properties**: - `color` (color) - Default: `#ffffff` The color of the dot - `density` (range) - Default: `30` - Range: min: 1, max: 200, step: 1 The number of dots on the longest canvas edge - `dotSize` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 The size of each dot, zero (0) being invisible, one (1) filled the grid with no gaps - `offset` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Horizontal stagger of alternating rows (0.5 = classic polka-dot brick offset) - `speed` (range) - Default: `0` - Range: min: -3, max: 3, step: 0.01 Animates the rows drifting horizontally (0 = static) - `speedVariance` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Per-row random speed variance for irregular drifting motion - `twinkle` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.1 Intensity of the twinkle effect (0 = off, 1 = full twinkle) ### ErosionNoise - **Properties**: - `colorA` (color) - Default: `#ffffff` First color - `colorB` (color) - Default: `#000000` Second color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `scale` (range) - Default: `1.5` - Range: min: -2, max: 5, step: 0.1 Pattern scale (higher = larger patterns) - `contrast` (range,map) - Default: `0` - Range: min: -1, max: 5, step: 0.1 Pattern contrast (higher = sharper transitions) - `balance` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.05 Balance between colors (negative = more colorB, positive = more colorA) - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation ### FallingLines - **Properties**: - `colorA` (color) - Default: `#ffffff` Color at the leading edge of each line - `colorB` (color) - Default: `#ffffff00` Color at the trailing edge (transparent by default) - `colorSpace` (select) - Default: `linear` Color space for interpolation between lead and trail colors - `angle` (range) - Default: `90` - Range: min: 0, max: 360, step: 1 Direction of movement in degrees (90=down, 270=up, 0=right, 180=left) - `speed` (range) - Default: `0.5` - Range: min: 0, max: 3, step: 0.01 Movement speed - `speedVariance` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Per-line speed variance (0=uniform, 1=high variance) - `density` (range) - Default: `15` - Range: min: 1, max: 60, step: 1 Number of line columns across the canvas - `trailLength` (range,map) - Default: `0.35` - Range: min: 0.01, max: 1, step: 0.01 Streak length relative to spacing (0=point, 1=continuous) - `balance` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Color mix midpoint (0.5=linear, 0=all trailing/colorB, 1=all leading/colorA) - `strokeWidth` (range,map) - Default: `0.15` - Range: min: 0.02, max: 1, step: 0.02 Line thickness as fraction of column width (0=hairline, 1=full width) - `rounding` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Rounds the leading edge (0=flat/square, 1=fully rounded cap) ### FloatingParticles - **Requires Child**: No (this is generative) - **Properties**: - `particleColor` (color) - Default: `#ffffff` Color of the particles - `shape` (select) - Default: `dot` What each particle is drawn as — a crisp dot or square (softness still feathers them), or a soft glow puff - `count` (range) - Default: `1200` - Range: min: 100, max: 8192, step: 100 Number of particles - `particleSize` (range,map) - Default: `1.2` - Range: min: 0.3, max: 4, step: 0.05 Size of the particles (each also varies slightly for depth) - `softness` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Edge softness of each particle — 0 is a crisp shape, 1 a soft glow puff - `speed` (range) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Speed of the shared drift - `angle` (range) - Default: `90` - Range: min: 0, max: 360, step: 1 Drift heading in degrees (0 = left, 90 = up, 180 = right, 270 = down — the classic default floats upward) - `speedVariance` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.05 Per-particle speed variance around the shared drift (0 = everything moves in lockstep) - `angleVariance` (range) - Default: `30` - Range: min: 0, max: 180, step: 1 Per-particle heading variance in degrees (0 = one shared direction, 180 = every which way) - `randomness` (range,map) - Default: `0.25` - Range: min: 0, max: 1, step: 0.05 Orbital wander — each particle circles lazily around its drift path instead of gliding straight - `twinkle` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.05 Intensity of the twinkle (0 = steady, 1 = full shimmer) - `cursorStrength` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 How strongly the cursor stirs the field — 0 (default) leaves the drift undisturbed ### FlowingGradient - **Properties**: - `colorA` (color) - Default: `#0a0015` Deep background color - `colorB` (color) - Default: `#6b17e6` Primary accent color - `colorC` (color) - Default: `#ff4d6a` Secondary accent color - `colorD` (color) - Default: `#ff6b35` Tertiary accent color - `colorSpace` (select) - Default: `oklch` Color space for color interpolation - `speed` (range) - Default: `1` - Range: min: 0, max: 10, step: 0.1 Animation speed - `distortion` (range,map) - Default: `0.5` - Range: min: 0, max: 2, step: 0.1 Organic distortion intensity - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for variation ### FractalNoise - **Properties**: - `colorA` (color) - Default: `#000000` First color - `colorB` (color) - Default: `#ffffff` Second color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `octaves` (range) - Default: `4` - Range: min: 1, max: 8, step: 1 Number of noise octaves (more = more detail) - `detail` (range,map) - Default: `2` - Range: min: 1, max: 4, step: 0.1 How much finer each successive octave becomes - `contrast` (range,map) - Default: `0.5` - Range: min: 0.1, max: 1, step: 0.01 How strongly finer octaves contribute — higher values create more texture contrast - `speed` (range) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Speed at which the noise pattern evolves in place - `angle` (range,map) - Default: `0` - Range: min: -180, max: 180, step: 1 Rotation angle in degrees - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `colorSpace` (select) - Default: `linear` Color space for interpolation ### GaborNoise - **Properties**: - `colorA` (color) - Default: `#ffffff` First color - `colorB` (color) - Default: `#000000` Second color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `scale` (range) - Default: `1.5` - Range: min: -2, max: 5, step: 0.1 Pattern scale (higher = larger patterns) - `frequency` (range) - Default: `8` - Range: min: 1, max: 24, step: 0.5 Frequency of the oriented waves within each cell - `contrast` (range,map) - Default: `0` - Range: min: -1, max: 5, step: 0.1 Pattern contrast (higher = sharper transitions) - `balance` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.05 Balance between colors (negative = more colorB, positive = more colorA) - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `speed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Animation speed ### Godrays - **Properties**: - `center` (position) - Default: `{"x":0,"y":0}` The center point of the god rays - `density` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.1 Frequency of ray sectors - `intensity` (range,map) - Default: `0.8` - Range: min: 0, max: 1, step: 0.1 Ray visibility within sectors - `spotty` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.1 Density of spots on rays (higher = more spots) - `speed` (range) - Default: `0.5` - Range: min: 0, max: 2, step: 0.1 Animation speed of the rays - `rayColor` (color) - Default: `#4283fb` Color of the light rays - `backgroundColor` (color) - Default: `transparent` Background color ### Grid - **Properties**: - `color` (color) - Default: `#ffffff` The color of the grid lines - `cellColor` (color) - Default: `transparent` Fill color of the cells (transparent = lines only). Pair with Variation for a tiled look. - `cells` (range,map) - Default: `10` - Range: min: 1, max: 50, step: 1 Number of cells along the shortest canvas edge (creates square cells) - `thickness` (range,map) - Default: `1` - Range: min: 0, max: 20, step: 0.1 Thickness of grid lines (normalized, 0.0-1.0) - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the grid in degrees. At 45° this produces a crosshatch/diamond pattern. - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Softness of the line edges (0 = crisp, 1 = very soft) - `variation` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Per-cell random lightening/darkening of the cell fill color - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### HexGrid - **Properties**: - `colorA` (color) - Default: `#000000` Cell fill color - `colorB` (color) - Default: `#ffffff` Grid line color - `cells` (range,map) - Default: `8` - Range: min: 1, max: 40, step: 1 Number of hexagons across the shortest canvas edge - `thickness` (range,map) - Default: `1` - Range: min: 0, max: 10, step: 0.1 Thickness of the hex grid lines - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the grid in degrees - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Softness of the line edges (0 = crisp, 1 = very soft) - `variation` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Per-cell random lightening/darkening of the cell fill color - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### HTMLInCanvas ### ImageTexture - **Properties**: - `url` (image-upload) - Default: `https://shaders.com/sample.jpg` Upload an image or provide a URL - `objectFit` (select) - Default: `fill` How the image should be sized within the viewport ### IsometricCubes - **Properties**: - `colorA` (color) - Default: `#7c5cff` Base cube color - `colorB` (color) - Default: `#ff5c9d` Second cube color, mixed in per-cube for variation - `lineColor` (color) - Default: `#000000` Color of the cube edge lines - `cells` (range,map) - Default: `6` - Range: min: 1, max: 30, step: 1 Number of cubes across the shortest canvas edge - `thickness` (range,map) - Default: `1` - Range: min: 0, max: 10, step: 0.1 Thickness of the cube edge lines (0 = no edges) - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the tiling in degrees - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Softness of the edge lines (0 = crisp, 1 = very soft) - `colorVariation` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Per-cube random blend between the two colors (0 = uniform cubes, the clean 3D look) - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### LinearGradient - **Properties**: - `colorA` (color) - Default: `#1aff00` The starting color of the gradient - `colorB` (color) - Default: `#0000ff` The ending color of the gradient - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `start` (position) - Default: `{"x":0,"y":0.5}` The starting point of the gradient - `end` (position) - Default: `{"x":1,"y":0.5}` The ending point of the gradient - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Additional rotation angle of the gradient (in degrees) - `edges` (select) - Default: `stretch` How to handle areas beyond the gradient endpoints - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Marble - **Properties**: - `colorA` (color) - Default: `#ffffff` Base background color of the marble - `colorB` (color) - Default: `#3a2d54` Secondary marble tone - `colorC` (color) - Default: `#0f0f0f` Deepest marble color - `scale` (range,map) - Default: `2` - Range: min: 0.1, max: 10, step: 0.1 Scale and density of the marble vein pattern - `turbulence` (range,map) - Default: `10` - Range: min: 0, max: 50, step: 0.5 Amount of noise-driven distortion applied to the veins - `speed` (range) - Default: `0.05` - Range: min: 0, max: 0.25, step: 0.005 Animation speed - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### MultiPointGradient - **Properties**: - `colorA` (color) - Default: `#4776E6` Color of control point A - `positionA` (position) - Default: `{"x":0.2,"y":0.2}` Position of control point A - `colorB` (color) - Default: `#C44DFF` Color of control point B - `positionB` (position) - Default: `{"x":0.8,"y":0.2}` Position of control point B - `colorC` (color) - Default: `#1ABC9C` Color of control point C - `positionC` (position) - Default: `{"x":0.2,"y":0.8}` Position of control point C - `colorD` (color) - Default: `#F8BBD9` Color of control point D - `positionD` (position) - Default: `{"x":0.8,"y":0.8}` Position of control point D - `colorE` (color) - Default: `#FF8C42` Color of control point E - `positionE` (position) - Default: `{"x":0.5,"y":0.5}` Position of control point E - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `smoothness` (range,map) - Default: `2` - Range: min: 0, max: 5, step: 0.01 Controls how smoothly colors blend. ### PerlinNoise - **Properties**: - `colorA` (color) - Default: `#ffffff` First color - `colorB` (color) - Default: `#000000` Second color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `scale` (range) - Default: `2` - Range: min: -2, max: 5, step: 0.1 Pattern scale (higher = larger patterns) - `contrast` (range,map) - Default: `0` - Range: min: -1, max: 5, step: 0.1 Pattern contrast (higher = sharper transitions) - `balance` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.05 Balance between colors (negative = more colorB, positive = more colorA) - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `speed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Animation speed ### Plasma - **Properties**: - `density` (range,map) - Default: `2` - Range: min: 0, max: 4, step: 0.1 Density of the plasma pattern - `speed` (range) - Default: `2` - Range: min: 0, max: 5, step: 0.1 Animation speed - `intensity` (range,map) - Default: `1.5` - Range: min: 0.1, max: 3, step: 0.1 Brightness and spread of the plasma glow - `warp` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 How much the flow distorts and swirls - `contrast` (range,map) - Default: `1` - Range: min: 0, max: 3, step: 0.1 Push darks darker and lights lighter - `balance` (range,map) - Default: `50` - Range: min: 0, max: 100, step: 1 Skew color balance toward A (higher) or B (lower) - `colorA` (color) - Default: `#7018be` Primary color - `colorB` (color) - Default: `#000000` Secondary color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Prism - **Properties**: - `position` (position) - Default: `{"x":0.18,"y":0.18}` Where the beam originates - `beamWidth` (range,map) - Default: `0.04` - Range: min: 0.002, max: 0.3, step: 0.002 Thickness of the white beam - `intensity` (range,map) - Default: `1.6` - Range: min: 0, max: 4, step: 0.01 Brightness (above 1 blows the core to white) - `beamColor` (color) - Default: `#ffffff` Colour of the beam before it splits - `startFalloff` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 How softly the beam fades in at its source - `endFalloff` (range,map) - Default: `0.6` - Range: min: 0.02, max: 2, step: 0.01 How quickly the rainbow fades out with distance - `splitPosition` (position) - Default: `{"x":0.5,"y":0.42}` Where the beam starts to fan out and split (projected onto the beam axis) - `spread` (range,map) - Default: `0.7` - Range: min: 0, max: 3, step: 0.01 How widely the rainbow diffuses as it travels past the split point - `softness` (range,map) - Default: `0.12` - Range: min: 0.001, max: 1, step: 0.005 How quickly the white beam transitions into the rainbow - `saturation` (range,map) - Default: `0.95` - Range: min: 0, max: 1, step: 0.01 Rainbow saturation — 0 = white, 1 = full colour - `speed` (range) - Default: `0.1` - Range: min: -1, max: 1, step: 0.01 Speed the hue slowly rotates through the rainbow (0 = static) ### RadialGradient - **Properties**: - `colorA` (color) - Default: `#ff0000` The starting color at the center of the gradient - `colorB` (color) - Default: `#0000ff` The ending color at the edge of the gradient - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the radial gradient - `radius` (range,map) - Default: `1` - Range: min: 0, max: 2, step: 0.1 The radius of the gradient (normalized, 0.0-1.0) - `repeat` (range,map) - Default: `1` - Range: min: 1, max: 20, step: 0.5 Number of times the gradient repeats. Values above 1 create concentric rings. - `aspect` (range,map) - Default: `1` - Range: min: 0.1, max: 4, step: 0.01 Stretches the gradient into an ellipse. Values below 1 compress vertically, above 1 compress horizontally. - `skewAngle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotates the ellipse axis in degrees. Only visible when Aspect is not 1. - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Ripples - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point where ripples emanate from - `colorA` (color) - Default: `#ffffff` Color of the ripple waves - `colorB` (color) - Default: `#000000` Background color between ripples - `speed` (range) - Default: `1` - Range: min: -5, max: 5, step: 0.1 Speed of ripple animation - `frequency` (range,map) - Default: `20` - Range: min: 1, max: 80, step: 0.1 Number of ripples/spacing between them - `softness` (range,map) - Default: `0` - Range: min: 0, max: 3, step: 0.1 Softness of ripple edges - `thickness` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 Thickness of each ripple band - `phase` (range,map) - Default: `0` - Range: min: 0, max: 6.28, step: 0.1 Phase offset for ripple animation ### Scratches - **Properties**: - `colorA` (color) - Default: `#ffffff` First color - `colorB` (color) - Default: `#000000` Second color - `scale` (range) - Default: `2` - Range: min: -2, max: 5, step: 0.1 Pattern scale (higher = more, finer scratches) - `thickness` (range) - Default: `1` - Range: min: 0.2, max: 5, step: 0.01 Thickness of the scratches (higher = bolder streaks) - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `speed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Animation speed ### SimplexNoise - **Properties**: - `colorA` (color) - Default: `#ffffff` First color - `colorB` (color) - Default: `#000000` Second color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `scale` (range) - Default: `2` - Range: min: -2, max: 5, step: 0.1 Pattern scale (higher = larger patterns) - `balance` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.1 Balance between colors (negative = more colorB, positive = more colorA) - `contrast` (range,map) - Default: `0` - Range: min: -2, max: 5, step: 0.1 Pattern contrast (higher = sharper transitions) - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `speed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Animation speed ### SineWave - **Properties**: - `color` (color) - Default: `#ffffff` The color of the sine wave - `amplitude` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.1 The height/amplitude of the sine wave - `frequency` (range,map) - Default: `1` - Range: min: 0.1, max: 20, step: 0.1 The frequency/number of wave cycles - `speed` (range) - Default: `1` - Range: min: -5, max: 5, step: 0.1 The animation speed of the wave - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 The rotation angle of the wave (in degrees) - `position` (position) - Default: `{"x":0.5,"y":0.5}` The center position of the wave - `thickness` (range,map) - Default: `0.2` - Range: min: 0, max: 2, step: 0.1 The thickness of the wave line - `softness` (range,map) - Default: `0.4` - Range: min: 0, max: 1, step: 0.1 Edge softness of the wave line ### SolidColor - **Properties**: - `color` (color) - Default: `#5b18ca` The solid color to display ### Spiral - **Properties**: - `colorA` (color) - Default: `#000000` Background color - `colorB` (color) - Default: `#ffffff` Spiral stroke color - `strokeWidth` (range,map) - Default: `0.5` - Range: min: 0, max: 2, step: 0.1 Thickness of spiral stroke - `strokeFalloff` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.1 Stroke losing width further from center - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.1 Color transition sharpness (0 = hard edge, 1 = smooth fade) - `speed` (range) - Default: `1` - Range: min: -3, max: 3, step: 0.1 Animation speed (negative values reverse direction) - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the spiral - `scale` (range,map) - Default: `1` - Range: min: 0.1, max: 5, step: 0.1 Scale factor for spiral bands (higher = more bands, lower = fewer bands) - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Strands - **Requires Child**: No (this is generative) - **Properties**: - `speed` (range) - Default: `0.5` - Range: min: 0, max: 2, step: 0.1 Overall animation speed - `amplitude` (range,map) - Default: `2` - Range: min: 0, max: 5, step: 0.1 How far the strands wave away from their resting line - `frequency` (range,map) - Default: `0.3` - Range: min: 0, max: 5, step: 0.1 How many waves run along each strand - `lineCount` (range) - Default: `8` - Range: min: 1, max: 16, step: 1 Number of strands - `lineWidth` (range,map) - Default: `0.05` - Range: min: 0, max: 1, step: 0.05 Thickness of each strand’s solid core - `softness` (range,map) - Default: `0.05` - Range: min: 0, max: 1, step: 0.05 Softness of each strand’s edge (0 is crisp, higher is feathered) - `spread` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.05 How far the strands fan out across the field - `pinEdges` (checkbox) - Default: `false` Pin the strands so they converge to the start and end points - `stops` (gradient-stops) - Default: `[{"color":"#00e5ff","position":0},{"color":"#5b8cff","position":0.34},{"color":"#b06bff","position":0.67},{"color":"#ff5fa2","position":1}]` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `oklab` Color space used to blend the gradient - `colorScale` (range,map) - Default: `1` - Range: min: 1, max: 6, step: 1 How many times the gradient repeats along the strands - `colorVariance` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.05 At 0 every strand shares the same color; at 1 the strands spread across the full gradient - `colorSpeed` (range) - Default: `1` - Range: min: 0, max: 2, step: 0.05 Speed at which the colors flow along the strands (loops) - `start` (position) - Default: `{"x":0,"y":0.5}` Starting point of the strands - `end` (position) - Default: `{"x":1,"y":0.5}` Ending point of the strands ### Stripes - **Properties**: - `colorA` (color) - Default: `#000000` First stripe color - `colorB` (color) - Default: `#ffffff` Second stripe color - `angle` (range,map) - Default: `45` - Range: min: -180, max: 180, step: 1 Angle of stripes in degrees - `density` (range,map) - Default: `5` - Range: min: 1, max: 30, step: 1 Number of stripe pairs visible - `balance` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 Ratio of the two colors - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.1 Edge softness - `speed` (range) - Default: `0.2` - Range: min: -1, max: 1, step: 0.1 Animation speed - `offset` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.1 Phase offset for pattern positioning - `colorSpace` (select) - Default: `linear` Color space for interpolation ### StudioBackground - **Properties**: - `color` (color) - Default: `#d8dbec` Base studio surface color - `keyColor` (color) - Default: `#d5e4ea` Color of the overhead key light - `keyIntensity` (range,map) - Default: `40` - Range: min: 0, max: 100, step: 1 Intensity of the key light - `keySoftness` (range,map) - Default: `50` - Range: min: 0, max: 100, step: 1 How diffuse the key light is - `fillColor` (color) - Default: `#d5e4ea` Color of the side fill lights - `fillIntensity` (range,map) - Default: `10` - Range: min: 0, max: 100, step: 1 Intensity of the fill lights - `fillSoftness` (range,map) - Default: `70` - Range: min: 0, max: 100, step: 1 How diffuse the fill lights are - `fillAngle` (range,map) - Default: `70` - Range: min: 0, max: 100, step: 1 How far apart the fill lights are from center - `backColor` (color) - Default: `#c8d4e8` Color of the upward back wash - `backIntensity` (range,map) - Default: `20` - Range: min: 0, max: 100, step: 1 Intensity of the back wash - `backSoftness` (range,map) - Default: `80` - Range: min: 0, max: 100, step: 1 How diffuse the back wash is - `brightness` (range,map) - Default: `20` - Range: min: 0, max: 100, step: 1 Overall ambient light level - `vignette` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Edge darkening - `center` (position) - Default: `{"x":0.5,"y":0.8}` Where the spotlight meets the floor - `lightTarget` (range,map) - Default: `100` - Range: min: 0, max: 100, step: 1 How far toward the floor vs wall the spotlights aim - `wallCurvature` (range,map) - Default: `10` - Range: min: 0, max: 100, step: 1 How rounded the cove is - `ambientIntensity` (range,map) - Default: `50` - Range: min: 0, max: 100, step: 1 Intensity of drifting ambient lights - `ambientSpeed` (range) - Default: `2` - Range: min: -5, max: 5, step: 0.1 Drift speed - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Seed for ambient pattern ### SunBurst - **Properties**: - `color` (color) - Default: `#ffdd88` Ray color - `background` (color) - Default: `#000000` Background color - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center point of the sunburst - `rayCount` (range) - Default: `12` - Range: min: 3, max: 64, step: 1 Number of rays - `softness` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Softness of ray edges - `radius` (range,map) - Default: `0.8` - Range: min: 0, max: 1.2, step: 0.01 How far the rays extend from the center - `feather` (range,map) - Default: `0.5` - Range: min: 0, max: 5, step: 0.01 How gradually the rays fade at their outer edge - `speed` (range) - Default: `0.2` - Range: min: -2, max: 2, step: 0.1 Rotation speed — positive values rotate clockwise ### Swirl - **Properties**: - `colorA` (color) - Default: `#1275d8` Primary gradient color - `colorB` (color) - Default: `#e19136` Secondary gradient color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `speed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Flow animation speed - `detail` (range,map) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Level of detail and intricacy in the swirl patterns - `blend` (range,map) - Default: `50` - Range: min: 0, max: 100, step: 1 Skew color balance toward A (lower values) or B (higher values) - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Text - **Properties**: - `text` (text) - Default: `Hello World` The text to display (single line) - `fontFamily` (font-family) - Default: `Inter` Google Fonts family name - `fontWeight` (font-weight) - Default: `400` Font weight (only weights published for the family render true; others are synthesized) - `italic` (checkbox) - Default: `false` Italic style - `textTransform` (select) - Default: `none` Case transformation applied to the text - `fontSize` (range) - Default: `0.07` - Range: min: 0.01, max: 0.5, step: 0.005 Font size as a fraction of canvas height - `letterSpacing` (range) - Default: `0` - Range: min: -0.1, max: 0.5, step: 0.005 Letter spacing in em units - `lineHeight` (range) - Default: `1.2` - Range: min: 0.8, max: 2.5, step: 0.05 Line height as a multiple of font size (multi-line text) - `textAlign` (select) - Default: `center` Horizontal alignment of lines within the text block - `width` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.005 Wrap width — text wraps to fit; 0 = auto (hug contents, single line per explicit break). Edited via the Typography panel's Auto/Fixed width toggle and the side drag handles, not a slider. - `color` (color) - Default: `#ffffff` Text color - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the text relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the text - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation in degrees ### TriangularGrid - **Properties**: - `colorA` (color) - Default: `#1a1a1a` Triangle fill color - `colorB` (color) - Default: `#ffffff` Grid line color - `cells` (range,map) - Default: `8` - Range: min: 1, max: 40, step: 1 Number of triangle rows down the shortest canvas edge - `thickness` (range,map) - Default: `1` - Range: min: 0, max: 10, step: 0.1 Thickness of the grid lines (0 = no lines) - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the grid in degrees - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Softness of the line edges (0 = crisp, 1 = very soft) - `variation` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Per-triangle random lightening/darkening of the fill color - `speed` (range) - Default: `0` - Range: min: -3, max: 3, step: 0.01 Animates the triangle rows drifting horizontally (0 = static) - `speedVariance` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Per-row random speed variance for irregular drifting motion - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Truchet - **Properties**: - `colorA` (color) - Default: `#000000` Background color between the arcs - `colorB` (color) - Default: `#ffffff` Arc line color - `cells` (range,map) - Default: `10` - Range: min: 2, max: 40, step: 1 Number of tiles across the shortest canvas edge - `thickness` (range,map) - Default: `2` - Range: min: 0, max: 20, step: 0.1 Thickness of the arc lines - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the tiling in degrees - `softness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Softness of the arc edges (0 = crisp, 1 = very soft) - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed — changes which tiles flip, producing a different maze pattern - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### VideoTexture - **Properties**: - `url` (video-upload) - Default: `https://shaders.com/sample.mp4` Upload a video or provide a URL - `objectFit` (select) - Default: `fill` How the video should be sized within the viewport - `loop` (checkbox) - Default: `true` Loop the video playback ### Voronoi - **Properties**: - `colorA` (color) - Default: `#3186cf` Color near each cell's center point - `colorB` (color) - Default: `#fc02dd` Color at cell boundaries, far from any center point - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorBorder` (color) - Default: `#000000` Color of the cell boundary lines - `scale` (range,map) - Default: `6` - Range: min: 1, max: 20, step: 0.5 Number of cells across the canvas - `speed` (range) - Default: `0.5` - Range: min: 0, max: 5, step: 0.1 Animation speed — how fast the cell points drift - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed — shifts the cell pattern without changing the overall structure - `edgeIntensity` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Controls how much of the cell interior is filled by the edge color. Low = center color dominates with a sharp boundary. High = edge color spreads further into the cell. - `edgeSoftness` (range,map) - Default: `0.05` - Range: min: 0, max: 0.4, step: 0.005 Width of the cell boundary lines. - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### WaveletNoise - **Properties**: - `colorA` (color) - Default: `#ffffff` First color - `colorB` (color) - Default: `#000000` Second color - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `scale` (range) - Default: `1.5` - Range: min: -2, max: 5, step: 0.1 Pattern scale (higher = larger patterns) - `detail` (range) - Default: `1.24` - Range: min: 1.05, max: 2, step: 0.01 Per-octave frequency ratio — higher adds finer wavelet detail - `contrast` (range,map) - Default: `0` - Range: min: -1, max: 5, step: 0.1 Pattern contrast (higher = sharper transitions) - `balance` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.05 Balance between colors (negative = more colorB, positive = more colorA) - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `speed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Animation speed ### Weave - **Properties**: - `colorA` (color) - Default: `#c4c4c4` Horizontal thread color - `colorB` (color) - Default: `#4d4d4d` Vertical thread color - `cells` (range,map) - Default: `10` - Range: min: 2, max: 40, step: 1 Number of threads across the shortest canvas edge - `gap` (range,map) - Default: `0.25` - Range: min: 0, max: 0.45, step: 0.01 Gap between threads (0 = no gap, 0.5 = maximum gap) - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the weave pattern in degrees ### WebcamTexture - **Properties**: - `objectFit` (select) - Default: `cover` How the webcam feed should be sized within the viewport - `mirror` (checkbox) - Default: `true` Mirror the webcam feed horizontally (selfie mode) ### WorleyNoise - **Properties**: - `colorA` (color) - Default: `#ffffff` Color where the noise field is low (typically near cell centers) - `colorB` (color) - Default: `#000000` Color where the noise field is high (typically near cell boundaries) - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `scale` (range,map) - Default: `6` - Range: min: 1, max: 30, step: 0.5 Number of cells across the canvas at the base octave - `mode` (select) - Default: `f1` Field type. F1 = distance to nearest point. F2 = distance to second-nearest. F2 − F1 emphasises cell boundaries. - `distance` (select) - Default: `euclidean` Distance metric. Euclidean = round cells. Manhattan = diamond. Chebyshev = square. - `octaves` (range) - Default: `1` - Range: min: 1, max: 4, step: 1 Number of fractal layers stacked at progressively finer scales - `lacunarity` (range,map) - Default: `2` - Range: min: 1.5, max: 4, step: 0.1 Scale multiplier between octaves (only active when Octaves > 1) - `persistence` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Amplitude multiplier between octaves (only active when Octaves > 1) - `jitter` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 How much each cell's point drifts inside its cell. 0 = rigid grid (banded look), 1 = fully random. - `contrast` (range,map) - Default: `1` - Range: min: 0.25, max: 4, step: 0.01 Steepness of the gradient between low and high regions - `balance` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Shifts the gradient midpoint. Negative pulls the field toward Color A, positive toward Color B. - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed — shifts the cell pattern without changing its overall structure - `speed` (range) - Default: `0.5` - Range: min: 0, max: 5, step: 0.1 Animation speed — how fast each cell's point drifts ## Category: Transitions Components in this category: 13 ### BarnDoors - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the doors have opened (0 = fully visible, 1 = fully wiped away) - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction the doors open in degrees (0 = apart horizontally) - `feather` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Softness of the wipe edges - `invert` (checkbox) - Default: `false` Close in from both edges instead of opening from the center ### BlockDissolve - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the dissolve has progressed (0 = fully visible, 1 = fully wiped away) - `blockSize` (range,map) - Default: `0.08` - Range: min: 0.01, max: 0.5, step: 0.01 Size of each block as a fraction of the frame width - `softness` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 How softly each block fades out (0 = hard-edged blocks) - `invert` (checkbox) - Default: `false` Reverse the order blocks dissolve in ### CheckerWipe - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the wipe has progressed (0 = fully visible, 1 = fully wiped away) - `blockSize` (range,map) - Default: `0.1` - Range: min: 0.02, max: 0.5, step: 0.01 Size of each square as a fraction of the frame width - `softness` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 How softly each square fades out (0 = hard-edged squares) - `invert` (checkbox) - Default: `false` Reverse the order the squares wipe in ### DiamondWipe - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the diamonds have grown (0 = fully visible, 1 = fully wiped away) - `size` (range,map) - Default: `0.15` - Range: min: 0.02, max: 0.5, step: 0.01 Size of each diamond cell as a fraction of the frame width - `feather` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Softness of each diamond edge - `invert` (checkbox) - Default: `false` Wipe from the cell corners inward instead ### IrisWipe - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the iris has expanded (0 = fully visible, 1 = fully wiped away) - `center` (position) - Default: `{"x":0.5,"y":0.5}` Point the iris expands from - `feather` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Softness of the iris edge - `invert` (checkbox) - Default: `false` Wipe from the outside inward instead ### LinearWipe - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the wipe has travelled (0 = fully visible, 1 = fully wiped away) - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction of the wipe in degrees (0 = left to right) - `feather` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Softness of the wipe edge - `invert` (checkbox) - Default: `false` Reverse the direction the wipe travels ### NoiseDissolve - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the dissolve has progressed (0 = fully visible, 1 = fully wiped away) - `scale` (range,map) - Default: `3` - Range: min: 0.5, max: 20, step: 0.1 Frequency of the dissolve pattern (higher = smaller blobs) - `softness` (range,map) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 How softly the erosion edge fades out (0 = hard-edged blobs) - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for pattern variation - `invert` (checkbox) - Default: `false` Reverse the order the pattern dissolves in ### PagePeel - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `corner` (select) - Default: `bottom-right` Which corner the page peels from - `amount` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 How far the peel has progressed across the page (0 = flat, 1 = fully peeled) - `radius` (range,map) - Default: `0.2` - Range: min: 0.02, max: 0.4, step: 0.01 Tightness of the curl (fraction of the page diagonal) - `shading` (range,map) - Default: `0.55` - Range: min: 0, max: 1, step: 0.01 How much the underside of the curl is shaded for depth - `highlight` (range,map) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Strength of the specular sheen running along the curl - `highlightSoftness` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 Width of the specular highlight band (low = tight gloss, high = broad satin) - `shadow` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Strength of the contact shadow the curl casts on the page ### RadialWipe - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the sweep has travelled (0 = fully visible, 1 = fully wiped away) - `startAngle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Angle in degrees where the sweep begins - `direction` (select) - Default: `cw` Which way the sweep rotates - `center` (position) - Default: `{"x":0.5,"y":0.5}` Point the sweep rotates around - `feather` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Softness of the sweeping edge - `invert` (checkbox) - Default: `false` Reverse which side of the sweep is wiped ### RandomBars - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the wipe has progressed (0 = fully visible, 1 = fully wiped away) - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Orientation of the bars in degrees (0 = vertical bars) - `barCount` (range,map) - Default: `12` - Range: min: 2, max: 100, step: 1 Number of bars across the frame - `softness` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 How softly each bar fades out (0 = hard-edged bars) - `invert` (checkbox) - Default: `false` Reverse the order the bars vanish in ### RippleWipe - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the ripple has expanded (0 = fully visible, 1 = fully wiped away) - `center` (position) - Default: `{"x":0.5,"y":0.5}` Point the rings expand from - `rings` (range,map) - Default: `8` - Range: min: 2, max: 40, step: 1 Number of concentric rings - `feather` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 How softly adjacent rings' timing overlaps (0 = discrete ring pops) - `invert` (checkbox) - Default: `false` Wipe from the outside inward instead ### SliceWipe - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the strips have slid (0 = fully visible, 1 = fully wiped away) - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Orientation of the strips in degrees (0 = vertical strips sliding up and down) - `sliceCount` (range,map) - Default: `8` - Range: min: 2, max: 60, step: 1 Number of strips across the frame ### VenetianBlinds - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `progress` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How far the blinds have closed (0 = fully visible, 1 = fully wiped away) - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Orientation of the strips in degrees - `stripCount` (range,map) - Default: `5` - Range: min: 2, max: 60, step: 1 Number of strips across the frame - `feather` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Softness of each closing strip edge - `invert` (checkbox) - Default: `false` Close each strip from the opposite edge ## Category: Distortions Components in this category: 22 ### BarShift - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `count` (range,map) - Default: `6` - Range: min: 1, max: 30, step: 1 Number of bars across the longest viewport dimension - `angle` (range,map) - Default: `0` - Range: min: -180, max: 180, step: 1 Angle of bar orientation in degrees (0 = vertical bars, 90 = horizontal bars) - `intensity` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Maximum displacement per bar - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Randomization seed for per-bar offset variation - `speed` (range) - Default: `0` - Range: min: -2, max: 2, step: 0.1 Animation speed — each bar drifts at its own rate and direction - `edges` (select) - Default: `mirror` How to handle edges when distortion pushes content out of bounds ### Bend - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `strength` (range,map) - Default: `0.5` - Range: min: -1, max: 1, step: 0.01 How hard the ends bend — positive curls them toward you (edges magnify), negative curls them away (edges recede into the frame) - `falloff` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Concentrates the bend toward the ends — 0 curves the whole frame, higher keeps the middle flat and bends only near the edges - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction of the bend axis in degrees — 0 bends the left/right ends, 90 bends the top/bottom - `edges` (select) - Default: `transparent` How to handle edges when the bend pulls content away from the frame border ### Bulge - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the bulge effect - `strength` (range,map) - Default: `1` - Range: min: -1, max: 1, step: 0.01 The intensity of the bulge effect (positive = bulge out, negative = pinch in) - `radius` (range,map) - Default: `1` - Range: min: 0, max: 5, step: 0.1 The radius of the bulge effect area - `falloff` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Controls the smoothness of the transition (0 = hard edge, 1 = very smooth) - `edges` (select) - Default: `stretch` How to handle edges when distortion pushes content out of bounds ### ConcentricSpin - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `20` - Range: min: 0, max: 100, step: 1 Maximum rotation angle per ring - `rings` (range,map) - Default: `8` - Range: min: 1, max: 30, step: 1 Number of concentric rings - `smoothness` (range,map) - Default: `0.03` - Range: min: 0, max: 1, step: 0.01 Softness of transitions between rings - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Randomization seed for per-ring rotation variation - `speed` (range) - Default: `0.1` - Range: min: -5, max: 5, step: 0.1 Speed of continuous ring rotation - `speedRandomness` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How much each ring varies in rotation speed and direction - `edges` (select) - Default: `mirror` How to handle edges when distortion pushes content out of bounds - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center point of the concentric rings ### CornerPin - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `topLeft` (position) - Default: `{"x":0,"y":0}` Position of the top-left corner - `topRight` (position) - Default: `{"x":1,"y":0}` Position of the top-right corner - `bottomLeft` (position) - Default: `{"x":0,"y":1}` Position of the bottom-left corner - `bottomRight` (position) - Default: `{"x":1,"y":1}` Position of the bottom-right corner - `amount` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Blends the warp in and out — 0 returns the content to its original rectangle, 1 fully pins the corners - `edges` (select) - Default: `transparent` How to handle areas outside the pinned quad ### DisplacementMap - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `source` (layer) - Default: `` The layer whose pixels drive the displacement — its red/green (or luminance) push the content around - `amount` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Overall displacement strength - `channelMode` (select) - Default: `twoAxis` How the source drives the push — red→X / green→Y, or luminance along a fixed angle - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Push direction in degrees (used by the Luminance channel mode) - `edges` (select) - Default: `mirror` How to handle edges when distortion pushes content out of bounds ### Flip - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `flipX` (checkbox) - Default: `false` Mirror the content horizontally (left ↔ right) - `flipY` (checkbox) - Default: `false` Mirror the content vertically (top ↔ bottom) ### FlowField - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `strength` (range,map) - Default: `0.15` - Range: min: 0, max: 0.5, step: 0.01 Intensity of the flow distortion - `detail` (range,map) - Default: `2` - Range: min: 0.5, max: 5, step: 0.1 Scale of the flow patterns - `speed` (range) - Default: `0` - Range: min: 0, max: 20, step: 0.1 Speed of the flow - `evolutionSpeed` (range) - Default: `0` - Range: min: 0, max: 20, step: 0.1 How fast the flow field pattern reshapes over time - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for flow pattern variation - `edges` (select) - Default: `mirror` How to handle edges when distortion pushes content out of bounds ### FlutedGlass - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `shape` (select) - Default: `bars` Cross-section shape of each flute - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction of the flutes in degrees (0 = vertical bars) - `frequency` (range,map) - Default: `10` - Range: min: 1, max: 20, step: 1 Number of flutes across the longest viewport axis - `softness` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How smoothly distortion fades from each flute centre to its edge (0 = flat middle / sharp seams, 1 = gentle curve) - `waveAmplitude` (range,map) - Default: `0.06` - Range: min: 0, max: 0.5, step: 0.01 How far each flute sways horizontally as it travels (Waves shape only) - `waveFrequency` (range,map) - Default: `1.5` - Range: min: 0.1, max: 10, step: 0.1 How many sways fit along each flute (Waves shape only) - `speed` (range) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Animation speed — drifts the flute pattern over time and flows wave perturbations - `refraction` (range,map) - Default: `1.5` - Range: min: 0, max: 4, step: 0.01 How aggressively each flute bends content beneath it - `aberration` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 Chromatic aberration — splits RGB along the refraction direction at flute seams - `lightAngle` (range) - Default: `30` - Range: min: -90, max: 90, step: 1 Direction the light source is coming from (0 = head-on, 90 = grazing) - `highlight` (range,map) - Default: `0.2` - Range: min: 0, max: 2, step: 0.01 Strength of the specular reflection on each flute - `highlightSoftness` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Spread of the specular peak (0 = pin-tight, 1 = broad sheen) - `highlightColor` (color) - Default: `#ffffff` Color of the specular highlight - `edges` (select) - Default: `mirror` How to handle edges when distortion samples beyond the canvas ### Form3D - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `shape3d` (shape3d) - Default: `{"type":"ribbon","angle":0,"twist":50,"width":40,"thickness":20,"seed":0}` 3D shape and its parameters - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the shape on screen - `zoom` (range,map) - Default: `50` - Range: min: 10, max: 200, step: 1 Camera zoom level - `glossiness` (range,map) - Default: `50` - Range: min: 0, max: 200, step: 1 Specular highlight intensity and sharpness - `lighting` (range,map) - Default: `50` - Range: min: 0, max: 200, step: 1 Overall intensity of lighting effects - `uvMode` (select) - Default: `stretch` How to handle UV coordinates at shape boundaries - `speed` (range) - Default: `1` - Range: min: -10, max: 10, step: 0.1 Animation speed — scales all spin rates ### GlassTiles - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `2` - Range: min: 0, max: 10, step: 0.1 The intensity of the glass tiles effect - `tileCount` (range,map) - Default: `20` - Range: min: 5, max: 50, step: 1 Number of tiles across the longest dimension - `rotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation angle of the tile grid in degrees - `roundness` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.1 Makes tiles more circular instead of square ### Kaleidoscope - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the kaleidoscope effect - `segments` (range,map) - Default: `6` - Range: min: 2, max: 24, step: 1 Number of radial segments in the kaleidoscope - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation offset for the entire kaleidoscope pattern - `edges` (select) - Default: `mirror` How to handle edges when distortion pushes content out of bounds ### Mirror - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` The point the mirror line passes through - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 The angle of the mirror line in degrees - `edges` (select) - Default: `mirror` How to handle edges when distortion pushes content out of bounds ### Perspective - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center point of rotation - `pan` (range,map) - Default: `0` - Range: min: -90, max: 90, step: 0.1 Horizontal rotation (left/right) - `tilt` (range,map) - Default: `0` - Range: min: -90, max: 90, step: 0.1 Vertical rotation (up/down) - `fov` (range,map) - Default: `60` - Range: min: 30, max: 120, step: 1 Field of view - controls perspective intensity - `zoom` (range,map) - Default: `1` - Range: min: 0.5, max: 3, step: 0.1 Zoom in to fill the frame after rotation - `offset` (position) - Default: `{"x":0.5,"y":0.5}` Shift the result in X/Y - `edges` (select) - Default: `transparent` How to handle edges ### PolarCoordinates - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point for polar coordinate conversion - `wrap` (range,map) - Default: `1` - Range: min: 0, max: 2, step: 0.1 Controls how much of the angular range to use (1 = full 360°, 0.5 = 180°) - `radius` (range,map) - Default: `1` - Range: min: 0, max: 2, step: 0.1 Controls how much of the radius range to use (affects the radial mapping) - `intensity` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.1 Blends between original UVs (0) and polar coordinates (1) - `edges` (select) - Default: `transparent` How to handle edges when distortion pushes content out of bounds ### RectangularCoordinates - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point for rectangular coordinate conversion - `scale` (range,map) - Default: `1` - Range: min: 0.1, max: 3, step: 0.1 Scale factor for the rectangular output - `intensity` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.1 Blends between original UVs (0) and rectangular coordinates (1) - `edges` (select) - Default: `transparent` How to handle edges when distortion pushes content out of bounds ### Repeater - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `mode` (select) - Default: `grid` Layout used to place the repeated instances - `cropLeft` (range,map) - Default: `0` - Range: min: 0, max: 0.49, step: 0.005 Crop inset from the left edge of the source element (fraction of its width) - `cropRight` (range,map) - Default: `0` - Range: min: 0, max: 0.49, step: 0.005 Crop inset from the right edge of the source element (fraction of its width) - `cropTop` (range,map) - Default: `0` - Range: min: 0, max: 0.49, step: 0.005 Crop inset from the top edge of the source element (fraction of its height) - `cropBottom` (range,map) - Default: `0` - Range: min: 0, max: 0.49, step: 0.005 Crop inset from the bottom edge of the source element (fraction of its height) - `columns` (range,map) - Default: `3` - Range: min: 1, max: 12, step: 1 Number of grid columns - `rows` (range,map) - Default: `3` - Range: min: 1, max: 12, step: 1 Number of grid rows - `gapX` (range,map) - Default: `0.05` - Range: min: 0, max: 0.5, step: 0.005 Horizontal gap between grid cells - `gapY` (range,map) - Default: `0.05` - Range: min: 0, max: 0.5, step: 0.005 Vertical gap between grid cells - `stagger` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Horizontal offset applied to every other row (brick layout) - `flip` (select) - Default: `none` Mirror alternating columns/rows for seamless tiling patterns - `count` (range,map) - Default: `8` - Range: min: 1, max: 64, step: 1 Number of repeated instances - `radius` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.005 Orbit radius of the radial layout - `startAngle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Angle of the first instance on the orbit - `sweep` (range,map) - Default: `360` - Range: min: 0, max: 360, step: 1 Angular span the instances are distributed across - `faceCenter` (checkbox) - Default: `false` Rotate each instance to face the orbit center - `direction` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction of the linear layout in degrees (0 = rightward) - `spacing` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.005 Distance between consecutive instances - `instanceScale` (range,map) - Default: `1` - Range: min: 0.5, max: 2, step: 0.005 Progressive scale multiplier applied per instance (compounds with each copy) - `instanceRotation` (range,map) - Default: `0` - Range: min: -180, max: 180, step: 1 Additional rotation in degrees applied per instance (accumulates with each copy) - `instanceOpacity` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.005 Progressive opacity falloff applied per instance (compounds with each copy) - `hueShift` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Hue rotation in degrees added per instance - `phase` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.001 Seamless layout animation phase (0-1 wraps to the identical layout) - `zOrder` (select) - Default: `forward` Stacking order of overlapping instances - `jitterPosition` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.005 Random per-instance position offset - `jitterRotation` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.005 Random per-instance rotation - `jitterScale` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.005 Random per-instance scale variation - `jitterOpacity` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.005 Random per-instance opacity variation - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed for the jitter values ### Spherize - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `radius` (range,map) - Default: `1` - Range: min: 0.1, max: 3, step: 0.1 Radius of the sphere (1 = half viewport height) - `depth` (range,map) - Default: `1` - Range: min: 0, max: 3, step: 0.1 How much the sphere bulges toward viewer (0 = flat, higher = more bulge) - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the sphere - `lightPosition` (position) - Default: `{"x":0.3,"y":0.3}` Position of the specular light source - `lightIntensity` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 Intensity of the rim light (0 = off) - `lightSoftness` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 Softness of the rim light falloff (0 = hard edge, 1 = soft glow) - `lightColor` (color) - Default: `#ffffff` Color of the specular highlight ### Stretch - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the stretch effect - `strength` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 The intensity of the stretch effect - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 The direction of the stretch in degrees - `falloff` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Controls the sharpness of the transition (0 = sharp edge, 1 = gradual transition) - `edges` (select) - Default: `stretch` How to handle edges when distortion pushes content out of bounds ### Surface3D - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `amplitude` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Wave height - `waveType` (select) - Default: `fractal` Wave pattern type - `frequency` (range) - Default: `1.5` - Range: min: 0.1, max: 5, step: 0.1 Wave frequency - `octaves` (range) - Default: `2` - Range: min: 1, max: 5, step: 1 Detail octaves - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed offset - `speed` (range) - Default: `0.5` - Range: min: 0, max: 3, step: 0.1 Animation speed - `tilt` (range) - Default: `35` - Range: min: 0, max: 85, step: 1 Camera tilt in degrees - `roll` (range) - Default: `0` - Range: min: -45, max: 45, step: 1 Camera roll in degrees - `height` (range) - Default: `0` - Range: min: -1, max: 2, step: 0.01 Camera height - `zoom` (range) - Default: `1` - Range: min: 0.3, max: 3, step: 0.01 Camera zoom - `nearCutoff` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Near fade distance - `farCutoff` (range) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Far fade distance - `edgePinning` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Smoothly flatten the surface at its edges (orthogonal to edge mode) - `edges` (select) - Default: `mirror` How to handle content beyond the surface bounds - `lighting` (range) - Default: `30` - Range: min: 0, max: 100, step: 1 Intensity of lighting and shading - `glossiness` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Surface glossiness - `highlights` (range) - Default: `15` - Range: min: 0, max: 100, step: 1 Specular highlight intensity - `lightX` (range) - Default: `0.4` - Range: min: -1, max: 1, step: 0.01 Light direction X - `lightY` (range) - Default: `-0.6` - Range: min: -1, max: 1, step: 0.01 Light direction Y - `lightZ` (range) - Default: `0.7` - Range: min: -1, max: 1, step: 0.01 Light direction Z - `lightColor` (color) - Default: `#ffffff` Light color - `cursorIntensity` (range) - Default: `1` - Range: min: 0, max: 2, step: 0.01 Strength of cursor ripples - `cursorSpeed` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Speed of cursor ripple propagation ### Twirl - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `center` (position) - Default: `{"x":0.5,"y":0.5}` The center point of the twirl effect - `intensity` (range,map) - Default: `1` - Range: min: -5, max: 5, step: 0.1 The strength of the twirl effect - `edges` (select) - Default: `stretch` How to handle edges when distortion pushes content out of bounds ### WaveDistortion - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `strength` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Distortion intensity - `frequency` (range,map) - Default: `1` - Range: min: 0.1, max: 10, step: 0.1 Number of bends/waves - `speed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Animation speed - `angle` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction of wave distortion in degrees - `waveType` (select) - Default: `sine` Shape of the distortion wave - `edges` (select) - Default: `stretch` How to handle edges when distortion pushes content out of bounds ## Category: Interactive Components in this category: 16 ### Boids - **Requires Child**: No (this is generative) - **Properties**: - `colorA` (color) - Default: `#8ec5ff` Color of agents cruising calmly with the flock - `colorB` (color) - Default: `#ff7ad9` Color agents flash toward when agitated — scattering from the predator cursor or banking through a hard turn - `colorSpace` (select) - Default: `oklab` Color space for the rest→excited color ramp - `agentShape` (select) - Default: `arrow` What each agent is drawn as — a hard-edged arrow, streak or square pointing along its heading, a plain dot, or a soft glowing comet - `count` (range) - Default: `2000` - Range: min: 100, max: 4000, step: 100 Number of flocking agents - `speed` (range) - Default: `2` - Range: min: 0.2, max: 5, step: 0.1 Overall cruising speed of the flock - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Re-rolls the flock's starting formation — each value spawns the murmuration in a different arrangement - `size` (range) - Default: `1.5` - Range: min: 0.5, max: 3, step: 0.05 Size of each agent - `trails` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 How long each agent's motion trail persists — 0 draws crisp agents, 1 leaves long ribbons - `separation` (range) - Default: `1.7` - Range: min: 0, max: 3, step: 0.01 How strongly agents steer away from crowding their neighbours - `alignment` (range) - Default: `1.5` - Range: min: 0, max: 3, step: 0.01 How strongly agents match their neighbours' heading — the driver of coherent murmuration ribbons - `cohesion` (range) - Default: `1` - Range: min: 0, max: 3, step: 0.01 How strongly agents steer toward the local center of the flock - `perception` (range) - Default: `0.12` - Range: min: 0.05, max: 0.35, step: 0.01 How far each agent can sense its neighbours (in screen heights) — larger sees bigger, smoother flocks - `cursorMode` (select) - Default: `repel` How the flock reacts to the cursor - `cursorStrength` (range) - Default: `1.5` - Range: min: 0, max: 3, step: 0.01 Strength of the cursor's pull or push on the flock ### ChromaFlow - **Properties**: - `baseColor` (color) - Default: `#0066ff` Base liquid color - `upColor` (color) - Default: `#00ff00` Color for upward movement - `downColor` (color) - Default: `#ff0000` Color for downward movement - `leftColor` (color) - Default: `#0000ff` Color for leftward movement - `rightColor` (color) - Default: `#ffff00` Color for rightward movement - `intensity` (range) - Default: `1` - Range: min: 0.5, max: 1.5, step: 0.1 Strength of the liquid effect - `radius` (range) - Default: `3` - Range: min: 0, max: 5, step: 0.1 Radius of the liquid effect - `momentum` (range) - Default: `30` - Range: min: 10, max: 60, step: 1 How much momentum colors retain in their flow direction ### CursorRipples - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `10` - Range: min: 0, max: 20, step: 0.1 Strength of the ripple distortion - `decay` (range) - Default: `10` - Range: min: 0, max: 20, step: 0.1 How quickly ripples fade (higher = faster) - `radius` (range) - Default: `0.5` - Range: min: 0.1, max: 1, step: 0.1 Radius of cursor influence - `chromaticSplit` (range,map) - Default: `1` - Range: min: 0, max: 3, step: 0.1 RGB channel separation along ripple edges - `edges` (select) - Default: `stretch` How to handle edges when distortion pushes content out of bounds ### CursorTrail - **Properties**: - `colorA` (color) - Default: `#00aaff` Color of fresh trails - `colorB` (color) - Default: `#ff00aa` Color trails transition to as they fade - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `radius` (range) - Default: `0.5` - Range: min: 0.5, max: 2, step: 0.1 Base radius of trail circles - `length` (range) - Default: `0.5` - Range: min: 0.1, max: 2, step: 0.1 How long trail circles persist (in seconds) - `shrink` (range) - Default: `1` - Range: min: 0, max: 1, step: 0.1 How much circles shrink as they fade out (0 = no shrink, 1 = full shrink) - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Fog - **Properties**: - `colorA` (color) - Default: `#e0e0e0` Primary fog color - `colorB` (color) - Default: `#888888` Secondary fog color — creates variation across the field - `seed` (range) - Default: `0` - Range: min: 0, max: 999, step: 1 Deterministic starting pattern — different seeds produce different fog configurations - `speed` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.1 Simulation speed multiplier - `turbulence` (range) - Default: `1` - Range: min: 0, max: 3, step: 0.01 Ambient motion strength - `detail` (range) - Default: `15` - Range: min: 0, max: 50, step: 1 Fine-scale swirling structure — higher values produce more intricate wisps and vortices - `blending` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 How much the two colors blend together — 0 behaves like oil & water (colors stay distinct with sharp boundaries), 1 behaves like food coloring (colors fully mix) - `mouseInfluence` (range) - Default: `0.1` - Range: min: 0, max: 2, step: 0.01 Strength of cursor influence — move the cursor to push fog - `mouseRadius` (range) - Default: `0.1` - Range: min: 0.02, max: 0.5, step: 0.01 Radius of cursor influence area - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### GridDistortion - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.1 Strength of the distortion effect - `decay` (range) - Default: `3` - Range: min: 0, max: 10, step: 0.1 Rate of distortion decay (higher = faster) - `radius` (range) - Default: `1` - Range: min: 0, max: 3, step: 0.1 Radius of the distortion effect - `gridSize` (range,map) - Default: `20` - Range: min: 8, max: 128, step: 1 Resolution of the distortion grid (higher = more detailed) - `edges` (select) - Default: `stretch` How to handle edges when distortion pushes content out of bounds ### InkFlow - **Requires Child**: No (this is generative) - **Properties**: - `colorMode` (select) - Default: `rainbow` How the brush colour is chosen: an ever-cycling rainbow, a single fixed colour, or a custom three-colour cycle - `colorSpeed` (range) - Default: `1` - Range: min: 0, max: 4, step: 0.05 How quickly the brush cycles through the rainbow or the custom colours as you paint - `color` (color) - Default: `#ff2d7e` Brush colour used when Color Mode is Single - `color1` (color) - Default: `#4338ff` First colour of the custom brush cycle - `color2` (color) - Default: `#ff2d7e` Second colour of the custom brush cycle - `color3` (color) - Default: `#19e3ff` Third colour of the custom brush cycle - `colorSpace` (select) - Default: `oklab` Colour space the custom colours blend through as the brush cycles between them - `radius` (range) - Default: `0.3` - Range: min: 0.1, max: 5, step: 0.05 Size of the ink splat painted under the cursor - `force` (range) - Default: `1` - Range: min: 0, max: 3, step: 0.05 How hard the cursor's motion pushes the fluid — higher throws faster, more violent jets and curls - `curl` (range) - Default: `0` - Range: min: 0, max: 60, step: 1 Vorticity confinement — swirl energy that spins the ink into persistent eddies and curls - `decay` (range) - Default: `0.5` - Range: min: 0.05, max: 4, step: 0.05 How fast the ink fades away — low values leave long, lingering trails - `momentum` (range) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 How long the fluid keeps flowing after a stroke — high momentum lets the motion carry on and on ### Liquify - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `10` - Range: min: 0, max: 20, step: 0.1 Scale of the fabric displacement effect - `stiffness` (range) - Default: `3` - Range: min: 1, max: 30, step: 0.5 Fabric rigidity (higher = stiffer canvas, lower = stretchy silk) - `damping` (range) - Default: `3` - Range: min: 0, max: 10, step: 0.1 How quickly fabric motion settles - `radius` (range) - Default: `1` - Range: min: 0.1, max: 1.5, step: 0.1 Cursor influence area - `edges` (select) - Default: `stretch` How to handle edges when distortion pushes content out of bounds ### MagneticFilings - **Requires Child**: No (this is generative) - **Properties**: - `colorA` (color) - Default: `#be1ef9` Color of filings resting quietly, aligned and still - `colorB` (color) - Default: `#6326ff` Color filings flash toward as they swing and settle — a wave of it follows the moving magnet - `colorSpace` (select) - Default: `oklab` Color space for the rest→excited color ramp - `shape` (select) - Default: `dot` How each filing is drawn — a slim streak or arrow reads as a compass needle, a box as a chunky filing, a dot or soft glow for a finer grain - `count` (range) - Default: `8000` - Range: min: 500, max: 12000, step: 500 Number of iron filings - `size` (range) - Default: `1` - Range: min: 0.5, max: 3, step: 0.05 Size of each filing - `restOrientation` (select) - Default: `random` Which way filings point where the field can't reach them — randomly, all horizontal, or all vertical - `fieldType` (select) - Default: `dipole` The magnetic field the filings reveal — a dipole (bar-magnet lobes that follow the cursor's motion) or a radial monopole (spokes out from the cursor) - `strength` (range) - Default: `1.7` - Range: min: 0, max: 3, step: 0.01 How strongly the magnet grips the filings — higher snaps more of them into sharp alignment - `reach` (range) - Default: `0.6` - Range: min: 0.1, max: 1, step: 0.01 How far the magnet's influence spreads (in screen heights) — larger reveals more of the field at once - `response` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How briskly filings swing and settle — low is loose and floppy with a long wobble, high snaps into place quickly ### ParticleFlow - **Requires Child**: No (this is generative) - **Properties**: - `colorA` (color) - Default: `#8ec5ff` Color of particles drifting slowly with the flow - `colorB` (color) - Default: `#ffd98e` Color particles flash toward as they speed up in the fast jets and wakes - `colorSpace` (select) - Default: `oklab` Color space for the rest→excited color ramp - `shape` (select) - Default: `streak` What each particle is drawn as — a streak or arrow that stretches along the flow, a plain dot, a square, or a soft glowing comet - `count` (range) - Default: `6000` - Range: min: 1000, max: 16000, step: 500 Number of drifting particles - `size` (range) - Default: `1.2` - Range: min: 0.3, max: 3, step: 0.05 Size of each particle - `trails` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 How long each particle's motion trail persists — 0 draws crisp dust, 1 leaves long flowing ribbons - `speed` (range) - Default: `1` - Range: min: 0.2, max: 3, step: 0.05 How strongly the fluid carries the particles — higher makes the dust ride the flow faster - `force` (range) - Default: `1` - Range: min: 0, max: 3, step: 0.05 How hard the cursor's motion pushes the fluid — higher plows faster, more violent wakes and jets - `swirl` (range) - Default: `25` - Range: min: 0, max: 60, step: 1 Vorticity confinement — swirl energy that spins the flow into persistent eddies and vortices the dust orbits - `momentum` (range) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 How long the fluid keeps flowing after you stop dragging — high momentum lets the eddies carry the dust on and on - `ambient` (range) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 A gentle, ever-evolving breeze that keeps the dust drifting even without the cursor — set to 0 for a field that only moves when you stir it ### PixelSort - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `radius` (range,map) - Default: `0.4` - Range: min: 0.03, max: 0.6, step: 0.01 Size of the cursor brush that sorts pixels - `falloff` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Softness of the brush edge (0 = hard circle, 1 = very soft) - `strength` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 How fast pixels sort — runs more sorting passes per frame - `decay` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 How quickly sorted pixels melt back to their original position (0 = permanent) - `axis` (select) - Default: `vertical` Axis pixels are sorted along - `direction` (select) - Default: `descending` Sort order by brightness ### PixelThrow - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `throwKey` (select) - Default: `luminance` Which pixel value decides how far a pixel is thrown - `strength` (range,map) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Maximum distance pixels can be thrown - `keyInfluence` (range,map) - Default: `0.8` - Range: min: 0, max: 1, step: 0.01 How much the chosen value modulates throw distance (0 = all pixels thrown equally, 1 = only high-value pixels move) - `radius` (range,map) - Default: `0.2` - Range: min: 0.02, max: 0.6, step: 0.01 Size of the cursor's throw brush - `friction` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 How quickly thrown pixels settle back to their origin (0 = float almost forever, 1 = snap back fast) - `momentum` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How much the thrown flow keeps drifting and swirling after the cursor passes (fluidity) - `edges` (select) - Default: `stretch` How to handle pixels thrown beyond the canvas edges ### ReactionDiffusion - **Requires Child**: No (this is generative) - **Properties**: - `preset` (select) - Default: `coral` Named Gray-Scott regime — drives the feed & kill rates for a whole family of patterns. Choose Custom to dial feed & kill by hand - `feed` (range) - Default: `0.0545` - Range: min: 0.01, max: 0.1, step: 0.001 Feed rate — how fast chemical U is replenished (used when Pattern = Custom) - `kill` (range) - Default: `0.062` - Range: min: 0.03, max: 0.07, step: 0.001 Kill rate — how fast chemical V is removed (used when Pattern = Custom) - `diffusionRatio` (range) - Default: `0.5` - Range: min: 0.2, max: 0.9, step: 0.01 Ratio of the two chemicals' diffusion rates — shifts the pattern character (lower = tighter, more filament-like) - `featureSize` (range) - Default: `3` - Range: min: 1, max: 6, step: 0.1 Size of the pattern features — lower shows finer, smaller cells; higher magnifies them into larger cells - `speed` (range) - Default: `6` - Range: min: 1, max: 16, step: 1 Simulation steps per frame — higher evolves the pattern faster - `brushSize` (range) - Default: `0.04` - Range: min: 0.01, max: 0.3, step: 0.01 Radius of the cursor brush that seeds new reagent as you drag - `brushStrength` (range) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 How much reagent the cursor injects while dragging - `colorA` (color) - Default: `transparent` Background color (empty regions between cells) - `colorC` (color) - Default: `#38bdf8` Accent color at the cell walls (mid pattern values) - `colorB` (color) - Default: `#e2f5ff` Color of the dense cell interiors (high pattern values) - `contrast` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Sharpness of the cell walls — higher gives crisper, more graphic edges - `threshold` (range,map) - Default: `0.28` - Range: min: 0.05, max: 0.6, step: 0.01 Pattern level the colors are centered on — shifts the balance of background vs. cells - `colorSpace` (select) - Default: `oklch` Color space for color interpolation - `relief` (range,map) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Treats the pattern as a raised surface and shades it with a light — higher gives a more sculpted, three-dimensional look (0 for a flat, graphic look) - `lightAngle` (range,map) - Default: `135` - Range: min: 0, max: 360, step: 1 Direction the surface light comes from, in degrees - `childInfluence` (range,map) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 When a child layer is nested, how strongly its brightness biases the pattern — the preset sets the character, the child steers where it grows dense vs. sparse (0 ignores the child) - `childContrast` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Contrast applied to the child's brightness before it drives the pattern — higher pushes toward a crisp two-tone split (edges), lower keeps smooth tonal shading - `childThreshold` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Brightness level of the child that reads as neutral — shifts which tones grow the pattern vs. clear it - `childInvert` (checkbox) - Default: `false` Flip which tones of the child grow the pattern (bright vs. dark areas) ### Shatter - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `crackWidth` (range,map) - Default: `1` - Range: min: 0.5, max: 5, step: 0.1 Thickness of crack lines - `intensity` (range) - Default: `4` - Range: min: 0, max: 20, step: 1 How much shards shift - `radius` (range) - Default: `0.4` - Range: min: 0.1, max: 1, step: 0.1 Cursor influence radius - `decay` (range) - Default: `1` - Range: min: 0.1, max: 10, step: 0.1 How fast shards return to rest - `seed` (range) - Default: `2` - Range: min: 0, max: 50, step: 1 Random seed for pattern - `chromaticSplit` (range,map) - Default: `1` - Range: min: 0, max: 5, step: 0.1 RGB separation for prismatic glass effect - `refractionStrength` (range,map) - Default: `5` - Range: min: 0, max: 10, step: 0.1 How much cracks bend/distort the underlying image - `shardLighting` (range) - Default: `0.1` - Range: min: 0, max: 0.5, step: 0.1 Subtle lighting on tilted shards for 3D depth - `edges` (select) - Default: `mirror` How to handle edges when displacement pushes content out of bounds ### Smoke - **Properties**: - `colorA` (color) - Default: `#fc83f9` Color of fresh smoke - `colorB` (color) - Default: `#c21c79` Color smoke transitions to as it ages - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `emitFrom` (position) - Default: `{"x":0.5,"y":1}` The emission source point - `direction` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Emission direction (0 = up, 90 = right, 180 = down, 270 = left) - `speed` (range) - Default: `20` - Range: min: 0.1, max: 50, step: 0.1 Emission velocity strength - `spread` (range) - Default: `60` - Range: min: 0, max: 180, step: 1 Emission cone angle in degrees - `emitRadius` (range) - Default: `0.08` - Range: min: 0.01, max: 0.3, step: 0.01 Size of the emission area - `intensity` (range) - Default: `1` - Range: min: 0.1, max: 1, step: 0.01 Smoke emission density - `dissipation` (range) - Default: `0.2` - Range: min: 0.1, max: 3, step: 0.1 How fast smoke fades over time - `detail` (range) - Default: `25` - Range: min: 0, max: 50, step: 1 Fine-scale swirling detail - `gravity` (range) - Default: `0.5` - Range: min: -2, max: 2, step: 0.1 Downward gravitational pull on smoke - `colorDecay` (range) - Default: `0.4` - Range: min: 0, max: 3, step: 0.1 How quickly smoke shifts from Color A to Color B - `mouseInfluence` (range) - Default: `0.1` - Range: min: 0, max: 2, step: 0.01 Strength of cursor influence - `mouseRadius` (range) - Default: `0.1` - Range: min: 0.02, max: 0.5, step: 0.01 Radius of cursor influence area - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### SmokeFlow - **Properties**: - `colorA` (color) - Default: `#e29c8b` Color of fresh smoke - `colorB` (color) - Default: `#d517f9` Color smoke transitions to as it ages - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `intensity` (range) - Default: `1` - Range: min: 0.1, max: 2, step: 0.05 How much smoke is emitted as you move the cursor - `emitRadius` (range) - Default: `0.07` - Range: min: 0.01, max: 0.3, step: 0.01 Size of smoke puff emitted at cursor - `momentum` (range) - Default: `20` - Range: min: 0, max: 50, step: 1 How much cursor velocity is transferred into the smoke (higher = more directed flow) - `dissipation` (range) - Default: `0.5` - Range: min: 0.05, max: 3, step: 0.05 How fast smoke fades over time - `detail` (range) - Default: `10` - Range: min: 0, max: 60, step: 1 Fine-scale swirling detail driven by vorticity confinement - `gravity` (range) - Default: `2` - Range: min: -5, max: 5, step: 0.05 Vertical drift — negative floats up, positive sinks down - `colorDecay` (range) - Default: `0.5` - Range: min: 0, max: 3, step: 0.1 How quickly smoke shifts from fresh to aged color - `colorSpace` (select) - Default: `OKLAB` Color space for color interpolation ## Category: Adjustments Components in this category: 14 ### BrightnessContrast - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `brightness` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Brightness adjustment (-1 to 1) - `contrast` (range,map) - Default: `0` - Range: min: -1, max: 1, step: 0.01 Contrast adjustment (-1 to 1) ### Duotone - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `colorA` (color) - Default: `#ff0000` First color (used for darker areas) - `colorB` (color) - Default: `#023af4` Second color (used for brighter areas) - `blend` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 Blend point between the two colors - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Exposure - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `exposure` (range,map) - Default: `1` - Range: min: 0, max: 8, step: 0.1 Brightness multiplier (gain). 1 = unchanged, >1 pushes highlights past white for HDR bloom, <1 darkens. ### FilmStock - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `stock` (select) - Default: `portrait400` Film stock — each look is a real measured film-emulation color LUT - `strength` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 How strongly the stock's color grade is applied - `halation` (range,map) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Strength of the red-orange highlight glow (film emulsion backscatter) - `halationRadius` (range) - Default: `28` - Range: min: 0, max: 100, step: 1 Spread of the halation glow in pixels - `weave` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Gate weave — subtle projector-like frame jitter and rotation ### Grayscale - **Requires Child**: Yes (this is an effect/filter) ### HueShift - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `shift` (range,map) - Default: `0` - Range: min: -180, max: 180, step: 1 The amount to shift the hue by ### Invert - **Requires Child**: Yes (this is an effect/filter) ### Posterize - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `5` - Range: min: 2, max: 20, step: 1 The intensity of the posterization effect (lower is more posterized) ### Saturation - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `1` - Range: min: 0, max: 3, step: 0.1 The intensity of the saturation effect (1 being no change) ### Sharpness - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `sharpness` (range,map) - Default: `0` - Range: min: 0, max: 5, step: 0.1 How sharp to make the underlying image ### Solarize - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `threshold` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Luminance level above which colors are inverted. Pixels brighter than this threshold get flipped. - `strength` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Blend between original (0) and fully solarized (1) ### Tint - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `color` (color) - Default: `#ff8800` Tint color - `amount` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 Tint amount (0 = no tint, 1 = full tint) - `preserveLuminosity` (checkbox) - Default: `true` Preserve original brightness ### Tritone - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `colorA` (color) - Default: `#ce1bea` First color (used for shadows/darkest areas) - `colorB` (color) - Default: `#2fff00` Second color (used for midtones) - `colorC` (color) - Default: `#ffff00` Third color (used for highlights/brightest areas) - `blendMid` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.1 Midpoint position between the three colors - `colorSpace` (select) - Default: `linear` Color space for color interpolation ### Vibrance - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `intensity` (range,map) - Default: `0` - Range: min: -2, max: 2, step: 0.1 The intensity of the vibrance effect ## Category: Shape Effects Components in this category: 19 ### BrushedMetal - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the metal shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the metal shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the metal shape in degrees - `lightColor` (color) - Default: `#e9ebef` The bright tone of the polished grain — recolor for gold (#ffe8b0), copper (#ffc8a0) or steel - `darkColor` (color) - Default: `#26282d` The dark tone the brushed grain falls to in shadow. Tint it warm for gold/bronze, cool for steel. - `brushAngle` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Direction the surface is brushed, in degrees — the grain and every reflection streak run along this axis - `anisotropy` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 How directional the brushing is — 1 = long smeared streaks along the grain, 0 = isotropic satin with no direction - `grain` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Depth of the individual brush scratches — the fine satin texture combed into the metal - `grainScale` (range) - Default: `2` - Range: min: 0.25, max: 4, step: 0.01 Density of the brush lines — higher = finer, tighter scratches - `roughness` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Overall satin softness — 0 = near-polished with crisp reflections, 1 = soft matte brushed finish - `environment` (range) - Default: `1.4` - Range: min: 0, max: 2, step: 0.01 Strength of the reflected studio lighting — the softboxes seen smeared across the metal - `envRotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotates the whole reflected studio — spins where the bright reflections fall - `lightAngle` (range) - Default: `215` - Range: min: 0, max: 360, step: 1 Direction of the key light for the anisotropic specular streak, in degrees - `speed` (range) - Default: `0.4` - Range: min: 0, max: 4, step: 0.01 Speed of the slowly drifting reflection — the studio gently orbits the surface. 0 pauses. - `bevelWidth` (range,map) - Default: `0.05` - Range: min: 0.005, max: 0.2, step: 0.001 Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal - `bevelShape` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light - `edgeSoftness` (range) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary edge - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### CarbonFiber - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the carbon shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the carbon shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the carbon shape in degrees - `lightColor` (color) - Default: `#b9bdc6` The bright tone of the fibre sheen — recolor for forged/coloured carbon (red, blue, bronze) - `darkColor` (color) - Default: `#0b0c0e` The deep resin tone the weave falls to in shadow — near-black for classic carbon - `weaveStyle` (select) - Default: `twill` Weave pattern — plain (checkerboard) or 2×2 twill (the diagonal supercar weave) - `weaveScale` (range) - Default: `30` - Range: min: 2, max: 50, step: 0.5 Number of woven tows across the shape — higher = finer, denser weave - `weaveAngle` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotates the whole weave grid in degrees - `relief` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Depth of the quilted weave — how far each tow bulges, catching light on its crown and shadowing the valleys between - `fiberSheen` (range) - Default: `1.2` - Range: min: 0, max: 1.5, step: 0.01 Strength of the anisotropic fibre sheen — the directional satin glint running along each tow - `roughness` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Softness of the fibre sheen — 0 = tight crisp glints, 1 = soft matte satin - `clearcoat` (range) - Default: `1.2` - Range: min: 0, max: 2, step: 0.01 Strength of the glossy lacquer coat — the sharp studio reflections of the wet clearcoat over the weave - `environment` (range) - Default: `2` - Range: min: 0, max: 2, step: 0.01 Strength of the reflected studio lighting seen in the clearcoat - `envRotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotates the whole reflected studio — spins where the bright reflections fall - `lightAngle` (range) - Default: `215` - Range: min: 0, max: 360, step: 1 Direction of the key light for the fibre sheen, in degrees - `bevelWidth` (range,map) - Default: `0.05` - Range: min: 0.005, max: 0.2, step: 0.001 Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal - `bevelShape` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light - `edgeSoftness` (range) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary edge - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Chrome - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the chrome shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the chrome shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the chrome shape in degrees - `tint` (color) - Default: `#ffffff` Metal tint multiplied into the reflection — white for silver chrome, warm ivory for gold, dusky rose for copper - `warmColor` (color) - Default: `#ffa94d` Color of the warm strip light hugging the studio horizon — the amber band that fringes the reflections - `coolColor` (color) - Default: `#82a7e6` Color of the cool wash below the horizon — the steel-blue zone the darker reflections fall into - `bevelWidth` (range,map) - Default: `0.028` - Range: min: 0.005, max: 0.2, step: 0.001 Width of the polished edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal - `bevelShape` (range,map) - Default: `0.55` - Range: min: 0, max: 1, step: 0.01 Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light - `curvature` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Convex doming of the faces — sweeps the big soft studio gradients across otherwise flat metal - `waviness` (range,map) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Pressed-metal imperfection — gently bends the face reflections and wobbles the bevel light lines so the surface reads as real - `environment` (range,map) - Default: `1` - Range: min: 0, max: 2, step: 0.01 Exposure of the reflected studio — the overall brilliance of the chrome - `envRotation` (range,map) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotates the whole reflected studio — spins where the softbox, flags and strips fall - `softness` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Softness of the studio edges — 0 = razor polished reflections, 1 = satin diffusion - `spectral` (range,map) - Default: `0.9` - Range: min: 0, max: 2, step: 0.01 The coloured accent lights: an amber glow hugging the softbox edge and an ice-blue wash below it. 0 = a fully achromatic black-and-white studio. - `dispersion` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Prismatic RGB splitting concentrated on the fast-curving bevel — thin rainbow micro-fringes along the edge highlights, distinct from the broad accent lights - `shadows` (range,map) - Default: `0.7` - Range: min: 0, max: 1, step: 0.01 Depth of the dark studio reflections — how hard the black side flags and floor crush toward graphite. 0 lifts them to a soft gray studio. - `speed` (range) - Default: `0.5` - Range: min: 0, max: 4, step: 0.01 Speed of the studio orbit — the whole lighting environment slowly wanders around the piece, sliding the reflections across faces and edges. 0 freezes it. - `edgeSoftness` (range) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary edge - `shape` (shape) - Default: `{"type":"roundedRectSDF","width":0.42,"height":0.3,"rounding":0.12}` Serialized shape configuration (JSON) ### Crystal - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the crystal shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the crystal shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the crystal shape in degrees - `cutout` (checkbox) - Default: `false` Cut out alpha outside the crystal shape - `refraction` (range) - Default: `0.5` - Range: min: 0, max: 3, step: 0.01 How strongly the crystal refracts content beneath - `dispersion` (range) - Default: `0.5` - Range: min: 0, max: 2, step: 0.01 Prismatic rainbow dispersion — splits light into spectral colors - `facets` (range) - Default: `5` - Range: min: 3, max: 24, step: 1 Symmetry order — how many times the facet pattern repeats around the center - `fresnel` (range) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Fresnel rim glow intensity around the crystal boundary - `fresnelSoftness` (range) - Default: `1` - Range: min: 0, max: 2, step: 0.01 Fresnel rim width — higher values spread the glow further inward - `fresnelColor` (color) - Default: `#ffffff` Color of the fresnel rim glow - `edgeSoftness` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Softness of the crystal boundary edge - `innerZoom` (range) - Default: `1.5` - Range: min: 0.5, max: 3, step: 0.01 Magnification of content seen through the crystal - `lightAngle` (range) - Default: `270` - Range: min: 0, max: 360, step: 1 Light direction angle in degrees - `highlights` (range) - Default: `0.5` - Range: min: 0, max: 2, step: 0.01 Additive brightness on light-facing facets — never darkens - `shadows` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Darkening on shadow-facing facets — never brightens - `brightness` (range) - Default: `1.2` - Range: min: 0.5, max: 3, step: 0.01 Overall crystal brightness — higher values push facets toward brilliant white - `tintColor` (color) - Default: `#e8e0ff` Crystal body tint color - `tintIntensity` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 How much tint color is applied to the crystal interior - `tintPreserveLuminosity` (checkbox) - Default: `true` Preserve original brightness when tinting - `shape` (shape) - Default: `{"type":"polygonSDF","radius":0.35,"sides":10}` Serialized shape configuration (JSON) ### Emboss - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the embossed shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the embossed shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the embossed shape in degrees - `depth` (range) - Default: `-0.5` - Range: min: -1, max: 1, step: 0.01 Relief depth — negative = inset (debossed), positive = raised (embossed) - `lightAngle` (range,map) - Default: `260` - Range: min: 0, max: 360, step: 1 Directional light angle in degrees — controls highlight and shadow direction - `lightIntensity` (range,map) - Default: `0.6` - Range: min: 0, max: 2, step: 0.01 Strength of the directional edge highlights and shadows - `shadowIntensity` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Darkness of the relief shadow - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Frost - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the ice shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the ice shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the ice shape in degrees - `iceColor` (color) - Default: `#0597fc` Ice tint — the colour deep ice saturates toward (thin edges stay near white) - `ambient` (range) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Cool ambient fill so shadowed ice never goes black - `edgeSoftness` (range) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary edge - `density` (range) - Default: `5` - Range: min: 0, max: 10, step: 0.01 Optical depth multiplier — how thick and deep the ice reads - `absorption` (range) - Default: `1` - Range: min: 0, max: 2, step: 0.01 Beer–Lambert absorption strength — higher drives a deeper blue-teal core - `scatter` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Forward back-lit glow transmitted through thin ice - `frostAmount` (range) - Default: `0.8` - Range: min: 0, max: 1, step: 0.01 Overall density of the rim frost crystals - `frostDepth` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 How far the frost creeps inward from the rim - `frostScale` (range) - Default: `1` - Range: min: 0.3, max: 4, step: 0.01 Crystal size — higher = finer, busier frost - `frostRoughness` (range) - Default: `3` - Range: min: 1, max: 5, step: 0.01 Feathery roughness of the frost crystal surface - `sparkle` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Tiny bright crystal glints catching the light at the rim - `gloss` (range) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Surface sheen — the broad soft icy specular - `fresnel` (range) - Default: `0.02` - Range: min: 0, max: 1, step: 0.01 Cold rim glow on grazing surfaces - `lightAngle` (range) - Default: `300` - Range: min: 0, max: 360, step: 1 Key light direction in degrees - `speed` (range) - Default: `0.3` - Range: min: 0, max: 2, step: 0.01 Sparkle twinkle speed. 0 freezes the sparkle. - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Glass - **Requires Child**: Yes (this is an effect/filter) - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the glass shape - `scale` (range,map) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the glass shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the glass shape in degrees - `cutout` (checkbox) - Default: `false` Cut out the alpha outside the glass shape - `refraction` (range,map) - Default: `1` - Range: min: 0, max: 2, step: 0.01 Lens refraction — how aggressively the edges warp content beneath (0 = none, 1 = max) - `edgeSoftness` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Edge softness — higher values give a wider, softer fade at the glass boundary - `blur` (range) - Default: `0` - Range: min: 0, max: 20, step: 0.1 Frosted blur amount — 0 = clear glass, higher = frosted/diffuse - `thickness` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 Glass depth — how far inward from the edge the refraction extends - `aberration` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Chromatic aberration — splits RGB channels along the refraction vector - `innerZoom` (range,map) - Default: `1` - Range: min: 0.5, max: 3, step: 0.01 Inner zoom level — magnifies content seen through the glass - `lightAngle` (range) - Default: `300` - Range: min: 0, max: 360, step: 1 Light angle in degrees - `highlight` (range,map) - Default: `0.05` - Range: min: 0, max: 2, step: 0.01 Directional edge highlight — bright rim on the light-facing boundary - `highlightColor` (color) - Default: `#ffffff` Color of the directional edge highlight and specular glint - `highlightSoftness` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Specular highlight softness - `fresnel` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Fresnel rim glow — a soft luminous halo around the glass boundary - `fresnelSoftness` (range,map) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Fresnel rim width — higher values spread the glow further inward - `fresnelColor` (color) - Default: `#ffffff` Color of the fresnel rim glow - `tintColor` (color) - Default: `#ffffff` Color tint applied to the internal directional gradient - `tintIntensity` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Intensity of the color tint applied to the glass interior - `tintPreserveLuminosity` (checkbox) - Default: `true` Preserve original brightness when tinting - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Goo - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the goo - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the goo (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the goo in degrees - `gooColor` (color) - Default: `#37c95a` Base liquid color (a glossy slime green by default) - `translucency` (range) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Subsurface glow strength — deep lobes transmit more color - `absorb` (range) - Default: `2` - Range: min: 0, max: 6, step: 0.01 How fast thin areas clear and thick areas saturate (Beer–Lambert) - `containment` (range) - Default: `0.9` - Range: min: 0, max: 1, step: 0.01 0 = free blobs that ignore the shape, 1 = goo fills the shape and its surface conforms to the 3D form (highlights track the faces as it rotates) - `edgeSoftness` (range) - Default: `0.06` - Range: min: 0, max: 0.3, step: 0.005 Softness of the blob coverage edge - `blobScale` (range) - Default: `0.3` - Range: min: 0.1, max: 1, step: 0.01 Base radius of each liquid lobe - `spread` (range) - Default: `1` - Range: min: 0, max: 2, step: 0.01 How far the lobes scatter across the shape - `merge` (range) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 How much the lobes fuse together — low = distinct beads, high = one fused mass - `bulge` (range) - Default: `1` - Range: min: 0, max: 1.5, step: 0.01 How 3D-rounded each lobe reads — dome height of the wet surface - `threshold` (range) - Default: `0.5` - Range: min: 0.2, max: 0.9, step: 0.01 Iso-surface level — lower makes fatter, fuller blobs - `lightAngle` (range) - Default: `300` - Range: min: 0, max: 360, step: 1 Light direction in degrees - `wetness` (range) - Default: `2` - Range: min: 0, max: 5, step: 0.01 Master scale on the sharp specular highlight and clearcoat rim - `fresnel` (range) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Clearcoat fresnel rim strength wrapping each lobe - `specColor` (color) - Default: `#ffffff` Highlight / rim color (white reads as a clear wet coat) - `ambient` (range) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Base fill so shadowed goo isn't black - `speed` (range) - Default: `0.5` - Range: min: 0, max: 2, step: 0.01 Drift and breathe speed of the blobs. 0 pauses. - `wobble` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Drift amplitude — how far the lobe centers wander - `breathe` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Radius pulsing amplitude — lobes swell and shrink - `seed` (range) - Default: `1` - Range: min: 0, max: 100, step: 1 Variation offset — shifts the blob arrangement - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Heatmap - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the heatmap shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the heatmap shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the heatmap shape in degrees - `colorA` (color) - Default: `#02010f` Cold color (used when no gradient stops are set) - `colorB` (color) - Default: `#f9e25f` Hot color (used when no gradient stops are set) - `stops` (gradient-stops) - Default: `[{"color":"#02010f","position":0},{"color":"#2a0a8a","position":0.2},{"color":"#a41c9b","position":0.45},{"color":"#e8632b","position":0.7},{"color":"#f9e25f","position":0.9},{"color":"#ffffff","position":1}]` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `oklab` Color space for the heat ramp interpolation - `innerGlow` (range,map) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Heat filling the inside of the shape - `outerGlow` (range,map) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 Heat radiating beyond the silhouette - `contour` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Heat concentrated along the shape boundary - `angle` (range) - Default: `90` - Range: min: 0, max: 360, step: 1 Direction the heat waves travel, in degrees - `speed` (range) - Default: `1` - Range: min: 0, max: 4, step: 0.01 Speed of the flowing heat. 0 pauses. - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Hologram - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the hologram shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the hologram shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the hologram shape in degrees - `color` (color) - Default: `#5ec8ff` Projection tint — the colour the whole hologram emits (classic sci-fi cyan by default) - `brightness` (range) - Default: `2.5` - Range: min: 0.2, max: 3, step: 0.01 Overall emission gain. Bright edges blow out toward white for a hot, projected look. - `edgeSoftness` (range) - Default: `0.04` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary edge — keep low for crisp projection edges - `fill` (range) - Default: `0.45` - Range: min: 0, max: 1, step: 0.01 Translucent interior glow. Driven by optical thickness, so thicker parts of a 3D form glow more — the core volumetric cue. - `edgeGlow` (range) - Default: `1` - Range: min: 0, max: 2.5, step: 0.01 Fresnel rim intensity — bright glowing silhouette and, on 3D shapes, the grazing internal walls of extruded logos - `depthLines` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Iso-depth scan-lines that hug the surface and reveal the 3D form like a volumetric scan. On flat shapes they become concentric contour rings. - `depthScale` (range) - Default: `26` - Range: min: 4, max: 70, step: 1 Density of the depth scan-lines — higher packs more contour bands through the volume - `scanlines` (range) - Default: `0.55` - Range: min: 0, max: 1, step: 0.01 CRT scanline contrast — how dark the gaps between horizontal projection lines get - `scanlineScale` (range) - Default: `130` - Range: min: 20, max: 400, step: 1 Number of horizontal scanlines across the canvas height - `scanlineSpeed` (range) - Default: `1` - Range: min: 0, max: 5, step: 0.01 How fast the scanlines drift upward — 0 holds them static - `sweep` (range) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Brightness of the refresh bar that sweeps vertically through the projection - `flicker` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Unstable-projector flicker — a fast shimmer plus occasional brightness dropouts - `distortion` (range) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Continuous horizontal wobble and chromatic edge fringing — the wavering of an unstable beam - `grain` (range) - Default: `0.7` - Range: min: 0, max: 1, step: 0.01 Fine projection static — animated per-pixel noise over the emission - `speed` (range) - Default: `1` - Range: min: 0, max: 3, step: 0.01 Master animation speed for every animated layer. 0 freezes the projection. - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Holographic - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the foil shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the foil shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the foil shape in degrees - `hueShift` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotates the rainbow spectrum across the foil - `foilScale` (range) - Default: `1.5` - Range: min: 0.3, max: 6, step: 0.01 Size of the iridescent color patches — higher = smaller, busier patches - `saturation` (range) - Default: `0.75` - Range: min: 0, max: 1, step: 0.01 Rainbow saturation — 0 = plain silver foil, 1 = fully spectral - `roughness` (range) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Matte laminate grain — softens the gloss with fine paper-like noise - `speed` (range) - Default: `1` - Range: min: 0, max: 2, step: 0.01 Animation speed — the spectrum drifts across the foil as if the sticker is tilting in your hand. 0 pauses. - `crinkle` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Laminate wrinkles — perturbs the surface so the sheen and rainbow swirl locally instead of lying flat - `crinkleScale` (range) - Default: `1` - Range: min: 0.3, max: 6, step: 0.01 Size of the laminate wrinkles — higher = smaller, denser wrinkles - `sparkle` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 Glitter flakes embedded in the foil — tiny facets that refract a shifted hue and twinkle as the spectrum drifts - `edgeSoftness` (range) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary edge - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### LightEdge - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the shape in degrees - `colorA` (color) - Default: `#7b2ff7` First border light color (used when no gradient stops are set) - `colorB` (color) - Default: `#00e0ff` Second border light color (used when no gradient stops are set) - `stops` (gradient-stops) - Default: `[{"color":"#7b2ff7","position":0},{"color":"#00e0ff","position":0.5},{"color":"#ff3d81","position":1}]` Multi-stop gradient colors (overrides Color A / Color B when set) - `colorSpace` (select) - Default: `linear` Color space overlapping lights blend in - `thickness` (range,map) - Default: `0.25` - Range: min: 0.01, max: 1, step: 0.01 Width of the border band - `softness` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Edge softness — 0 = crisp band, 1 = wide smooth gradient - `intensity` (range,map) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Brightness of the individual light spots - `bloom` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 How additively overlapping lights pile up — high values overdrive to white - `spots` (range) - Default: `3` - Range: min: 1, max: 5, step: 1 Number of light spots orbiting per color - `spotSize` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Angular size of each light spot - `pulse` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Heartbeat pulsing — synchronizes the lights to a double-beat rhythm - `smoke` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Noisy luminous smoke drifting along the border - `smokeSize` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Scale of the smoke billows - `speed` (range) - Default: `1` - Range: min: 0, max: 4, step: 0.1 Animation speed. 0 pauses. - `seed` (range,map) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed — re-rolls spot speeds, directions and phases - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### LiquidMetal - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the metal shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the metal shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the metal shape in degrees - `lightColor` (color) - Default: `#eef0f6` The bright tone of the chrome highlights - `darkColor` (color) - Default: `#141414` The dark tone the reflection falls to in shadow — recolor for tinted metal (gold, steel, copper…) - `turbulence` (range) - Default: `1` - Range: min: 0, max: 1.5, step: 0.01 How molten the surface is — the depth of the flowing folds that bend the reflection - `ripple` (range) - Default: `4` - Range: min: 0.5, max: 8, step: 0.01 Scale of the molten folds — higher = smaller, busier ripples - `warp` (range) - Default: `1.5` - Range: min: 0, max: 1.5, step: 0.01 Swirl of the flow — domain-warps the folds into liquid curls - `speed` (range) - Default: `0.5` - Range: min: 0, max: 4, step: 0.01 Speed of the molten flow and the slowly drifting reflection. 0 pauses. - `environment` (range) - Default: `1.5` - Range: min: 0, max: 2, step: 0.01 Strength of the reflected studio lighting — the softboxes seen across the metal - `envRotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotates the whole reflected studio — spins where the bright reflections fall - `sharpness` (range) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Tightness of the specular highlights — 1 = razor chrome glints, 0 = soft satin - `dispersion` (range) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Prismatic color fringing along the reflection edges - `lightAngle` (range) - Default: `265` - Range: min: 0, max: 360, step: 1 Direction of the key light for the specular glints, in degrees - `bevelWidth` (range,map) - Default: `0.05` - Range: min: 0.005, max: 0.2, step: 0.001 Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal - `bevelShape` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light - `edgeSoftness` (range) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary edge - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Neon - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the neon shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the neon shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the neon shape in degrees - `color` (color) - Default: `#00ddff` Primary neon tube color - `secondaryColor` (color) - Default: `#ff00aa` Shadow-side color for a two-tone / dual-lit pipe look - `secondaryBlend` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Blend between mono (0) and two-tone (1) tube coloring - `glowColor` (color) - Default: `#00ddff` Color of the outer glow / bloom - `tubeThickness` (range) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 How far inward from the boundary the tube extends. Low = thin neon outline, high = thick 3D pipe - `intensity` (range) - Default: `1.5` - Range: min: 0.5, max: 4, step: 0.01 Overall brightness multiplier - `hotCoreIntensity` (range) - Default: `0.6` - Range: min: 0, max: 1, step: 0.01 Bright white-hot center line — the gas discharge glow inside the tube - `glowIntensity` (range) - Default: `0.6` - Range: min: 0, max: 2, step: 0.01 Outer glow / bloom strength - `glowRadius` (range) - Default: `0.25` - Range: min: 0.01, max: 1, step: 0.01 How far the glow extends beyond the tube - `lightAngle` (range) - Default: `300` - Range: min: 0, max: 360, step: 1 Directional light angle in degrees — controls 3D shading on the tube - `specularIntensity` (range) - Default: `0.5` - Range: min: 0, max: 2, step: 0.01 Specular highlight brightness on the tube surface - `specularSize` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Specular highlight size — 0 = tight pinpoint, 1 = broad sheen - `cornerSmoothing` (range) - Default: `0.15` - Range: min: 0, max: 1, step: 0.01 Rounds sharp corners to mimic how real glass tubes curve at bends - `flickerSpeed` (range) - Default: `0` - Range: min: 0, max: 5, step: 0.1 Flicker animation speed — 0 = off, higher = faster sporadic on/off - `flickerAmount` (range) - Default: `0.2` - Range: min: 0, max: 1, step: 0.01 How often the neon flickers off — 0 = always on, 1 = frequent outages - `flowSpeed` (range) - Default: `0` - Range: min: 0, max: 5, step: 0.1 Flow animation speed — 0 = off, light rotates through the tube - `flowAmount` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Strength of the flowing brightness variation — 0 = uniform, 1 = dramatic - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Particles - **Requires Child**: No (this is generative) - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the shape in degrees - `colorA` (color) - Default: `#8ec5ff` Color of particles at rest - `colorB` (color) - Default: `#ff7ad9` Color particles shift toward when agitated — scattering from the cursor or catching up to a moving shape - `count` (range) - Default: `4000` - Range: min: 1000, max: 16000, step: 1000 Number of simulated particles - `size` (range) - Default: `1.5` - Range: min: 0.6, max: 6, step: 0.1 Base particle size (each particle also varies slightly, and grows as it drifts toward the viewer) - `particleShape` (select) - Default: `dot` What each particle is drawn as — a crisp dot or square (softness still feathers them), or a soft glow puff - `spread` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 The pressure pushing particles apart — how strongly they insist on even spacing inside the shape - `agitation` (range) - Default: `0.12` - Range: min: 0, max: 1, step: 0.01 Idle thermal motion of the swarm — 0 freezes it crystal-still once settled - `damping` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 How quickly disturbed particles calm back down and settle into place - `gravity` (range) - Default: `0` - Range: min: -2, max: 2, step: 0.01 Downward pull on the swarm — negative floats the particles upward - `mouseInfluence` (range) - Default: `2` - Range: min: -5, max: 5, step: 0.01 Strength of the cursor field. Positive scatters particles away; negative pulls the swarm toward the cursor - `mouseRadius` (range) - Default: `0.2` - Range: min: 0.05, max: 0.8, step: 0.01 Reach of the cursor field, in shape-local units - `exposure` (range) - Default: `1` - Range: min: 0.2, max: 3, step: 0.01 Brightness of the additive particle glow - `softness` (range) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Edge softness of each particle — 0 is a crisp disc, 1 a soft glow puff - `depth` (range) - Default: `0.18` - Range: min: 0.02, max: 0.6, step: 0.01 Thickness of the particle volume behind flat shapes (3D shapes use their own true depth) - `colorSpace` (select) - Default: `oklab` Color space for the rest→excited color ramp - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Plastic - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the plastic shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the plastic shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the plastic shape in degrees - `colorA` (color) - Default: `#f5f5f7` Body color at the start of the gradient - `colorB` (color) - Default: `#d9dade` Body color at the end of the gradient - `stops` (gradient-stops) - Default: `null` Multi-stop gradient colors (overrides Color A / Color B when set) - `gradientAngle` (range) - Default: `90` - Range: min: 0, max: 360, step: 1 Direction of the body color gradient in degrees - `colorSpace` (select) - Default: `linear` Color space for gradient color interpolation - `thickness` (range) - Default: `0.5` - Range: min: 0.05, max: 1, step: 0.01 Puffiness — how far the rounded bevel reaches inward from the edge before the surface flattens - `roughness` (range) - Default: `0.12` - Range: min: 0, max: 1, step: 0.01 Surface roughness — 0 = polished gloss with crisp mirror reflections, 1 = matte satin - `reflectivity` (range) - Default: `1` - Range: min: 0, max: 2, step: 0.01 Strength of the environment reflections and specular highlights - `crumple` (range) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Surface crumple — irregular dents that break reflections into hard organic shapes, like blown or vacuum-formed plastic - `crumpleScale` (range) - Default: `1` - Range: min: 0.5, max: 10, step: 0.1 Size of the crumple dents — higher = smaller, denser dents - `crumpleCoverage` (range) - Default: `1` - Range: min: 0, max: 1, step: 0.01 How much of the surface is crumpled — 0 = pristine, 0.5 = patches of crumple, 1 = fully crumpled - `seed` (range) - Default: `0` - Range: min: 0, max: 100, step: 1 Random seed — re-rolls the crumple pattern for reflection variety - `edgeSoftness` (range) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary edge - `lightAngle` (range) - Default: `315` - Range: min: 0, max: 360, step: 1 Direction the studio key light comes from, in degrees - `speed` (range) - Default: `1` - Range: min: 0, max: 4, step: 0.01 Speed of the environment drift — the studio reflections slowly orbit the surface. 0 pauses. - `shading` (range) - Default: `0.35` - Range: min: 0, max: 1, step: 0.01 Diffuse shading contrast — how strongly the body darkens away from the light - `rim` (range) - Default: `0.25` - Range: min: 0, max: 1, step: 0.01 Fresnel rim light intensity on grazing surfaces - `rimColor` (color) - Default: `#ffffff` Color of the fresnel rim light - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### SmokeFill - **Requires Child**: No (this is generative) - **Properties**: - `colorA` (color) - Default: `#8cf3ff` Color of fresh smoke - `colorB` (color) - Default: `#04a0d6` Color smoke transitions to as it ages - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the shape in degrees - `emitFrom` (position) - Default: `{"x":0.5,"y":0.5}` Emission source point within the shape - `direction` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Emission direction (0 = up, 90 = right, 180 = down, 270 = left) - `speed` (range) - Default: `10` - Range: min: 0.1, max: 30, step: 0.1 Emission velocity strength - `spread` (range) - Default: `60` - Range: min: 0, max: 180, step: 1 Emission cone angle in degrees - `emitRadius` (range) - Default: `0.03` - Range: min: 0.01, max: 0.3, step: 0.01 Size of the emission area - `intensity` (range) - Default: `1` - Range: min: 0.1, max: 1, step: 0.01 Smoke emission density - `dissipation` (range) - Default: `0.3` - Range: min: 0.1, max: 5, step: 0.1 How fast smoke fades over time - `detail` (range) - Default: `25` - Range: min: 0, max: 50, step: 1 Fine-scale swirling detail - `gravity` (range) - Default: `0.5` - Range: min: -2, max: 2, step: 0.1 Downward gravitational pull on smoke — 0 = weightless, negative values = smoke rises - `colorDecay` (range) - Default: `0.4` - Range: min: 0, max: 3, step: 0.1 How quickly smoke shifts from Color A to Color B - `mouseInfluence` (range) - Default: `0.1` - Range: min: 0, max: 2, step: 0.01 Strength of cursor influence - `mouseRadius` (range) - Default: `0.1` - Range: min: 0.02, max: 0.5, step: 0.01 Radius of cursor influence area - `colorSpace` (select) - Default: `linear` Color space for color interpolation - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### ThinFilm - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the shape - `scale` (range,map) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the shape in degrees - `intensity` (range,map) - Default: `1` - Range: min: 0, max: 4, step: 0.01 Rim brightness — values above 1 push the edge past white for HDR bloom - `rimWidth` (range,map) - Default: `1` - Range: min: 0, max: 3, step: 0.01 How far inward from the edge the iridescence reaches - `edgeSoftness` (range,map) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary - `thickness` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Film thickness — higher values pack more spectral bands across the rim - `dispersion` (range,map) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 How strongly colour separates around the perimeter (warm vs cool sides) - `saturation` (range,map) - Default: `1` - Range: min: 0, max: 1, step: 0.01 Spectral saturation — 0 = white rim, 1 = full iridescence - `hueShift` (range,map) - Default: `0` - Range: min: 0, max: 1, step: 0.01 Rotate the spectrum to reposition the colours - `lightAngle` (range) - Default: `300` - Range: min: 0, max: 360, step: 1 Light angle in degrees — sets which side of the rim runs warm vs cool - `mode` (select) - Default: `rainbow` Rainbow uses the full iridescent spectrum; Custom cycles through your three chosen colours - `colorA` (color) - Default: `#2b6fff` First colour in the rim cycle - `colorB` (color) - Default: `#ffffff` Second colour in the rim cycle - `colorC` (color) - Default: `#ff7a21` Third colour in the rim cycle - `colorSpace` (select) - Default: `oklch` Colour space used to blend between custom colours - `speed` (range) - Default: `0.1` - Range: min: -1, max: 1, step: 0.01 Speed at which the colours rotate around the rim (0 = static) - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ### Water - **Properties**: - `origin` (origin) - Default: `center` Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. - `center` (position) - Default: `{"x":0.5,"y":0.5}` Center position of the water shape - `scale` (range) - Default: `1` - Range: min: 0.1, max: 3, step: 0.01 Scale of the water shape (1 = default size) - `rotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotation of the water shape in degrees - `waterColor` (color) - Default: `#00bfeb` The colour the water saturates toward with depth - `clarity` (range) - Default: `0.4` - Range: min: 0, max: 1, step: 0.01 How much of the reflected sky transmits through the body - `depth` (range) - Default: `5` - Range: min: 0, max: 8, step: 0.01 How quickly the water darkens and saturates toward its colour with thickness - `shallows` (range) - Default: `0.5` - Range: min: 0, max: 1, step: 0.01 Brightness of the thin shallow water at the edges — high fades the rim to light translucent water, low keeps the edges close to the deep water colour - `caustics` (range) - Default: `0.15` - Range: min: 0, max: 2, step: 0.01 Intensity of the light caustics bubbling up through the body — bright veins of focused light churning inside the water - `causticScale` (range) - Default: `6` - Range: min: 1, max: 20, step: 0.1 Size of the caustic veins — higher = finer, busier light patterns inside the body - `choppiness` (range) - Default: `0.8` - Range: min: 0, max: 1.5, step: 0.01 Height of the wind-driven waves — the depth of the folds that bend the reflection - `waveScale` (range) - Default: `3.5` - Range: min: 0.5, max: 8, step: 0.01 Scale of the wave fronts — higher = smaller, busier ripples - `swirl` (range) - Default: `0.6` - Range: min: 0, max: 1.5, step: 0.01 Swirl of the flow — domain-warps the wave fronts into curling eddies - `speed` (range) - Default: `0.5` - Range: min: 0, max: 4, step: 0.01 Speed of the rolling waves. 0 pauses the surface. - `reflection` (range) - Default: `2` - Range: min: 0, max: 2, step: 0.01 Strength of the reflected sky across the surface - `envRotation` (range) - Default: `0` - Range: min: 0, max: 360, step: 1 Rotates the reflected sky — spins where the bright sky and sun fall - `sharpness` (range) - Default: `0.1` - Range: min: 0, max: 1, step: 0.01 Tightness of the sun glint and reflected sun - `lightAngle` (range) - Default: `30` - Range: min: 0, max: 360, step: 1 Direction of the sun, in degrees — drives the glint and where the sun reflects - `foam` (range) - Default: `0.3` - Range: min: 0, max: 1, step: 0.01 White foam breaking on the wave crests and along the shoreline edge - `edgeSoftness` (range) - Default: `0.05` - Range: min: 0, max: 1, step: 0.01 Softness of the shape boundary edge - `shape` (shape) - Default: `{"type":"circleSDF","radius":0.35}` Serialized shape configuration (JSON) ## Category: Utilities Components in this category: 1 ### Group - **Requires Child**: Yes (this is an effect/filter) ## Composition Examples ### Example 1: Simple Colored Circle ```json { "components": [ { "type": "Circle", "id": "id1", "props": { "color": "#5b18ca", "radius": 1, "softness": 0.5, "center": { "x": 0.5, "y": 0.5 } } } ] } ``` ### Example 2: Blurred Gradient ```json { "components": [ { "type": "Blur", "id": "id2", "props": { "intensity": 50 }, "children": [ { "type": "LinearGradient", "id": "id3", "props": { "colorStops": ["#ff0000", "#0000ff"], "angle": 45 } } ] } ] } ``` ### Example 3: Complex Effect Stack ```json { "components": [ { "type": "Glow", "id": "id4", "props": { "intensity": 1, "radius": 20 }, "children": [ { "type": "ChromaticAberration", "id": "id5", "props": { "offset": 5 }, "children": [ { "type": "Circle", "id": "id6", "props": { "color": "#ffffff", "radius": 0.5 } } ] } ] } ] } ``` ## Component Categories Summary - **Blurs** (9): AngularBlur, Blur, BokehBlur, ChannelBlur, DiffuseBlur, LinearBlur, ProgressiveBlur, TiltShift, ZoomBlur - **Shapes** (16): Arc, Circle, Crescent, Cross, Ellipse, Flower, Heart, Line, Parallelogram, Polygon, Ring, RoundedRect, Star, Teardrop, Trapezoid, Vesica - **Stylize** (30): Ascii, Chalkboard, ChromaticAberration, CompressionArtifacts, ContourLines, CRTScreen, DataMosh, Dither, DropShadow, Engraving, FilmGrain, Glitch, Glow, GradientMap, Halftone, KeyFrames, LensDistortion, LensFlare, LightLeak, ObjectTracker, Paper, ParticleField, Pixelate, ReflectivePlane, Stone, TimeTrail, VHS, Vignette, Watercolor, Wool - **Textures** (52): Aurora, Beam, Blob, BlockNoise, BlueNoise, BrickPattern, Checkerboard, Chevron, ColorWheel, ConicGradient, CurlNoise, DiamondGradient, DotGrid, ErosionNoise, FallingLines, FloatingParticles, FlowingGradient, FractalNoise, GaborNoise, Godrays, Grid, HexGrid, HTMLInCanvas, ImageTexture, IsometricCubes, LinearGradient, Marble, MultiPointGradient, PerlinNoise, Plasma, Prism, RadialGradient, Ripples, Scratches, SimplexNoise, SineWave, SolidColor, Spiral, Strands, Stripes, StudioBackground, SunBurst, Swirl, Text, TriangularGrid, Truchet, VideoTexture, Voronoi, WaveletNoise, Weave, WebcamTexture, WorleyNoise - **Transitions** (13): BarnDoors, BlockDissolve, CheckerWipe, DiamondWipe, IrisWipe, LinearWipe, NoiseDissolve, PagePeel, RadialWipe, RandomBars, RippleWipe, SliceWipe, VenetianBlinds - **Distortions** (22): BarShift, Bend, Bulge, ConcentricSpin, CornerPin, DisplacementMap, Flip, FlowField, FlutedGlass, Form3D, GlassTiles, Kaleidoscope, Mirror, Perspective, PolarCoordinates, RectangularCoordinates, Repeater, Spherize, Stretch, Surface3D, Twirl, WaveDistortion - **Interactive** (16): Boids, ChromaFlow, CursorRipples, CursorTrail, Fog, GridDistortion, InkFlow, Liquify, MagneticFilings, ParticleFlow, PixelSort, PixelThrow, ReactionDiffusion, Shatter, Smoke, SmokeFlow - **Adjustments** (14): BrightnessContrast, Duotone, Exposure, FilmStock, Grayscale, HueShift, Invert, Posterize, Saturation, Sharpness, Solarize, Tint, Tritone, Vibrance - **Shape Effects** (19): BrushedMetal, CarbonFiber, Chrome, Crystal, Emboss, Frost, Glass, Goo, Heatmap, Hologram, Holographic, LightEdge, LiquidMetal, Neon, Particles, Plastic, SmokeFill, ThinFilm, Water - **Utilities** (1): Group ## Best Practices for AI Generation 1. **Start with Generative Components**: Use components like SolidColor, Circle, Blob, gradients, or noise patterns as textures 2. **Stack Effects Logically**: Apply effects in order (e.g., distortion → blur → color grading) 3. **Respect requiresChild Constraint**: Effects that require children MUST either have one or more generative children in their children array, OR if they have no nested children, they will apply to all proceeding sibling effects 4. **Use Unique IDs**: Generate unique IDs following the pattern shown above 5. **Validate Ranges**: Ensure numeric values fall within specified min/max ranges 6. **Color Format**: Use hex colors (#rrggbb) or "transparent" 7. **Position Format**: Use objects like {x: 0.5, y: 0.5} where values are 0-1 8. **Consider Blend Modes**: Use appropriate blend modes for layering effects 9. **Test Masking**: Use maskSource to reference other component IDs for creative effects ## Common Use Cases - **Glowing Effects**: Combine Glow with shapes (Circle, Blob) and add ChromaticAberration - **Retro Aesthetics**: Use CRTScreen, FilmGrain, or Halftone with appropriate color grading - **Abstract Backgrounds**: Layer SimplexNoise with gradients and blend modes - **Text Effects**: Apply effects like Glow, Outline, or distortions to text textures - **Animated Patterns**: Use time-based components like FloatingParticles, Ripples, or WaveDistortion - **Psychedelic**: Combine ChromaFlow, Swirl, HueShift with high intensity values --- Generated by the Shader build system