CrazyGLSpin 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.
Usage
import SpinTextCircleFx from '@crazygl/hero-spintextcirclefx';
<SpinTextCircleFx
ring1Text="REACT · BITS · COMPONENTS · "
ring2Text="DESIGN — MOTION — CODE — "
ring1Speed={2}
ring2Speed={-1}
/>Customise
- Ring 1 (outer):
ring1Text,ring1Color,ring1FontSize,ring1Speed(turns/min, negative reverses). - Ring 2 / Ring 3:
ring2Enabled/ring3Enabledtoggles plus matching text, colour, font size and speed. - Hover:
hoverMode—noneorpause(pauses all rings on pointer over). - Centre badge:
showCenterDisc,centerDiscType(text/image),centerText,centerImage,centerSize,discColor,centerTextColor. - Typography:
headingFontFamily,headingFontWeight. - Backdrop:
transparentBackground,bgColor.
Best for
- Brand and studio landing badges with a high-fashion, editorial spin.
- "New / available for work" rotating seals around a logo.
- Looping marquee callouts where opposing ring directions add motion depth.
One command, zero config.
npm install @crazygl/hero-spintextcirclefxImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import SpinTextCircleFX from '@crazygl/hero-spintextcirclefx';
export default function Landing() {
return (
<SpinTextCircleFX />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import SpinTextCircleFX from '@crazygl/hero-spintextcirclefx';
export default function Page() {
return (
<section>
<SpinTextCircleFX
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
