Reveal em Cascata

import { motion } from "framer-motion";
import "./styles.css";

const ITEMS = [
  { tag: "01", title: "Planeje", body: "Defina o objetivo antes de qualquer pixel." },
  { tag: "02", title: "Construa", body: "Itere rápido, com feedback de verdade." },
  { tag: "03", title: "Lance", body: "Publique cedo e melhore toda semana." },
];

const container = {
  hidden: {},
  show: { transition: { staggerChildren: 0.12, delayChildren: 0.05 } },
};

const item = {
  hidden: { opacity: 0, y: 24 },
  show: { opacity: 1, y: 0, transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] } },
};

export default function App() {
  return (
    <div className="page">
      <p className="hint">Role para revelar ↓</p>
      <motion.div
        className="grid"
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.3 }}
      >
        {ITEMS.map((it) => (
          <motion.article key={it.tag} className="card" variants={item}>
            <span className="tag">{it.tag}</span>
            <h3>{it.title}</h3>
            <p>{it.body}</p>
          </motion.article>
        ))}
      </motion.div>
    </div>
  );
}