CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/circular-text-pro

Circular Text Pro

Three concentric rings of text spinning at independent speeds, with a centred wordmark and accent dots — a fully composed badge.

ReactFont#circular#badge#typography

Usage

import CircularTextPro from '@crazygl/hero-circular-text-pro';

export default function Hero() {
	return (
		<CircularTextPro
			ring1Text="EST · 2026 · CRAZYGL · STUDIO · "
			centerText="PRO"
			ring2Reverse
		/>
	);
}

Customise

  • Content — ring1Text, ring2Text, ring3Text (each repeated around its circle) and centerText.
  • Speeds — ring1Speed, ring2Speed, ring3Speed (seconds per turn) and ring2Reverse to counter-rotate the middle ring.
  • Colours — per-ring colours, centerColor, plus headingFontFamily and headingFontWeight.
  • Backdrop — transparentBackground or a solid bgColor.

Best for

  • Brand badges, logo lockups and "est. / studio" marks.
  • Coming-soon and event landing pages wanting a kinetic seal.
  • Portfolio or agency sites needing a self-contained typographic centrepiece.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-circular-text-pro
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import CircularTextPro from '@crazygl/hero-circular-text-pro';

export default function Landing() {
  return (
    <CircularTextPro />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import CircularTextPro from '@crazygl/hero-circular-text-pro';

export default function Page() {
  return (
    <section>
      <CircularTextPro
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Spin Text Circle FX

Up to three concentric rings of text spinning around an optional centre badge or image. Each ring has its own text, colour and speed (negative speed reverses direction); the radii pack inward automatically based on font sizes.

Rotating Text Badge

A self-contained rotating sticker badge — text on the rim of a circle, an icon (or your own word) in the middle, next to a heading.

Rotating Text Pro

Slot machine with a 3D flip in X — the rotating word flips over a horizontal axis like a split-flap board.

Smart Typewriter Pro

Typewriter that only deletes the diverging tail between phrases — keeps shared prefixes intact and types only the new ending, like a writer correcting themselves.

Pro Text Type Effect

A pro-grade typewriter: cycles through multiple strings with variable per-character speed, fluid font sizing (clamp), per-line gradient fills, and a choice of cursor characters from block to slug to bar.

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.Live customizer

Circular Text Pro

Ring 1 speed (s/turn)28sRing 2 speed (s/turn)18sRing 3 speed (s/turn)12sReverse ring 2Ring 1 colourRing 2 colourRing 3 colourCentre colourFontWeight600Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.