Slow Wave

About this component

Slow Wave

A word whose letters rise and fall on one slow, continuous swell, each a beat behind the last, like a line of type resting on water. Stays still when reduced motion is preferred.

Usage

The import and the props worth knowing about, in one place.

import { Text12 } from "@/components/beste/component/text12";

<Text12 as="h1" text="Altair" className="font-serif text-9xl" />

<Text12
  text="breathe"
  amplitude={0.12}   // wave height in em
  period={6}         // seconds per swell
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
text*string—A short word or wordmark; its letters rise and fall on a slow, continuous wave
as"h1" | "h2" | "h3" | "p" | "span"—
amplitudenumber—Height of the wave in em (default 0.08)
periodnumber—Seconds for one full swell (default 4)
classNamestring—

More Text components

View all Text

Roomtobreathe.

A