← All components
Motion / effect
Pointer Ribbons
Spring-driven colored trails with scoped pointer motion, retained actions and a quiet static fallback.
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Provide a sized parent for the primitive. The playground palette supports one to three colors; the primitive supports one to eight six-digit hex colors.
- One active animation loop per instance, DPR capped at2 and up to128 points per trail. Active frame delta is capped at50ms; hidden, offscreen, paused or zero-sized canvases stop scheduling. These bounds are not measured GPU or physical-device FPS claims.
- Reduced motion and coarse pointers use static original artwork and allocate no renderer. Replay does not override these preferences.
- Children and local actions survive appearance changes, Pause and decorative Replay. Reset and preset selection restore sample state. No service connection or global pointer interception.
- Seeded variation preserves the pinned optical shaders and spring/polyline character. Geometry, shaders, programs, uniform cache and owned WebGL context are released on disposal or renderer failure.
- The documented baseSpring, baseFriction, baseThickness, offsetFactor, maxAge, pointCount, speedMultiplier, effectAmplitude, enableFade, enableShaderEffect names are authoritative. Short engine names remain compatible aliases; a supplied public field takes precedence, with invalid/accessor fields using defaults without invocation.
React19.2Modern WebGL browsers
React Bits — David Haz · MIT with Commons Clause; full notice retained. Used with explicit permission.
OGL · Unlicense; complete notice retained.
Geist · SIL Open Font License 1.1; bundled font and notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | ["#5227FF"] | One to eight six-digit hex colors. Invalid palettes fall back to a purple trail; playground wrappers expose one to three. |
baseSpring | number | 0.03 | Finite 0.01–0.3 spring stiffness; bounded inputs and documented defaults. Public names take precedence over short engine aliases. |
baseFriction | number | 0.9 | Finite 0.5–0.98 retained velocity; bounded inputs and documented defaults. Public names take precedence over short engine aliases. |
baseThickness | number | 30 | Finite 1–100 CSS-pixel thickness; bounded inputs and documented defaults. Public names take precedence over short engine aliases. |
offsetFactor | number | 0.05 | Finite 0–0.3 spacing; bounded inputs and documented defaults. Public names take precedence over short engine aliases. |
maxAge | number | 500 | Finite 80–2000ms tail age; bounded inputs and documented defaults. Public names take precedence over short engine aliases. |
pointCount | number | 50 | Finite 8–128 rounded integer points; bounded inputs and documented defaults. Public names take precedence over short engine aliases. |
speedMultiplier | number | 0.5 | Finite 0.1–2 tail interpolation speed; bounded inputs and documented defaults. Public names take precedence over short engine aliases. |
effectAmplitude | number | 2 | Finite 0–4 wave displacement amplitude; bounded inputs and documented defaults. Public names take precedence over short engine aliases. |
seed | number | 1 | Finite uint32 deterministic variation seed; bounded inputs and documented defaults. Public names take precedence over short engine aliases. |
enableFade | boolean | false | Enables the preserved fragment-shader tail fade. |
enableShaderEffect | boolean | false | Enables the preserved vertex-shader wave displacement. |
paused | boolean | false | Stops decorative scheduling while preserving children and their actions. |
replayToken | number | 0 | A changed token resets only trail geometry; cannot override reduced motion or coarse input. |
children | ReactNode | undefined | Accessible interactive content retained across decoration changes. Parent must have a real height. |
className | string | undefined | Additional class on the sized effect root. |