A headline of glyph sand you can slice; cut pieces fall, shatter and pour back
| Name | Type | Default | Description |
|---|---|---|---|
text | string | "MADE TO MOVE" | The headline, built from grains. It wraps and scales to fit the container; screen readers get the plain text. |
fontSize | number | 200 | Largest font size in pixels; the text shrinks to fit. |
fontWeight | number | 800 | Weight of the letter shapes. Heavier weights hold more grains. |
fontFamily | string | inherited | Font for the letter shapes. Leave unset to use the page font. |
lineHeight | number | 1 | Line height for wrapped headlines. |
colors | [string, string] | ["#FFFFFF", "#B19EEF"] | Colour of the grains standing in the letters and colour they turn while they are loose sand. |
grain | "glyph" | "dot" | "square" | "glyph" | Shape of each grain: a character from charset, a dot or a square. |
charset | string | letters, digits and symbols | Characters used for glyph grains. |
grainSize | number | 7 | Size of each grain in pixels. Smaller grains give finer letters and a softer pour. |
grainScale | number | 1 | How much of its cell each grain fills. |
gravity | number | 1 | Strength of gravity, from 0.1 (drifting) to 4 (heavy). |
anchor | "top" | "bottom" | "top" | Where each letter is held. Letters hang from their top edge, so cutting through one drops everything below the cut; with bottom they stand on their baseline and the part above the cut falls. |
cut | boolean | true | Swiping the pointer through the letters slices them. Grains on the blade's path spray off in the swipe's direction, and any piece the cut separates from its anchor falls as one solid chunk, tumbling until it shatters into sand. |
cutWidth | number | 10 | Width of the blade in pixels. |
throwForce | number | 1 | How hard the swipe throws sliced grains and falling pieces, from 0 to 3. |
clickToCollapse | boolean | true | Clicking (or pressing Enter) knocks every letter loose, spreading out from where you clicked. The letters tumble down as solid pieces and burst into sand, then pour back up into the headline. Click again while the sand rests to rebuild early. |
collapseSpeed | number | 1400 | Speed the collapse spreads from the click, in pixels per second. |
erosion | number | 0.1 | Grains that weather off exposed edges on their own and trickle down, from 0 (none) to 1. |
healDelay | number | 1.8 | Seconds a loose grain rests before it returns home. |
holdTime | number | 0.8 | Seconds the collapsed sand rests before the headline rebuilds. |
rebuild | "sweep" | "rise" | "random" | "sweep" | Order the sand returns in: left to right, top of the pile first, or at random. |
rebuildDuration | number | 0.7 | Seconds each grain takes to fly home. |
paused | boolean | false | Freeze the sand. Reduced-motion users always get the still headline. |
quality | number | 1 | Resolution scale from 0.25 to 1. |
ref | { collapse, rebuild } | — | collapse(x, y) crumbles the headline from a point given as fractions of the width and height; rebuild() brings the sand home. |
children | ReactNode | — | Content placed over the sand. |
className | string | — | Classes for the root element. It fills its parent, with a 240px minimum height. |
style | CSSProperties | — | Inline styles for the root element. |
textstringThe headline, built from grains. It wraps and scales to fit the container; screen readers get the plain text.
"MADE TO MOVE"fontSizenumberLargest font size in pixels; the text shrinks to fit.
200fontWeightnumberWeight of the letter shapes. Heavier weights hold more grains.
800fontFamilystringFont for the letter shapes. Leave unset to use the page font.
inheritedlineHeightnumberLine height for wrapped headlines.
1colors[string, string]Colour of the grains standing in the letters and colour they turn while they are loose sand.
["#FFFFFF", "#B19EEF"]grain"glyph" | "dot" | "square"Shape of each grain: a character from charset, a dot or a square.
"glyph"charsetstringCharacters used for glyph grains.
letters, digits and symbolsgrainSizenumberSize of each grain in pixels. Smaller grains give finer letters and a softer pour.
7grainScalenumberHow much of its cell each grain fills.
1gravitynumberStrength of gravity, from 0.1 (drifting) to 4 (heavy).
1anchor"top" | "bottom"Where each letter is held. Letters hang from their top edge, so cutting through one drops everything below the cut; with bottom they stand on their baseline and the part above the cut falls.
"top"cutbooleanSwiping the pointer through the letters slices them. Grains on the blade's path spray off in the swipe's direction, and any piece the cut separates from its anchor falls as one solid chunk, tumbling until it shatters into sand.
truecutWidthnumberWidth of the blade in pixels.
10throwForcenumberHow hard the swipe throws sliced grains and falling pieces, from 0 to 3.
1clickToCollapsebooleanClicking (or pressing Enter) knocks every letter loose, spreading out from where you clicked. The letters tumble down as solid pieces and burst into sand, then pour back up into the headline. Click again while the sand rests to rebuild early.
truecollapseSpeednumberSpeed the collapse spreads from the click, in pixels per second.
1400erosionnumberGrains that weather off exposed edges on their own and trickle down, from 0 (none) to 1.
0.1healDelaynumberSeconds a loose grain rests before it returns home.
1.8holdTimenumberSeconds the collapsed sand rests before the headline rebuilds.
0.8rebuild"sweep" | "rise" | "random"Order the sand returns in: left to right, top of the pile first, or at random.
"sweep"rebuildDurationnumberSeconds each grain takes to fly home.
0.7pausedbooleanFreeze the sand. Reduced-motion users always get the still headline.
falsequalitynumberResolution scale from 0.25 to 1.
1ref{ collapse, rebuild }collapse(x, y) crumbles the headline from a point given as fractions of the width and height; rebuild() brings the sand home.
—childrenReactNodeContent placed over the sand.
—classNamestringClasses for the root element. It fills its parent, with a 240px minimum height.
—styleCSSPropertiesInline styles for the root element.
—