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"
/>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 | — |