Ambient Background

A soft, moving backdrop for empty chats, voice calls and onboarding: drifting mesh, aurora bands, a spotlight, light rays, waves, or a lit dot or line field, with optional grain. Tinted from the theme's primary color.

Good morning

What should we work on?

Installation

pnpm dlx shadcn@latest add @jds/ambient-background

Usage

import { AmbientBackground } from "@/components/effects/ambient-background"

<div className="relative isolate overflow-hidden">
  <AmbientBackground variant="aurora" intensity={0.6} grain={0.3} />
  {children}
</div>

Examples

All variants

mesh

aurora

spotlight

rays

waves

dots

grid

API Reference

AmbientBackground

Prop	Type	Default
`variant` The look. All of them are tinted from the theme's primary color.	"mesh" \| "aurora" \| "spotlight" \| "rays" \| "waves" \| "dots" \| "grid"	"mesh"
`intensity` Color strength, 0 to 1.	number	0.6
`speed` Drift speed. 0 holds still. Always still under prefers-reduced-motion.	number	1
`grain` Film grain over the top, 0 to 1.	number	0

Waveform Border Beam