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.