A headline cut into glass shards that assemble, crack under the cursor and shatter on click
| Name | Type | Default | Description |
|---|---|---|---|
text | string | "Shatter" | The headline. Use \n for line breaks. It is also rendered as hidden text for screen readers. |
fontFamily | string | "" | Font of the headline. Empty uses the font the component inherits, so it matches your page. |
fontWeight | number | 700 | Weight of the headline, from 100 to 900. |
fontSize | number | 0 | Size in pixels. 0 fits the headline to the component. |
letterSpacing | number | -0.02 | Tracking in em. |
lineHeight | number | 1.05 | Line height for multi-line headlines. |
align | "left" | "center" | "right" | "center" | Horizontal alignment of the headline. |
colors | [string, string] | ["currentColor", "currentColor"] | Front faces of the glass, as a gradient across the headline. currentColor follows your text colour and theme. |
accentColor | string | "#7B5CFF" | Back faces of the shards, seen only while they turn in the air. |
shardSize | number | 0.09 | Average shard size relative to the font size. |
irregularity | number | 0.6 | How uneven the fracture is, from 0 (even triangles) to 1 (mixed sizes and angles). |
crack | number | 0.6 | Strength of the hairline cracks that open under the cursor, from 0 to 1. |
crackRadius | number | 0.5 | Reach of the cracks around the cursor, in em. |
heal | number | 0.9 | Seconds for cracks to close again. |
shatter | boolean | true | Click or tap to shatter the letters you hit. |
shatterRadius | number | 0.55 | Size of the shattered area around the click, in em. Glass just outside it cracks without breaking. |
force | number | 1 | How far the shards burst outward. |
spin | number | 1 | How fast the shards tumble. |
depth | number | 1 | How far the shards fly toward the viewer. |
gravity | number | 0 | Pull on the flying shards. 0 keeps the burst suspended in the air before it implodes back. |
reassemble | number | 1.1 | Seconds the shards hang in the air before they fly back into the headline. |
stiffness | number | 0.55 | How hard the shards snap back into place, from 0 (slow drift) to 1 (snappy). |
glint | number | 0.8 | Light caught by tilted shards and the flash as each piece locks back in, from 0 to 2. |
intro | "assemble" | "drop" | "fade" | "none" | "assemble" | Entrance when the headline first scrolls into view: shards condensing into the word, dropping into place, or a soft fade. |
introDuration | number | 1.6 | Length of the entrance in seconds. |
autoplay | boolean | false | Shatter a random spot every few seconds while the pointer is away. |
autoplayInterval | number | 4 | Seconds between autoplay shatters. |
interactive | boolean | true | Respond to the pointer. Turn it off for a headline that only plays its entrance and autoplay. |
paused | boolean | false | Freeze all motion. |
quality | number | 1 | Render resolution multiplier, from 0.5 to 1. |
ref | { shatter, assemble } | — | shatter(x?, y?) breaks the headline at a point in pixels (or a random spot), assemble() replays the entrance. |
children | ReactNode | — | Content layered above the headline. |
className | string | — | Classes for the root element. It fills its parent and is at least 240px tall. |
style | CSSProperties | — | Inline styles for the root element. |
textstringThe headline. Use \n for line breaks. It is also rendered as hidden text for screen readers.
"Shatter"fontFamilystringFont of the headline. Empty uses the font the component inherits, so it matches your page.
""fontWeightnumberWeight of the headline, from 100 to 900.
700fontSizenumberSize in pixels. 0 fits the headline to the component.
0letterSpacingnumberTracking in em.
-0.02lineHeightnumberLine height for multi-line headlines.
1.05align"left" | "center" | "right"Horizontal alignment of the headline.
"center"colors[string, string]Front faces of the glass, as a gradient across the headline. currentColor follows your text colour and theme.
["currentColor", "currentColor"]accentColorstringBack faces of the shards, seen only while they turn in the air.
"#7B5CFF"shardSizenumberAverage shard size relative to the font size.
0.09irregularitynumberHow uneven the fracture is, from 0 (even triangles) to 1 (mixed sizes and angles).
0.6cracknumberStrength of the hairline cracks that open under the cursor, from 0 to 1.
0.6crackRadiusnumberReach of the cracks around the cursor, in em.
0.5healnumberSeconds for cracks to close again.
0.9shatterbooleanClick or tap to shatter the letters you hit.
trueshatterRadiusnumberSize of the shattered area around the click, in em. Glass just outside it cracks without breaking.
0.55forcenumberHow far the shards burst outward.
1spinnumberHow fast the shards tumble.
1depthnumberHow far the shards fly toward the viewer.
1gravitynumberPull on the flying shards. 0 keeps the burst suspended in the air before it implodes back.
0reassemblenumberSeconds the shards hang in the air before they fly back into the headline.
1.1stiffnessnumberHow hard the shards snap back into place, from 0 (slow drift) to 1 (snappy).
0.55glintnumberLight caught by tilted shards and the flash as each piece locks back in, from 0 to 2.
0.8intro"assemble" | "drop" | "fade" | "none"Entrance when the headline first scrolls into view: shards condensing into the word, dropping into place, or a soft fade.
"assemble"introDurationnumberLength of the entrance in seconds.
1.6autoplaybooleanShatter a random spot every few seconds while the pointer is away.
falseautoplayIntervalnumberSeconds between autoplay shatters.
4interactivebooleanRespond to the pointer. Turn it off for a headline that only plays its entrance and autoplay.
truepausedbooleanFreeze all motion.
falsequalitynumberRender resolution multiplier, from 0.5 to 1.
1ref{ shatter, assemble }shatter(x?, y?) breaks the headline at a point in pixels (or a random spot), assemble() replays the entrance.
—childrenReactNodeContent layered above the headline.
—classNamestringClasses for the root element. It fills its parent and is at least 240px tall.
—styleCSSPropertiesInline styles for the root element.
—