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.