Modus UI

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
Modus / Static Type

Installation

CLI

npx @modus-ui/cli add static-type

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/static-type.tsx.
  3. Paste the code.

Usage

tsx
import { StaticType } from "@/components/ui/static-type";

export default function Example() {
  return <StaticType>Modus</StaticType>;
}

Props

PropTypeDefaultDescription
childrenany--
fontSizestring"clamp(3rem, 8vw, 6rem)"-
fontWeightnumber400-
fontFamilystring""-
colorstring"hsl(var(--foreground))"-
enableHoverbooleantrue-
baseIntensitynumber0.12-
hoverIntensitynumber0.6-

Comments

  • No comments yet.