Sand textPro
A headline made of sand that pours into the letters, crumbles where the cursor digs, and heals itself.
Live · keyboard ready
Dunes
- A hero headline or section title that should be fun to touch.
- Short words that change on a selection, like a product name or theme.
- Body copy or long headings; use in-view-title or text-reveal.
- Text that must stay readable while people interact near it, like form labels.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { SandText } from "@/components/arc/sand-text/sand-text"; export function Hero() { return <SandText as="h1" text="Dunes" />;}SandText
A headline made of sand. Grains pour in and pack into the letters, the pointer digs through them and throws grains that tumble and pile, and at rest the letters heal while the extra sand drifts away. Changing the text collapses the old word into sand.
PropTypeDefaultDescription
textRequiredstring–The text to form. Keep it to one short line. Changing it collapses the old word and pours the new one.grainnumber2Grain size in CSS px.radiusnumber14Radius the pointer digs through, in CSS px.palettestring[]–Grain colors. Each grain picks one and varies it slightly. Defaults to the text color.as"h1" | "h2" | "h3" | "p""h2"Element for the visually hidden text.classNamestring–Extra class on the root. Set font-size here to size the letters.styleCSSProperties–Inline styles on the root.- The real text is rendered in a visually hidden heading, so screen readers and search read it as text.
- The canvas is aria-hidden. Digging is decorative and never removes the text from the accessibility tree.
- Letters fill bottom first like jars. Dug grains fly with the pointer's velocity and settle with a falling sand automaton.
- Grains that come to rest inside a letter stick again, missing grains pour back in once the pointer rests, and loose sand outside the letters drifts away.
- A new word turns the old letters loose, so the old text collapses while the new one pours in.
- Reduced motion shows the letters formed, turns digging off, and swaps words instantly.
- The grid is derived from the box size and the text is fitted to 94 percent of the width, so it works at 320px.
- Touch: dragging a finger digs; vertical scroll still works.
- One grid cell per grain, drawn as a small ImageData scaled up without smoothing. A 700px wide headline is about 50,000 cells.
- The loop sleeps once every grain has settled and the pointer is gone.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for one short headline. Size it with font-size on className; the box is 1.55em tall to leave room for piles.
- Pass palette for tinted sand, but the default text color matches Arc surfaces in both themes.
The full library index for assistants is at /llms.txt.