Crystalline
Crystal shards burst from the cursor on fast movement, fall with gravity.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color | string | #ffffff | Color of the crystal shards |
| velocityThreshold | number | 5 | Cursor speed required to spawn shards — lower = more sensitive |
When to Use
Ideal for luxury brands, tech showcases, and any site where you want an 'explosive' cursor that rewards fast, confident movement.
Best Practices
Keep velocityThreshold between 3-10. Lower values spawn shards more easily. Use light shard colors on dark backgrounds for maximum contrast.
Why This Component Matters
Velocity-triggered effects create a reward loop — users move faster to see more shards, naturally engaging more deeply with the page.
FAQ
QWhen do shards appear?
Only when cursor velocity exceeds the velocityThreshold. Slow movement produces nothing — fast movement shatters.
QDo shards have gravity?
Yes — shards fall downward and spin as they fade out.
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.