"use client";

import { motion } from "framer-motion";

const LINES = [
  "An editorial system",
  "for quiet operators",
  "and confident builders.",
];

export function MaskReveal() {
  return (
    <div className="bg-[#FAFAF8] p-16 grid place-items-center min-h-[280px]">
      <h2
        className="text-[#111111] tracking-[-0.02em] leading-[1.05] max-w-[20ch]"
        style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(28px, 4vw, 48px)",
        }}
      >
        {LINES.map((line, i) => (
          <span
            key={i}
            className="block overflow-hidden"
            style={{ paddingBottom: "0.08em" }}
          >
            <motion.span
              initial={{ y: "110%" }}
              animate={{ y: 0 }}
              transition={{
                duration: 0.75,
                delay: 0.12 * i,
                ease: [0.2, 0.7, 0.2, 1],
              }}
              className="block"
              style={{
                fontStyle: i === LINES.length - 1 ? "italic" : "normal",
                color: i === LINES.length - 1 ? "#2A3D2F" : "#111111",
              }}
            >
              {line}
            </motion.span>
          </span>
        ))}
      </h2>
    </div>
  );
}
Mask Reveal Lines

An editorial systemfor quiet operatorsand confident builders.

Dependencies
