refactor: add animations

2026-03-18 12:56:39 +05:30
parent c650da161e
commit f35389ab69
14 changed files with 480 additions and 206 deletions
--- a/src/components/ui/reveal.tsx
+++ b/src/components/ui/reveal.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { motion, type HTMLMotionProps } from "motion/react";
+import React from "react";
+
+interface RevealProps extends HTMLMotionProps<"div"> {
+  children: React.ReactNode;
+  delay?: number;
+  direction?: "up" | "down" | "left" | "right" | "none";
+  duration?: number;
+  distance?: number;
+}
+
+export function Reveal({
+  children,
+  delay = 0,
+  direction = "up",
+  duration = 0.5,
+  distance = 20,
+  className,
+  ...props
+}: RevealProps) {
+  const offsets = {
+    up: { y: distance },
+    down: { y: -distance },
+    left: { x: distance },
+    right: { x: -distance },
+    none: {},
+  };
+
+  return (
+    <motion.div
+      initial={{ 
+        opacity: 0, 
+        ...(direction !== "none" ? offsets[direction] : {}) 
+      }}
+      whileInView={{ opacity: 1, x: 0, y: 0 }}
+      viewport={{ once: true, margin: "-50px" }}
+      transition={{
+        duration,
+        delay,
+        ease: [0.21, 0.47, 0.32, 0.98],
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+interface StaggerContainerProps extends HTMLMotionProps<"div"> {
+  children: React.ReactNode;
+  staggerChildren?: number;
+  delayChildren?: number;
+}
+
+export function StaggerContainer({
+  children,
+  staggerChildren = 0.1,
+  delayChildren = 0,
+  className,
+  ...props
+}: StaggerContainerProps) {
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true, margin: "-50px" }}
+      variants={{
+        hidden: { opacity: 0 },
+        show: {
+          opacity: 1,
+          transition: {
+            staggerChildren,
+            delayChildren,
+          },
+        },
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function StaggerItem({
+  children,
+  direction = "up",
+  distance = 20,
+  className,
+  ...props
+}: RevealProps) {
+  const offsets = {
+    up: { y: distance },
+    down: { y: -distance },
+    left: { x: distance },
+    right: { x: -distance },
+    none: {},
+  };
+
+  return (
+    <motion.div
+      variants={{
+        hidden: { 
+          opacity: 0, 
+          ...(direction !== "none" ? offsets[direction] : {}) 
+        },
+        show: { opacity: 1, x: 0, y: 0 },
+      }}
+      transition={{
+        duration: 0.5,
+        ease: [0.21, 0.47, 0.32, 0.98],
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}