Stacked Type Hero
Oversized, tightly-stacked headline words that reveal in on mount — big type as sculpture.
DOM + CSS1 dep1 file · 1 KB TSX
Props
"use client";
import { motion } from "framer-motion";
const DEFAULT_WORDS = "Type, Lettering, Sections, Components, Patterns";
export function StackedTypeHero({
words = DEFAULT_WORDS,
accentWord = "Sections",
align = "left",
}: {
/** Comma-separated. One stacked line per word. */
words?: string;
/** Whichever line matches gets the accent colour. */
accentWord?: string;
align?: "left" | "center";
}) {
const lines = words
.split(",")
.map((w) => w.trim())
.filter(Boolean);
return (
<div
className={
"flex flex-col gap-1 py-10 " +
(align === "center" ? "items-center text-center" : "items-start text-left")
}
>
{lines.map((word, i) => (
<motion.span
key={word}
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.06, duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
className={
"font-black leading-[0.9] tracking-tight " +
(word === accentWord ? "text-red-500" : "text-white")
}
style={{ fontSize: "clamp(2rem, 8vw, 6rem)" }}
>
{word}
</motion.span>
))}
</div>
);
}
Free. Pro unlocks everything, from $27/month.
Details
About this section
Most hero sections lean on an image or a gradient behind the headline; this one skips that and lets oversized, tightly-stacked words carry the whole section, each line landing with a staggered fade-and-rise on mount. Pick it over a standard hero when the copy itself is strong enough to be the visual — line height is pulled down to 0.9 and tracking tightened, so it reads as a magazine cover rather than a SaaS banner with a headline bolted on. Font size is set with clamp() so it scales fluidly across viewport widths instead of jumping between breakpoints. The detail worth knowing before customizing the word list: the accent color is applied by exact string match against one designated word, so if two words in the list are identical, both light up, and if the accent word is renamed without updating that match, nothing highlights — the mismatch fails completely silently, with no warning and no fallback color.
Curator’s note
This is the reference pattern viberdy's own homepage hero is built from — same stagger and easing.
