Snake Trail
A living kinematic snake with sine-wave slither follows your pointer.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color | string | #a855f7 | Body color of the snake |
| segmentCount | number | 32 | Number of body segments — more = longer snake |
When to Use
Perfect for experimental brands, bio-tech sites, gaming, and any context where a living creature cursor adds memorable personality.
Best Practices
Keep segmentCount between 20-48. The snake uses mix-blend-screen so it glows beautifully over dark backgrounds. Desktop only — requires pointer:fine.
Why This Component Matters
A kinematic snake is one of the most technically impressive cursor effects — it demonstrates organic physics that static cursors simply cannot achieve.
FAQ
QDoes it work on mobile?
No — it requires a fine pointer (mouse). On touch devices the snake is hidden and the hero section renders normally.
QWhy does the head glow lime green?
The head uses a contrasting #a3e635 color so it's visually distinct from the body. This can be changed 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.