Testimonial Orbit

"use client";

import { useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent } from "react";
import { motion, useAnimationFrame, useMotionValue, useReducedMotion, useTransform, type MotionValue } from "motion/react";
import useMeasure from "react-use-measure";
import { cn } from "@/lib/utils";

// Testimonial orbit. The people on a slow ring, the quote of one of them in
// the middle. Picking a face (or autoplay stepping on) flies that photo out
// of the ring into the middle while the quote cross-fades; the seat it left
// stays marked by a faint dashed circle until the next person is picked.
//
// The ring is one rotating layer whose photos counter-rotate by the same
// amount, so faces stay upright. Its speed eases toward a target every frame,
// so pointing at it brings it to a stop without a jump. The flight is a
// single transform on the middle photo, played from wherever the picked photo
// is on screen at that moment, so it is correct mid-turn.
//
// Narrow containers have no room for a quote inside a ring, so there the
// people sit still on an arch with the quote underneath.

export type Testimonial = {
  quote: string;
  name: string;