Text Circle Scroll

1'use client';
2 
3import * as React from 'react';
4import { motion, useScroll, useTransform, useSpring } from 'motion/react';
5import { cn } from '@/lib/utils';
6 
7export type TextCircleItem = string | React.ReactNode;
8 
9export type TextCircleScrollProps = {
10  /** Items placed on the ring in order (clockwise by default). */
11  items: TextCircleItem[];
12 
13  /** Radius in px (distance from center to baseline of items). */
14  radius?: number;
15 
16  /** Empty hole diameter in px (purely visual helper class on container). */
17  innerGap?: number;
18 
19  /** Angle offset in degrees for the first item. */
20  startAngle?: number;
21 
22  /** Clockwise (true) or counter-clockwise (false) item order. */
23  clockwise?: boolean;
24 
25  /** If true, connects rotation to page scroll progress. */
26  rotateOnScroll?: boolean;
27 
28  /**
29   * How many degrees the ring rotates from top->bottom of the page when
30   * rotateOnScroll = true. 360 = one full turn.
31   */
32  scrollDegrees?: number;
33 
34  /** Constant rotation (deg/s). Can be negative for reverse. */
35  autoSpinDegPerSec?: number;
36 
37  /** Springiness for scroll rotation. Set 0 to disable spring. */
38  springStiffness?: number;
39 
40  /** Container className */
41  className?: string;
42 
43  /** Ring element className */
44  ringClassName?: string;
45 
46  /** Per-item className */
47  itemClassName?: string;
48 
49  /** Typography class for items (e.g. 'text-lg font-serif') */
50  textClassName?: string;
51 
52  /** If provided, constrain the component height (useful in docs/examples). */
53  height?: number | string;
54};
55 
56/**
57 * TextCircleScroll
58 * - Places any text/nodes around a circle
59 * - Rotates with scroll (and/or auto-spin)
60 * - Purely presentational; does not manage layout outside itself
61 */
62export default function TextCircleScroll({
63  items,
64  radius = 110,
65  innerGap = 90,
66  startAngle = -90,
67  clockwise = true,
68  rotateOnScroll = true,
69  scrollDegrees = 360,
70  autoSpinDegPerSec = 0,
71  springStiffness = 120,
72  className,
73  ringClassName,
74  itemClassName,
75  textClassName = 'text-base font-serif text-zinc-800 dark:text-zinc-200',
76  height = 320,
77}: TextCircleScrollProps) {
78  const ref = React.useRef<HTMLDivElement>(null);
79 
80  // --- Scroll-driven rotation
81  const { scrollYProgress } = useScroll({
82    // when the component is within the viewport
83    target: ref,
84    offset: ['start end', 'end start'],
85  });
86 
87  const rawRotate = useTransform(scrollYProgress, [0, 1], [0, scrollDegrees]);
88  const rotateSpring = useSpring(rawRotate, {
89    stiffness: springStiffness || 120,
90// … truncated