"use client" import * as React from "react" import { motion, useReducedMotion, type HTMLMotionProps } from "framer-motion" import { transition, variants, gesture, spring, stagger } from "@/lib/animations" import { cn } from "@/lib/utils" /* ------------------------------------------------------------------ */ /* FadeIn */ /* ------------------------------------------------------------------ */ export interface FadeInProps extends HTMLMotionProps<"div"> { /** Delay in seconds before the animation starts. */ delay?: number } /** Fades in from transparent. Respects prefers-reduced-motion. */ export function FadeIn({ delay = 0, className, children, ...props }: FadeInProps) { const reduced = useReducedMotion() return ( {children} ) } /* ------------------------------------------------------------------ */ /* SlideUp */ /* ------------------------------------------------------------------ */ export interface SlideUpProps extends HTMLMotionProps<"div"> { delay?: number /** Vertical offset in pixels. Default 16. */ offset?: number } /** Slides up + fades in. */ export function SlideUp({ delay = 0, offset = 16, className, children, ...props }: SlideUpProps) { const reduced = useReducedMotion() return ( {children} ) } /* ------------------------------------------------------------------ */ /* ScaleIn */ /* ------------------------------------------------------------------ */ export interface ScaleInProps extends HTMLMotionProps<"div"> { delay?: number } /** Scales in from 95% + fades. */ export function ScaleIn({ delay = 0, className, children, ...props }: ScaleInProps) { const reduced = useReducedMotion() return ( {children} ) } /* ------------------------------------------------------------------ */ /* PopIn */ /* ------------------------------------------------------------------ */ export interface PopInProps extends HTMLMotionProps<"div"> { delay?: number } /** Pops in with bouncy spring from 80% scale. */ export function PopIn({ delay = 0, className, children, ...props }: PopInProps) { const reduced = useReducedMotion() return ( {children} ) } /* ------------------------------------------------------------------ */ /* StaggerChildren */ /* ------------------------------------------------------------------ */ export interface StaggerChildrenProps extends HTMLMotionProps<"div"> { /** Delay between each child. Default `stagger.default` (0.06s). */ staggerDelay?: number } /** * Container that staggers its children's entrance. * Each direct child should be a ``. */ export function StaggerChildren({ staggerDelay = stagger.default, className, children, ...props }: StaggerChildrenProps) { return ( {children} ) } /** Individual item inside a `` container. */ export function StaggerItem({ className, children, ...props }: HTMLMotionProps<"div">) { const reduced = useReducedMotion() return ( {children} ) } /* ------------------------------------------------------------------ */ /* HoverLift */ /* ------------------------------------------------------------------ */ export interface HoverLiftProps extends HTMLMotionProps<"div"> { /** Preset: "lift" | "grow" | "press" | "premium". Default "lift". */ preset?: keyof typeof gesture } /** * Wrapper that applies hover + tap gestures from the design system. * Use around cards, buttons, or any interactive surface. */ export function HoverLift({ preset = "lift", className, children, ...props }: HoverLiftProps) { const reduced = useReducedMotion() const g = reduced ? {} : gesture[preset] return ( {children} ) } /* ------------------------------------------------------------------ */ /* AnimatedText — character-level stagger */ /* ------------------------------------------------------------------ */ export interface AnimatedTextProps extends Omit, "children"> { text: string /** Delay between each character. Default 0.03s. */ charDelay?: number /** Initial delay before the first character. */ delay?: number } /** Staggers in text character by character. */ export function AnimatedText({ text, charDelay = 0.03, delay = 0, className, ...props }: AnimatedTextProps) { const reduced = useReducedMotion() return ( {text.split("").map((char, i) => ( ))} ) }

MotionPrimitives

MotionPrimitives