Scroll Animation Trigger

1"use client";
2import { useRef, useEffect, useState, useMemo, type ReactNode } from "react";
3import {
4  motion,
5  useScroll,
6  useTransform,
7  type MotionValue,
8  type MotionProps,
9} from "motion/react";
10import { cn } from "@/lib/utils";
11 
12export interface ScrollAnimationTriggerProps {
13  children: ReactNode;
14  className?: string;
15  effect?: "fade" | "scale" | "slide" | "color" | "rotate" | "custom";
16  threshold?: number;
17  delay?: number;
18  duration?: number;
19  direction?: "up" | "down" | "left" | "right";
20  once?: boolean;
21  customProps?: MotionProps;
22  as?: keyof typeof motionElementMap;
23  fromColor?: string;
24  toColor?: string;
25  fromRotation?: number;
26  toRotation?: number;
27  fromScale?: number;
28  toScale?: number;
29}
30 
31const motionElementMap = {
32  div: motion.div,
33  span: motion.span,
34  p: motion.p,
35  h1: motion.h1,
36  h2: motion.h2,
37  h3: motion.h3,
38  h4: motion.h4,
39  h5: motion.h5,
40  h6: motion.h6,
41  section: motion.section,
42  article: motion.article,
43  aside: motion.aside,
44  nav: motion.nav,
45  ul: motion.ul,
46  ol: motion.ol,
47  li: motion.li,
48  button: motion.button,
49};
50 
51type MotionElementKey = keyof typeof motionElementMap;
52 
53export function ScrollAnimationTrigger({
54  children,
55  className,
56  effect = "fade",
57  threshold = 0.1,
58  delay = 0,
59  duration = 0.5,
60  direction = "up",
61  once = false,
62  customProps = {},
63  as = "div",
64  fromColor = "var(--color-muted)",
65  toColor = "var(--color-primary)",
66  fromRotation = direction === "left" ? -10 : 10,
67  toRotation = 0,
68  fromScale = 0.8,
69  toScale = 1,
70}: ScrollAnimationTriggerProps) {
71  const ref = useRef<HTMLDivElement>(null);
72  const [isInView, setIsInView] = useState(false);
73 
74  const { scrollYProgress } = useScroll({
75    target: ref,
76    offset: ["start end", "end start"],
77  });
78 
79  const textColor = useTransform(scrollYProgress, [0, 1], [fromColor, toColor]);
80  const rotation = useTransform(
81    scrollYProgress,
82    [0, 1],
83    [fromRotation, toRotation],
84  );
85 
86  useEffect(() => {
87    if (!ref.current) return;
88 
89    const observer = new IntersectionObserver(
90      (entries) => {
91        const [entry] = entries;
92        if (entry.isIntersecting) {
93          setIsInView(true);
94          if (once) observer.disconnect();
95        } else if (!once) {
96          setIsInView(false);
97        }
98      },
99      { threshold },
100    );
101 
102    observer.observe(ref.current);
103 
104    return () => {
105      observer.disconnect();
106    };
107  }, [threshold, once]);
108 
109  const animationProps = useMemo(() => {
110// … truncated