Atlas Aurora

Heroes

About

A calm, premium animated aurora background: three slow-drifting blurred colour fields blended with light, plus a soft diagonal sweep. Self-contained, themeable, and reduced-motion aware.

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

Code

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

Usage.tsx

"use client";

import AtlasAurora from "@/components/ui/atlasaurora";

export default function AtlasAuroraDemo() {
  return (
    <AtlasAurora
      style={{
        minHeight: 420,
        display: "grid",
        placeItems: "center",
        borderRadius: 20,
        background:
          "linear-gradient(180deg, oklch(0.25 0.022 272), oklch(0.21 0.018 268))",
        color: "oklch(0.97 0.008 270)",
        fontFamily: "ui-sans-serif, system-ui, sans-serif",
      }}
    >
      <div style={{ textAlign: "center", padding: 24 }}>
        <h1
          style={{
            fontSize: "clamp(28px, 5vw, 48px)",
            fontWeight: 600,
            letterSpacing: "-0.025em",
            margin: 0,
          }}
        >
          Calm, dynamic backdrops.
        </h1>
        <p style={{ opacity: 0.7, marginTop: 12, fontSize: 16 }}>
          Three drifting colour fields, blended with light. Self-contained.
        </p>
      </div>
    </AtlasAurora>
  );
}

Atlas Aurora

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