Components / Text
Text wave
Use it when a sentence should be read word by word: words land in light grey one after another, then a colour wave runs left to right turning each word accent, then ink.
Install
With this registry set in hyperframes.json (see the docs):
npx hyperframes add text-waveUse 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-wave" data-composition-src="compositions/text-wave.html"
data-start="0" data-duration="2.4" 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 | Generate any brand asset | Three to eight words. |
| align | left, center, right | left | Where the text sits. |
| size | number | 10 | Font size as percent of the host height. |
| accent | color | #7b2f8e | Focus word colour. |
| grey | color | #c9c4c8 | Colour on landing. |
| greyDark | color | #6a6467 | Colour before the wave arrives. |
| 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. |
| wordInterval | number | 0.16 | Seconds between landings. |
| waveStep | number | 0.13 | Seconds between focus moves. |
| exit | fade, none | fade | fade or none. |