Large serif letters filled with a photograph that drifts slowly inside them as the page scrolls, the picture showing through the type.
The import and the props worth knowing about, in one place.
import { Text10 } from "@/components/beste/component/text10";
<Text10
as="h1"
text="Breathe"
image={{ src: "/photos/hills.jpg", alt: "Fog over green hills" }}
drift={30} // percent the photo travels while scrolling
className="font-serif text-9xl"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text10 } from "@/components/beste/component/text10";
<Text10
text="Breathe"
image={{"src":"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1200&h=800&fit=crop"}}
as="h2"
className="px-6 text-center font-serif text-6xl font-normal leading-none tracking-[-0.03em] md:text-7xl"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Scroll the page | The photograph travels inside the letters; the type itself never moves. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | Short, bold text; the photograph shows through the letters |
image* | { src: string; alt?: string } | — | The photograph that fills the letters |
as | "h1" | "h2" | "h3" | "p" | "span" | — | |
drift | number | — | How far the photograph drifts inside the letters as the page scrolls, in percent |
className | string | — |
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.
Short text whose characters arrive one by one out of a light blur, for eyebrows, labels and single words. The element keeps the whole string as its accessible name.
Progressrarelyfeelslikeprogresswhileitishappening.Sometimesitisshowingup.
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.
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.
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.
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.