Flowing responsive ribbons/cursor trail driven by physics and pointer motion.
Every prop is wired to the controls underneath. Move the pointer across the stage and the ribbons chase it.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | ['#5227FF'] | An array of color strings to be used for the ribbons. |
baseSpring | number | 0.03 | Base spring factor for the physics controlling ribbon motion. |
baseFriction | number | 0.9 | Base friction factor that dampens the ribbon motion. |
baseThickness | number | 30 | The base thickness of the ribbons. |
offsetFactor | number | 0.05 | A factor to horizontally offset the starting positions of the ribbons. |
maxAge | number | 500 | Delay in milliseconds controlling how long the ribbon trails extend. |
pointCount | number | 50 | The number of points that make up each ribbon. |
speedMultiplier | number | 0.6 | Multiplier that adjusts how fast trailing points interpolate towards the head. |
enableFade | boolean | false | If true, a fade effect is applied along the length of the ribbon. |
enableShaderEffect | boolean | false | If true, an additional sine-wave shader effect is applied to the ribbons. |
effectAmplitude | number | 2 | The amplitude of the shader displacement effect. |
backgroundColor | number[] | [0, 0, 0, 0] | An RGBA array specifying the clear color for the renderer. |
Keyboard shortcuts and ARIA behavior.