Sandcast
Headline cast in fine gold sand: the text is sampled into grains that scatter with velocity and curl under the cursor, then trickle back home with staggered springs and a settling drift.
canvaspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/sandcastProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "SANDCAST" | Headline cast in sand (also emitted as sr-only text). |
| gap | number | 3 | Sampling gap in px between grains — smaller = denser, more particles. |
| particleSize | number | 1.7 | Base grain size in px (each grain jitters around it). |
| colors | string[] | warm golds | Grain palette, assigned per particle. Keep it a narrow single-hue ramp — the default is fine gold sand. |
| scatterRadius | number | 100 | Pointer repulsion radius in px. |
| strength | number | 1 | Pointer repulsion strength multiplier. |
| stiffness | number | 1 | Return-spring stiffness multiplier — how eagerly grains trickle home. |
| speed | number | 1 | Simulation-rate multiplier. |
| paused | boolean | false | Freeze the simulation (grains hold their current positions). |
| seed | number | 5 | Deterministic seed for grain jitter and the entrance drift. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children" | "color"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.