Characters scale / warp interactively based on pointer pressure zone.
Move the pointer across the word. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Compressa" | Text content that will be displayed and animated. |
fontFamily | string | "Roboto Flex" | Name of the variable font family. |
fontUrl | string | Google Fonts Roboto Flex URL | URL for the variable font stylesheet (needed). The component adds it to the document head once. |
flex | boolean | true | Whether the characters are spaced using flex layout. |
scale | boolean | false | If true, vertically scales the text to fill its container height. |
alpha | boolean | false | If true, applies an opacity effect based on cursor distance. |
stroke | boolean | false | If true, adds a stroke effect around characters. |
width | boolean | true | If true, varies the variable-font "width" axis. |
weight | boolean | true | If true, varies the variable-font "weight" axis. |
italic | boolean | true | If true, varies the variable-font "italics" axis. |
textColor | string | "#FFFFFF" | The fill color of the text. |
strokeColor | string | "#FF0000" | The stroke color that will be applied to the text when "stroke" is set to true. |
className | string | "" | Additional class for styling the <h1> wrapper. |
minFontSize | number | 24 | Sets a minimum font-size to avoid overly tiny text on smaller screens. |
Keyboard shortcuts and ARIA behavior.