Radial Intro

1'use client';
2 
3import * as React from 'react';
4import {
5  LayoutGroup,
6  motion,
7  useAnimate,
8  delay,
9  type Transition,
10  type AnimationSequence,
11} from 'motion/react';
12 
13interface ComponentProps {
14  orbitItems: OrbitItem[];
15  stageSize?: number;
16  imageSize?: number;
17}
18 
19type OrbitItem = {
20  id: number;
21  name: string;
22  src: string;
23};
24 
25const transition: Transition = {
26  delay: 0,
27  stiffness: 300,
28  damping: 35,
29  type: 'spring',
30  restSpeed: 0.01,
31  restDelta: 0.01,
32};
33 
34const spinConfig = {
35  duration: 30,
36  ease: 'linear' as const,
37  repeat: Infinity,
38};
39 
40const qsa = (root: Element, sel: string) =>
41  Array.from(root.querySelectorAll(sel));
42 
43const angleOf = (el: Element) => Number((el as HTMLElement).dataset.angle || 0);
44 
45const armOfImg = (img: Element) =>
46  (img as HTMLElement).closest('[data-arm]') as HTMLElement | null;
47 
48function RadialIntro({
49  orbitItems,
50  stageSize = 320,
51  imageSize = 60,
52}: ComponentProps) {
53  const step = 360 / orbitItems.length;
54  const [scope, animate] = useAnimate();
55 
56  React.useEffect(() => {
57    const root = scope.current;
58    if (!root) return;
59 
60    // get arm and image elements
61    const arms = qsa(root, '[data-arm]');
62    const imgs = qsa(root, '[data-arm-image]');
63    const stops: Array<() => void> = [];
64 
65    // image lift-in
66    delay(() => animate(imgs, { top: 0 }, transition), 250);
67 
68    // build sequence for orbit placement
69    const orbitPlacementSequence: AnimationSequence = [
70      ...arms.map((el): [Element, Record<string, any>, any] => [
71        el,
72        { rotate: angleOf(el) },
73        { ...transition, at: 0 },
74      ]),
75      ...imgs.map((img): [Element, Record<string, any>, any] => [
76        img,
77        { rotate: -angleOf(armOfImg(img)!), opacity: 1 },
78        { ...transition, at: 0 },
79      ]),
80    ];
81 
82    // play placement sequence
83    delay(() => animate(orbitPlacementSequence), 700);
84 
85    // start continuous spin for arms and images
86    delay(() => {
87      // arms spin clockwise
88      arms.forEach((el) => {
89        const angle = angleOf(el);
90        const ctrl = animate(el, { rotate: [angle, angle + 360] }, spinConfig);
91        stops.push(() => ctrl.cancel());
92      });
93 
94      // images counter-spin to stay upright
95      imgs.forEach((img) => {
96        const arm = armOfImg(img);
97        const angle = arm ? angleOf(arm) : 0;
98        const ctrl = animate(
99          img,
100          { rotate: [-angle, -angle - 360] },
101          spinConfig,
102        );
103        stops.push(() => ctrl.cancel());
104      });
105// … truncated