Word Reveal Hero
A copy-paste hero sections component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Hero SectionsHTMLCSSany framework
Build without the build.
Copy into your project
HTML
<!-- Word Reveal Hero — wrap each word in <span> with a stagger via --d -->
<h1 class="nuda-wreveal">
<span style="--d: 0s">Build</span>
<span style="--d: .15s">without</span>
<span style="--d: .3s">the</span>
<span style="--d: .45s" class="is-accent">build.</span>
</h1>CSS
/* Word Reveal Hero
Each word fades up + de-skews into place, last word in accent.
Customize: --wr-accent, font sizing. */
.nuda-wreveal {
--wr-accent: #e4ff54;
font: 800 clamp(2rem, 6vw, 4.5rem) ui-sans-serif, system-ui, sans-serif;
color: #fafafa;
margin: 0;
line-height: 1.1;
letter-spacing: -0.02em;
padding: 60px 24px;
text-align: center;
}
.nuda-wreveal span {
display: inline-block;
opacity: 0;
transform: translateY(16px) skewY(8deg);
animation: nuda-wr-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s) forwards;
}
.nuda-wreveal .is-accent {
color: var(--wr-accent);
background: linear-gradient(180deg, var(--wr-accent), #a8c93a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes nuda-wr-up {
to { opacity: 1; transform: translateY(0) skewY(0); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-wreveal span { animation: none; opacity: 1; transform: none; }
}How to use Word Reveal Hero
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.