Einblenden beim Scrollen

import { motion } from "framer-motion";

const spring = { type: "spring" as const, stiffness: 300, damping: 30 };

interface ScrollRevealProps {
  distance?: number;
  /** true: caja de demo con scroll propio. false: solo la sección, que aparece con el scroll de la página. */
  contained?: boolean;
}

export default function ScrollReveal({
  distance = 28,
  contained = true,
}: ScrollRevealProps) {
  // whileInView observa el viewport y tiene en cuenta el recorte del contenedor, así sirve en ambos modos.
  const section = (
    <motion.div
      initial={{ opacity: 0, y: distance }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: false, amount: 0.6 }}
      transition={spring}
      className="rounded-[22px] bg-white dark:bg-[#1c1c1e] p-6 text-[#1d1d1f] dark:text-[#f5f5f7] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]"
    >
      <h3 className="text-lg font-semibold sm:text-xl">Eine Pause, genau hier.</h3>
      <p className="mt-2 text-sm text-[#86868b]">Dieser Inhalt erscheint, sobald er in den sichtbaren Bereich kommt.</p>
    </motion.div>
  );

  if (!contained) return section;

  return (
    <div className="h-60 w-full overflow-y-auto rounded-2xl bg-black/5 p-5 dark:bg-white/10">
      <div className="h-24" />
      {section}
      <div className="h-32" />
    </div>
  );
}