TikTok V6

src/components/marketing/ScrollReveal.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+type ScrollRevealProps = {
+  children: ReactNode;
+  delay?: number;
+  className?: string;
+};
+
+/**
+ * A small, optional entrance animation for content that benefits from a
+ * progressive reading order. Reduced-motion users receive the final state
+ * immediately.
+ */
+export function ScrollReveal({
+  children,
+  delay = 0,
+  className,
+}: ScrollRevealProps) {
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      initial={prefersReducedMotion ? false : { opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.01 }}
+      transition={{ duration: 0.4, delay, ease: 'easeOut' }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}