Motion Spec

export const EASE = {
  enter: [0.16, 1, 0.3, 1],
  text:  [0.25, 1, 0.5, 1],
  page:  [0.65, 0, 0.35, 1],
} as const

export const DUR = {
  enter: 0.7,
  text:  0.5,
  page:  0.4,
}

export const SPRING = {
  type: 'spring',
  stiffness: 220,
  damping: 30,
}

export const enter = {
  hidden: { opacity: 0, y: 24 },
  show: {
    opacity: 1,
    y: 0,
    transition: { duration: DUR.enter, ease: EASE.enter },
  },
}

export const stagger = (step = 0.08, delay = 0) => ({
  show: {
    transition: { staggerChildren: step, delayChildren: delay },
  },
})

export const lineMask = {
  hidden: { y: '100%' },
  show: {
    y: 0,
    transition: { duration: DUR.text, ease: EASE.text },
  },
}

'use client'
import { motion, useReducedMotion } from 'framer-motion'
import { enter, fadeOnly } from '@/lib/variants'

export function Reveal({ children, delay = 0 }) {
  const reduce = useReducedMotion()

  return (
    <motion.div
      variants={reduce ? fadeOnly : enter}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.4 }}
      transition={{ delay }}
    >
      {children}
    </motion.div>
  )
}

export function MaskedHeading({ lines }) {
  return (
    <h1>
      {lines.map((line, i) => (
        <span key={i} className="block overflow-hidden">
          <motion.span
            className="block"
            variants={lineMask}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.5 }}
            transition={{ delay: i * 0.08 }}
          >
            {line}
          </motion.span>
        </span>
      ))}
    </h1>
  )
}