Ink Drying

Slow,onpurpose.

About this component

Ink Drying

Words that begin as soft, spread blots of ink, wide-set and out of focus, and dry into crisp, tightly set type one after another.

Usage

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

import { Text11 } from "@/components/beste/component/text11";

<Text11 as="h2" text="Slow, on purpose." className="font-serif text-6xl" />

<Text11
  as="h1"
  text="Come as you are."
  trigger="mount"
  stagger={0.15}      // seconds between words
  duration={2}        // seconds each word takes to dry
/>

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Slow,onpurpose.

Usage
import { Text11 } from "@/components/beste/component/text11";

<Text11
  text="Slow, on purpose."
  as="h2"
  className="px-6 text-center font-serif text-2xl font-normal leading-[1.1] tracking-[-0.02em] text-foreground md:text-3xl"
/>

Props

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

PropTypeDefaultDescription
text*stringThe text; each word begins as a soft, spread blot of ink and dries into crisp type
as"h1" | "h2" | "h3" | "p" | "span"
trigger"view" | "mount"
delaynumber
staggernumber
durationnumber
classNamestring

More Text components

View all Text
listened to

Highlight Sweep

An inline phrase that gets a soft highlight swept in behind it from the left when it scrolls into view, like a marker drawn across the words, without the text moving.

Typewriter

Text typed out one character at a time behind a thin caret that keeps a slow pulse once the line is finished. The element keeps the whole string as its accessible name.

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.

The fog lifts a little later each morning.

Fog Clearing

Text hidden behind fog that clears across it from left to right along one soft edge, so the words emerge in reading order without moving at all.

No forms, no commitment, no need to know what you want yet. Forty minutes to see whether this feels like a place you could talk.

Soft Blur In

A paragraph or heading that arrives as one piece, rising a few pixels out of a soft blur when it scrolls into view. The quiet companion to the word stagger, for body copy and descriptions.

Progressrarelyfeelslikeprogresswhileitishappening.Sometimesitisshowingup.

Scroll Highlight

A passage whose words brighten one after another in reading order as it scrolls through the viewport, and dim again on the way back, like a finger following the line.