TextProNew
Swoosh Text
Letters with depth, like cut metal. The extrusion follows the cursor and letters dip and spring back under it.
Customize
accent
face
Based on Swoosh Text (MIT license) · Terms of use
Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | "Extruded" | Heading text. |
| as | 'div' | 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | "div" | HTML tag, e.g. h1 for a heading. |
| depth | number | 12 | Layers behind each letter, from 6 to 16. |
| length | number | 0.2 | Extrusion depth in em. |
| accent | string | "#a3a3a3" | Color of the extrusion: near layers take it, far ones fade to a dark shade of it. |
| face | string | "#fafafa" | Color of the letter face. |
| className | string | — | Classes for the wrapper. |
Dependencies
2 required packages
npm install clsx tailwind-merge