Atlas Word Reveal

"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>
  );
}