Chapter 2: Backgrounds & Ambient Effects

Core Idea

Full-bleed decorative backgrounds and ambient motion — the layer that sits behind hero sections, CTAs, and cards to add visual interest without competing with foreground content.

Reference Table

Name	Purpose	Install
Aurora Background	Soft aurora/Southern-Lights gradient background	npx shadcn@latest add @aceternity/aurora-background
Background Beams	SVG beams following a path, good under hero sections	npx shadcn@latest add @aceternity/background-beams
Background Beams With Collision	Beams that "explode" on collision	npx shadcn@latest add @aceternity/background-beams-with-collision
Background Boxes	Full-width box grid that highlights on hover	npx shadcn@latest add @aceternity/background-boxes
Background Gradient	Animated gradient sitting behind a card/button/any container	npx shadcn@latest add @aceternity/background-gradient
Background Gradient Animation	Smooth gradient that shifts position over time	npx shadcn@latest add @aceternity/background-gradient-animation
Background Lines	Wave-pattern animated SVG lines	npx shadcn@latest add @aceternity/background-lines
Background Ripple Effect	Grid of cells that ripple on click	npx shadcn@latest add @aceternity/background-ripple-effect
Canvas Reveal Effect	Dot background that expands on hover	npx shadcn@latest add @aceternity/canvas-reveal-effect
Cloud Shader	Procedural drifting clouds (speed/count/color configurable)	npx shadcn@latest add @aceternity/cloud-shader
Dither Shader	Real-time ordered-dithering effect, good for pixel-art/retro looks	npx shadcn@latest add @aceternity/dither-shader
Dotted Glow Background	Opacity-animated dot glow background	npx shadcn@latest add @aceternity/dotted-glow-background
Grid and Dot Backgrounds	Simple grid/dot pattern to separate page sections	npx shadcn@latest add @aceternity/grid-and-dot-backgrounds
Noise Background	Animated gradient + noise texture background	npx shadcn@latest add @aceternity/noise-background
Scales	Repeating diagonal/horizontal/vertical line pattern	npx shadcn@latest add @aceternity/scales
Shooting Stars and Stars Background	Starfield with shooting-star animation	npx shadcn@latest add @aceternity/shooting-stars-and-stars-background
Sparkles	Configurable particle sparkles, background or standalone	npx shadcn@latest add @aceternity/sparkles
Vortex Background	Swirly vortex background, good for CTA sections	npx shadcn@latest add @aceternity/vortex
Wavy Background	Continuously moving wave background	npx shadcn@latest add @aceternity/wavy-background
Webcam Pixel Grid	Real-time webcam feed rendered as a pixel grid	npx shadcn@latest add @aceternity/webcam-pixel-grid
World Map	Animated world map with lines/dots between points	npx shadcn@latest add @aceternity/world-map
ASCII Art	Converts an image into animated ASCII art	npx shadcn@latest add @aceternity/ascii-art
Google Gemini Effect	SVG line effect as seen on the Google Gemini launch page	npx shadcn@latest add @aceternity/google-gemini-effect

Key Takeaways

1. Most of these render as an absolutely-positioned layer behind normal content — check each component's anatomy for whether it needs a relative positioned parent.
2. Shader-based entries (Cloud Shader, Dither Shader) are heavier than CSS/SVG ones — reach for them deliberately, not by default, on performance-sensitive pages.
3. Several of these (Aurora, Background Beams, Vortex, Wavy) target the same "hero backdrop" job — pick one, don't stack multiple full-bleed backgrounds.

Connects To

• ch003 (Hero & Scroll Sections): where most of these backgrounds actually get used.
• ch004 (Cards & Grids): card-scoped variants of some of these effects (Canvas Reveal Effect, Grid backgrounds).