🎨 Frontend Development — Animation Effects Pack Demo

• `landing-page.tsx` — Hero section with scroll-triggered reveals, parallax background, staggered feature cards, animated statistics counters
• `dashboard-transitions.tsx` — Route transitions, sidebar animations, card grid with stagger, collapsible panels, notification toasts
• `loading-states.tsx` — Skeleton screens, progressive loading, shimmer effects, content swap transitions
• `entrance-variants.test.ts` — Validates variant structure and reduced-motion fallbacks
• `components.test.tsx` — Component rendering, intersection observer mocking, animation lifecycle
• `hooks.test.ts` — Hook behavior, media query mocking, state transitions

npm install framer-motion
# framer-motion is the only peer dependency

import { motion } from 'framer-motion';
import { fadeUp, slideInLeft } from './src/variants/entrance';

function Hero() {
  return (
    <section>
      <motion.h1 {...fadeUp}>Welcome to the future</motion.h1>
      <motion.p {...slideInLeft} custom={0.2}>
        This text slides in from the left with a 0.2s delay.
      </motion.p>
    </section>
  );
}