Loading hero…

@crazygl/rotating-text-badge

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.

React

Font

#badge

#sticker

#typography

Usage

import RotatingTextBadge from '@crazygl/hero-rotating-text-badge';

export default function Hero() {
  return (
    <RotatingTextBadge
      heading="new drop"
      subheading="available now"
      badgeText="FRESH · DROP · 26 · "
      badgeIcon="star"
    />
  );
}

Customise

Content — heading, subheading, badgeText (orbits the rim), badgeIcon (star / arrow / spark / none / any word).
Motion — rotationSpeed (s/turn), badgeSize, badgeTextGap (rim text inset).
Colours — textColor, subColor, badgeColor, badgeTextColor, fontSize, headingFontFamily, headingFontWeight.
Backdrop — transparentBackground, bgColor.

Best for

Product / streetwear drops and limited-edition launches.
Promo and announcement banners ("new", "sale", "available now").
Playful brand and portfolio hero sections.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-rotating-text-badge

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 RotatingTextBadge from '@crazygl/hero-rotating-text-badge';

export default function Landing() {
  return (
    <RotatingTextBadge />
  );
}

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 RotatingTextBadge from '@crazygl/hero-rotating-text-badge';

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

Similar heroes

Live customizer