Testimonial Canvas

1"use client";
2 
3import { motion, useMotionValue, useSpring } from "motion/react";
4import { useRef, useState } from "react";
5 
6export interface Testimonial {
7  id: string;
8  quote: string;
9  author: string;
10  meta?: string;
11  avatar?: string;
12}
13 
14export interface TestimonialCanvasProps {
15  testimonials: Testimonial[];
16  height?: string;
17  initialOffset?: { x: number; y: number };
18  hint?: string | false;
19}
20 
21const CARD_POSITIONS: [number, number][] = [
22  [0, 0],
23  [340, -60],
24  [-340, 80],
25  [160, 260],
26  [-200, -260],
27  [580, 260],
28  [-540, -160],
29  [200, -320],
30  [-200, 360],
31  [720, -100],
32  [-600, 300],
33  [500, 500],
34  [-500, -460],
35  [960, 360],
36  [-800, 50],
37];
38 
39const CARD_MARGIN_X = 60;
40const CARD_MARGIN_Y = 60;
41 
42const vignette =
43  "radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, var(--vignette-color) 100%)";
44 
45function clamp(value: number, min: number, max: number) {
46  return Math.min(Math.max(value, min), max);
47}
48 
49function getPostion(index: number): [number, number] {
50  if (index < CARD_POSITIONS.length) return CARD_POSITIONS[index];
51 
52  const angle = index * 137.5 * (Math.PI / 180);
53  const radius = 400 + index * 80;
54  return [Math.cos(angle) * radius, Math.sin(angle) * radius];
55}
56 
57function getPanBounds(count: number) {
58  const xs: number[] = [];
59  const ys: number[] = [];
60 
61  for (let i = 0; i < count; i++) {
62    const [x, y] = getPostion(i);
63    xs.push(x);
64    ys.push(y);
65  }
66 
67  const maxPanX = (Math.max(...xs) - Math.min(...xs)) / 2 + CARD_MARGIN_X;
68  const maxPanY = (Math.max(...ys) - Math.min(...ys)) / 2 + CARD_MARGIN_Y;
69  return { maxPanX, maxPanY };
70}
71 
72function TestimonialCard({
73  testimonial,
74  position,
75  index,
76}: {
77  testimonial: Testimonial;
78  position: [number, number];
79  index: number;
80}) {
81  return (
82    <motion.div
83      initial={{ opacity: 0, scale: 0.92 }}
84      animate={{ opacity: 1, scale: 1 }}
85      transition={{
86        duration: 0.5,
87        delay: index * 0.04,
88        ease: [0.16, 1, 0.3, 1],
89      }}
90      className="absolute w-72 rounded-2xl border border-black/8 bg-black/1 p-5 backdrop-blur-sm will-change-transform dark:border-white/8 dark:bg-white/3"
91      style={{
92        left: position[0],
93        top: position[1],
94        transform: "translate(-50%, -50%)",
95      }}
96    >
97      <p className="text-sm leading-relaxed text-black/70 dark:text-white/70">
98        &ldquo;{testimonial.quote}&rdquo;
99      </p>
100      <div className="mt-4 flex items-center gap-3">
101        {testimonial.avatar ? (
102          <img
103// … truncated