feat: add framer-motion animations (page transitions, modals, dropdowns, buttons, search bar)

2026-10-13 04:36:37 +08:00 · 2026-02-21 21:16:42 +08:00
parent 572d1c16a6
commit a15be253f5
15 changed files with 583 additions and 510 deletions
@@ -0,0 +1,121 @@
+import { motion } from "framer-motion";
+import React from "react";
+
+/**
+ * Wraps page content with a smooth fade-in + slide-up entrance animation.
+ * Use this as the outermost wrapper inside each page component.
+ */
+export const AnimatedPage = ({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) => (
+    <motion.div
+        animate={{ opacity: 1, y: 0 }}
+        className={className}
+        exit={{ opacity: 0, y: -8 }}
+        initial={{ opacity: 0, y: 16 }}
+        transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
+    >
+        {children}
+    </motion.div>
+);
+
+/**
+ * Stagger container — apply to the parent of a list/grid of animated items.
+ * Children should use `staggerItem` as their `variants` prop.
+ */
+export const staggerContainer = {
+    hidden: { opacity: 0 },
+    show: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.05,
+            delayChildren: 0.05,
+        },
+    },
+};
+
+/**
+ * Individual stagger item variant — fade-in + slide-up.
+ */
+export const staggerItem = {
+    hidden: { opacity: 0, y: 12 },
+    show: {
+        opacity: 1,
+        y: 0,
+        transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
+    },
+};
+
+/**
+ * Convenience wrapper for a stagger list.
+ * Renders a `motion.div` (or `motion.ul/motion.tbody`) with stagger behaviour.
+ */
+export const StaggerList = ({
+    children,
+    className,
+    as = "div",
+}: {
+    children: React.ReactNode;
+    className?: string;
+    as?: "div" | "ul" | "tbody";
+}) => {
+    const Component = motion[as] as React.ElementType;
+
+    return (
+        <Component
+            animate="show"
+            className={className}
+            initial="hidden"
+            variants={staggerContainer}
+        >
+            {children}
+        </Component>
+    );
+};
+
+/**
+ * Individual animated item for use inside StaggerList.
+ */
+export const StaggerItem = ({
+    children,
+    className,
+    as = "div",
+}: {
+    children: React.ReactNode;
+    className?: string;
+    as?: "div" | "li" | "tr";
+}) => {
+    const Component = motion[as] as React.ElementType;
+
+    return (
+        <Component className={className} variants={staggerItem}>
+            {children}
+        </Component>
+    );
+};
+
+/**
+ * Simple fade-in animation for standalone elements (chips, badges, counters, etc.)
+ */
+export const FadeIn = ({
+    children,
+    delay = 0,
+    className,
+}: {
+    children: React.ReactNode;
+    delay?: number;
+    className?: string;
+}) => (
+    <motion.div
+        animate={{ opacity: 1, scale: 1 }}
+        className={className}
+        initial={{ opacity: 0, scale: 0.95 }}
+        transition={{ duration: 0.2, delay, ease: "easeOut" }}
+    >
+        {children}
+    </motion.div>
+);