A line of text set around a circle that turns slowly, with room in the middle for an initial, an icon or a short word. A seal for corners, footers and hero edges.
The import and the props worth knowing about, in one place.
import { Text18 } from "@/components/beste/component/text18";
<Text18 text="Altair · Lisbon · since 2019 · " size={180} className="text-sm uppercase tracking-[0.3em]">
<span className="font-serif text-3xl">A</span>
</Text18>
<Text18
text="Book a first call · Book a first call · "
size={140}
duration={16} // seconds per turn, 0 holds still
direction="counter"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text18 } from "@/components/beste/component/text18";
<Text18
text="Altair · Lisbon · since 2019 · "
size={180}
className="text-sm uppercase tracking-[0.3em] text-foreground"
children={{"type":"span","key":null,"ref":null,"props":{"className":"font-serif text-3xl","children":"A"}}}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The line that runs around the circle; end it with a separator so the loop reads cleanly |
size | number | — | Diameter in pixels |
duration | number | — | Seconds for one full turn; 0 keeps it still |
direction | "clockwise" | "counter" | — | Turn clockwise (default) or counter-clockwise |
children | ReactNode | — | Something to sit in the middle, e.g. an icon or a short word |
className | string | — |
A sentence that corrects itself: a line is drawn through the old word from left to right, and the better word settles in beside it out of a soft blur.
Lines of text that rise into view out of their own clipped rows, one after another, the way a heading is unmasked line by line.
A sentence whose one word takes turns: each candidate blurs up into place as the last blurs out, on a timer that stops when reduced motion is preferred.
A single line of text that runs across its container without end, fading at both edges and pausing under the pointer. Small caps for announcements, tracked serif for statements.