About this component
Circle Text
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.
Usage
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"
/>Props
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 | — |
