Text Pressure
Hello!
Customize
Text Color
Stroke Color
Flex
Alpha
Stroke
Width
Weight
Italic
Props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | "Hello!" | Text content that will be displayed and animated. |
fontFamily | string | "" | Name of the variable font family. |
fontUrl | string | URL to a .woff2 or .ttf file | URL for the variable font file (needed) |
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 | "#FFFFFF" | The stroke color when "stroke" is true |
class | string | "" | Additional class for styling the wrapper. |
minFontSize | number | 24 | Minimum font-size to avoid overly tiny text. |
Dependencies
solid-js