Arc Text React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ArcText from "./ArcText";

export default function Example() {
  return (
    <ArcText
      text={"DESIGNED TO FEEL DIFFERENT · MADE TO MOVE · "}
      radius={100}
      fontSize={18}
      letterSpacing={4}
      color={"#dfc6a6"}
      speed={30}
      reverse={false}
      paused={false}
      children={"↗"}
      style={{
        "fontSize": 70,
        "color": "#e8d8c2"
      }}
    />
  );
}

Using Arc Text

Use a short phrase that fits the circular path. Increase radius or reduce fontSize and letterSpacing if the final letters are clipped.

Place a logo or icon in children to keep it stationary at the centre. The paused prop stops the outer text without changing the layout.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text placed along the circular path; keep its length within the circumference for the chosen size.
radius	number	No	110	Text path radius in SVG units.
fontSize	number	No	18	Circular text size in SVG units.
letterSpacing	number	No	4	Letter spacing in SVG units.
color	string	No	"#e5d0b6"	Circular text colour.
speed	number	No	30	Revolution duration in seconds.
reverse	boolean	No	false	Reverse the rotation direction.
paused	boolean	No	false	Pause the rotation.
children	ReactNode	No	undefined	Optional content in the centre. It does not rotate.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.