BackgroundsNew

Aurora Background

A moving wash of light that gives your next big idea its own atmosphere.

A LITTLE ATMOSPHERE GOES A LONG WAY

A space
to dream.

Light, with a life of its own.

Live component. Go ahead, interact.

Accent

REACT / TYPESCRIPT

import type { CSSProperties, HTMLAttributes } from 'react'
import './aurora-background.css'

export interface AuroraBackgroundProps extends HTMLAttributes<HTMLDivElement> {
  /** Duration, in seconds, of one complete drift. */
  speed?: number
  /** Freeze the atmosphere while keeping its color and texture. */
  paused?: boolean
  color1?: string
  color2?: string
  color3?: string
}

function colorOrDefault(value: string, fallback: string) {
  const color = value.trim()
  return color && color.length <= 200 && !/[;{}<>]/.test(color) ? color : fallback
}

/** A slow-moving atmosphere with a separate, readable content layer. */
export function AuroraBackground({
  children,
  className = '',
  speed = 16,
  paused = false,
  color1 = '#e89c62',
  color2 = '#9280da',
  color3 = '#edd1a3',
  style,
  ...props
}: AuroraBackgroundProps) {
  const duration = Number.isFinite(speed) ? Math.min(180, Math.max(2, speed)) : 16

  return (
    <div
      {...props}
      className={`ac-aurora-background ${className}`.trim()}
      data-paused={paused || undefined}
      style={{
        '--ac-aurora-speed': `${duration}s`,
        '--ac-aurora-color-one': colorOrDefault(color1, '#e89c62'),
        '--ac-aurora-color-two': colorOrDefault(color2, '#9280da'),
        '--ac-aurora-color-three': colorOrDefault(color3, '#edd1a3'),
        ...style,
      } as CSSProperties}
    >
      <div className="ac-aurora-field" aria-hidden="true">
        <span className="ac-aurora-band ac-aurora-band-one" />
        <span className="ac-aurora-band ac-aurora-band-two" />
        <span className="ac-aurora-band ac-aurora-band-three" />
      </div>
      <div className="ac-aurora-content">{children}</div>
    </div>
  )
}

Installation

Run this in your shadcn-configured React project. The component and stylesheet are added together.

TERMINAL

npx shadcn@latest add http://localhost:5173/r/aurora-background.json

This command uses the current site address. For localhost, keep this preview running on the same computer. Files follow your configured components alias.

Usage

Import the component and make the details your own.

TypeScript

import { AuroraBackground } from '@/components/anticraft/AuroraBackground';

export function Example() {
  return (
    <AuroraBackground style={{ padding: '4rem 2rem', borderRadius: '1rem' }}>
      <h1>Make something that moves people.</h1>
    </AuroraBackground>
  );
}

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Content displayed above the decorative background.
`speed`	`number`	`16`	The ambient animation duration in seconds, clamped between 2 and 180.
`paused`	`boolean`	`false`	Pauses the background animation.
`color1`	`string`	`'#e89c62'`	The first aurora color, as a CSS color.
`color2`	`string`	`'#9280da'`	The second aurora color, as a CSS color.
`color3`	`string`	`'#edd1a3'`	The third aurora color, as a CSS color.
`className`	`string`	`''`	Additional classes. Native div attributes and inline styles are supported.

Motion & accessibility

Considered by default.

The ambient animation becomes a static gradient when reduced motion is preferred.

Use semantic content and meaningful labels in your composition. Check contrast and keyboard behavior with your own styles and content.

← PREVIOUSMorphing Stage NEXT →Magnetic Button