Atlas Word Reveal

Heroes

About

A calm word-by-word headline reveal (rise + fade) with an optional glowing accent run. Pure CSS, no dependencies, themeable, reduced-motion aware.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Atlas Word Reveal to your project and fits it to your theme.

Code

How Atlas Word Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import WordReveal from "@/components/ui/wordreveal";

export default function WordRevealDemo() {
  return (
    <div
      style={{
        display: "grid",
        placeItems: "center",
        minHeight: 320,
        padding: 32,
        background: "oklch(0.21 0.018 268)",
        color: "oklch(0.97 0.008 270)",
        fontFamily: "ui-sans-serif, system-ui, sans-serif",
      }}
    >
      <WordReveal
        as="h1"
        segments={[
          { text: "Everyone should be able to automate." },
          { text: "Not just the big teams.", accent: true },
        ]}
        accentColor="oklch(0.86 0.155 135)"
        className="atlas-wr-demo-title"
      />
      <style>{`.atlas-wr-demo-title{font-size:clamp(30px,5vw,52px);font-weight:600;letter-spacing:-0.025em;line-height:1.06;text-align:center;max-width:14ch;margin:0;}`}</style>
    </div>
  );
}

Atlas Word Reveal

Code

More in Heroes

SaaS Template

Responsive Hero Banner

Hero

Centered Hero with Image Fan

Editorial Collage Hero

Glass Fold

HeroSectionWithGradient

Aero Hero-3

Explore more