Hero Backgrounds
6 hero background presets — CSS-based and component-based — switchable from siteConfig.
LaunchFst includes 6 hero background presets that render behind the hero section. Switch between them with a single config change.
Available Backgrounds
| Background | File | Type | Description |
|---|---|---|---|
grid | bg-grid.tsx | CSS | Subtle grid lines with radial fade from center |
dots | bg-dots.tsx | CSS | Dot pattern at low opacity (DotPattern component) |
gradient | bg-gradient.tsx | CSS | 3 layered gradient color blurs using primary/chart colors |
particles | bg-particles.tsx | Component | Animated floating particles (Particles Magic UI component) |
animated-grid | bg-animated-grid.tsx | Component | Moving grid squares (AnimatedGridPattern Magic UI component) |
light-rays | bg-light-rays.tsx | Component | Radial light rays (LightRays Magic UI component) |
Switching Backgrounds
Update heroBackground in lib/config/site.ts:
design: {
heroBackground: "particles", // "grid" | "dots" | "gradient" | "particles" | "animated-grid" | "light-rays"
}The HeroBackground component in components/blocks/backgrounds/hero-background.tsx reads this config and renders the matching background automatically.
CSS-Based vs Component-Based
CSS-based backgrounds (grid, dots, gradient) use CSS gradients and patterns with zero JavaScript overhead.
Component-based backgrounds (particles, animated-grid, light-rays) use Magic UI canvas/DOM animations. They require client-side JavaScript.
Performance Considerations
| Background | JS Bundle | Best For |
|---|---|---|
grid | None | Best Lighthouse scores |
dots | None | Clean, minimal look |
gradient | None | Colorful but lightweight |
animated-grid | ~3 KB | Balanced impact vs. performance |
light-rays | ~4 KB | Premium dramatic effect |
particles | ~5 KB | Rich visual, highest cost |
For best Lighthouse scores, use a CSS-based background. animated-grid offers a good balance.
Customizing a Background
Each background is a standalone component in components/blocks/backgrounds/. Edit the file directly to adjust colors, opacity, or animation speed. All backgrounds use CSS variables from the active theme and adapt to dark/light mode automatically.