"use client";

import { motion } from "framer-motion";

const SENTENCE =
  "Velynkit ships components that don't apologize for their taste.";

export function WordStagger() {
  const words = SENTENCE.split(" ");
  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center min-h-[240px]">
      <p
        className="text-center text-[#111111] max-w-[28ch] tracking-[-0.01em]"
        style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(24px, 3vw, 36px)",
          lineHeight: 1.25,
        }}
      >
        {words.map((w, i) => (
          <motion.span
            key={i}
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              duration: 0.5,
              delay: 0.06 * i,
              ease: [0.2, 0.7, 0.2, 1],
            }}
            className="inline-block"
            style={{ marginRight: "0.3em" }}
          >
            {w === "taste." ? (
              <span style={{ color: "#2A3D2F", fontStyle: "italic" }}>{w}</span>
            ) : (
              w
            )}
          </motion.span>
        ))}
      </p>
    </div>
  );
}
Word Stagger

Dependencies
