"use client";

import { motion } from "framer-motion";

const TEXT = "Designed for readers.";

export function LetterCascade() {
  return (
    <div className="bg-[#FAFAF8] p-16 grid place-items-center min-h-[260px]">
      <h2
        className="text-center text-[#111111] tracking-[-0.02em] leading-[1.05]"
        style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(36px, 5vw, 56px)",
        }}
      >
        {TEXT.split("").map((c, i) => (
          <motion.span
            key={i}
            initial={{ y: "100%", opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{
              duration: 0.6,
              delay: 0.04 * i,
              ease: [0.2, 0.7, 0.2, 1],
            }}
            style={{ display: "inline-block", whiteSpace: "pre" }}
          >
            {c}
          </motion.span>
        ))}
      </h2>
    </div>
  );
}
Letter Cascade

Designed for readers.

Dependencies
