Text on Path

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { TextOnPath, TextRing } from '@/components/effects/text-on-path/text-on-path'

export function Hero() {
  return (
    <>
      {/* The parent sets the height; the text fills it. background="transparent" lets your page show through. */}
      <div className="h-[420px]">
        <TextOnPath preset="Swiss" text="Form follows the curve" path="wave" speed={0.8} background="transparent" />
      </div>

      {/* Any shape: wave, circle, spiral, infinity, arc, or your own SVG path d string */}
      <div className="h-[420px]">
        <TextOnPath preset="Brass" path="custom" customPath="M10 200 C 120 20, 240 20, 300 160 S 480 300, 590 120" secondLine={false} />
      </div>

      {/* Follow the page scroll instead of the clock */}
      <div className="h-[320px]">
        <TextOnPath preset="Editorial" path="arc" scrollDriven />
      </div>

      {/* A rotating badge with your own icon in the middle */}
      <TextRing preset="Neon Script" text="Scroll down" size={150}>
        <ArrowDownIcon />
      </TextRing>
    </>
  )
}

// Every look prop (text, path, speed, fontFamily, color, accent, glow, bend, ...) works on TextOnPath, TextRing and
// <TextOnPathShowcase />, which is the poster above. Extra props override the preset.

<TextOnPath preset="Neon Script" text={"Typography is the voice of the page"} />

• Editorial
• Neon Script
• Swiss
• Brass
• Mono Wire

What the command adds to your project, and where.

• components/effects/text-on-path/text-on-path.tsx

  The component.

• components/effects/text-on-path/path-text.tsx

  The component.

• components/effects/text-on-path/ring.tsx

  The component.

• components/effects/text-on-path/showcase.tsx

  The component.

• components/effects/text-on-path/looks.ts

  The component.

• components/effects/text-on-path/geometry.ts

  The component.

• components/effects/text-on-path/hooks.ts

  The component.

• components/effects/text-on-path/parts.tsx

  The component.

• components/effects/text-on-path/stage-styles.ts

  The component.

• lib/effect-runtime.ts

  Shared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.

• The words are real SVG text on a textPath: crisp at any size, selectable, and named for screen readers by an aria-label on the graphic (the repeats are not read out).
• The text repeats to fill the path, measured with getTotalLength, and slides along it by animating startOffset by exactly one repeat, so the loop has no seam. Closed shapes (circle, infinity) adjust the tracking a hair so a whole number of repeats fits.
• The pointer bends the path toward it with a smooth falloff; each control point is a spring, so the line leans in, overshoots a little and settles back. Hovering the stage eases the marquee down. bend={0} turns the bend off.
• scrollDriven ties the offset to the page scroll (scroll down and the text runs one way, scroll up and it runs back), smoothed so it never jumps.
• The second line sits on a parallel offset path in the opposite voice (serif becomes small sans capitals, sans becomes mono, mono becomes serif italic) and drifts against the first.
• TextRing sets words on a circle sized so a whole number of repeats closes it, spins it around a centre slot (an icon, a logo, an image) and slows on hover. filled gives a solid stamp.
• Under prefers-reduced-motion everything is a still frame: no marquee, no spin, no bend. paused={true} does the same on request.
• The effect renders deterministic markup on the server and measures after mount, so there is no hydration mismatch. It pauses off screen and in background tabs.

See all effects