String Theory
An elastic thread trails your cursor like a snake through space.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color | string | #f472b6 | Color of the trailing string |
| trailLength | number | 20 | Number of points in the string — more points = longer tail |
When to Use
Great for creative portfolios, design tools, and any site that wants a fluid, organic cursor effect that doesn't overwhelm the content.
Best Practices
Keep trailLength between 10-30. Higher values create a longer, more serpentine string. Brightens to white on button hover automatically.
Why This Component Matters
The elastic string creates a sense of physical connection between cursor and pointer that feels genuinely tactile.
FAQ
QDoes it interact with hover states?
Yes — hovering the Get Started button brightens the string to white and thickens it.
QCan I use multiple colors?
The current implementation uses one stroke color. For multi-color gradient strings, modify the strokeStyle in source.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.