Letters Settling

About this component

Letters Settling

A short word whose letters begin scattered and slightly turned, then drift home on a soft spring one after another, like type settling onto a page.

Usage

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

import { Text14 } from "@/components/beste/component/text14";

<Text14 as="h1" text="settle" className="font-serif text-9xl" />

<Text14
  text="Altair"
  spread={1.4}        // how far the letters start from home, in em
  stagger={0.08}
  trigger="mount"
/>

Props

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

PropTypeDefaultDescription
text*string—Short text; its letters start scattered and drift home one by one
as"h1" | "h2" | "h3" | "p" | "span"—
trigger"view" | "mount"—
delaynumber—
staggernumber—
spreadnumber—How far the letters start from home, in em (default 0.9)
classNamestring—

More Text components

View all Text

Notheard.

Breathe