proNew103 lines · framer-motion

Text Circular Badge

A seal that keeps turning. A full-width section pairing a headline with a spinning seal badge — its label running letter by letter around a ring, forever rotating around a still centre mark.

Use it for: A trust or craftsmanship cue next to a short statement — an 'original build' stamp, an edition mark, a certification badge.
Themes: Light + dark
License: Commercial use

Live

Stamped, not printed

A seal that keeps turning

The ring never stops; the words at its centre do all the standing still.

tsx

"use client";

import * as React from "react";
import { useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width kinetic text section: a headline next to a spinning seal badge
 * — its label running around a circle, letter by letter, forever rotating.
 */

export interface TextCircularBadgeProps {
  eyebrow?: string;
  headline?: string;
  subcopy?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Each character of the badge label is placed around a circle by computing its angle and translating it out to a fixed radius, then counter-rotating so it reads upright.
→The whole ring spins on a single CSS transform: rotate keyframe, direction set by direction (clockwise or counter-clockwise).
→The centre mark sits outside the spinning layer, so it stays visually still while the ring turns around it.
→rotateSeconds sets the seconds per full turn.
→prefers-reduced-motion renders the ring in a fixed position with no rotation.

Accessibility

✓The ring's individual characters are aria-hidden; a single sr-only span exposes the badge label as one string.
✓The centre glyph is decorative and aria-hidden.
✓Honours prefers-reduced-motion by stopping the spin.
✓Honours prefers-reduced-motion.