Components / Text
Text scatter
Use it when a line should feel thrown into place: words arrive from scattered offsets, each at its own size, height and blur, and converge onto one baseline with a small overshoot.
Install
With this registry set in hyperframes.json (see the docs):
npx hyperframes add text-scatterUse it in a composition
It fills whatever box you give it, so set the host element's size and position. Set values withdata-variable-values.
<div data-composition-id="text-scatter" data-composition-src="compositions/text-scatter.html"
data-start="0" data-duration="2.5" data-track-index="1"
style="position:absolute;left:0;top:0;width:1920px;height:1080px"></div>Variables
| Variable | Type | Default | What it changes |
|---|---|---|---|
| text | string | What would you like to create? | One line of words. |
| align | center, left, right | center | Where the text sits in the host. |
| size | number | 8 | Font size as percent of the host height. |
| spread | number | 1 | How far words start from rest, 0 to 2. |
| scaleMax | number | 2 | Largest starting scale of a word. |
| settle | number | 1 | Scale the aligned line holds before easing to 1 (1 = no settle). |
| exit | none, demote, fade | none | none, demote, fade. |
| grey | color | #9c969a | Colour of the demote exit. |
| ground | color | transparent | Background; transparent to overlay. |
| ink | color | #1a1418 | Resolved text colour. |
| font | font | "Instrument Serif",Georgia,serif | Display face. Instrument Serif ships with the component. |
| inAt | number | 0.04 | Seconds before the first word. |
| seed | number | 5 | Scatter pattern. |