Static Type
Web (React)
Serif display type that tears into horizontal static, harder when you hover it.
Drawn on a canvas in the Modus heading face and the foreground ink, each frame shifts pixel rows sideways like a weak broadcast signal. Reduced motion draws a single still frame.
Modus
Installation
CLI
npx @modus-ui/cli add static-typeManual
- Copy the code from the component tab.
- Create a file at
components/ui/static-type.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | any | - | - |
| fontSize | string | "clamp(3rem, 8vw, 6rem)" | - |
| fontWeight | number | 400 | - |
| fontFamily | string | "" | - |
| color | string | "hsl(var(--foreground))" | - |
| enableHover | boolean | true | - |
| baseIntensity | number | 0.12 | - |
| hoverIntensity | number | 0.6 | - |
Comments