Page backgrounds

Add the "Hills" animated background from Dowel UI to this project. What it looks like: Rolling hills fading into morning mist, layered for parallax. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="hills" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-slate-950">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="hills" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a light scene in both colour schemes, so set text over it in text-slate-950 and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="hills" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-slate-950">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="hills" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Storm Sea" animated background from Dowel UI to this project. What it looks like: A heaving sea under racing cloud, lit now and then by a flash. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="storm-sea" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="storm-sea" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a dark scene in both colour schemes, so set text over it in text-white and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="storm-sea" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="storm-sea" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Meadow" animated background from Dowel UI to this project. What it looks like: Tall grass bending in gusts of wind against a warm evening sky. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="meadow" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-slate-950">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="meadow" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a light scene in both colour schemes, so set text over it in text-slate-950 and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="meadow" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-slate-950">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="meadow" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Petals" animated background from Dowel UI to this project. What it looks like: A slow, layered bloom turning in place among drifting pollen. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="petals" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="petals" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a dark scene in both colour schemes, so set text over it in text-white and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="petals" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="petals" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Glass Wave" animated background from Dowel UI to this project. What it looks like: Ribbons of tinted glass folding and twisting, with a travelling highlight. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="glass-wave" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="glass-wave" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a dark scene in both colour schemes, so set text over it in text-white and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="glass-wave" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="glass-wave" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Liquid Metal" animated background from Dowel UI to this project. What it looks like: Molten chrome folding over itself, reflecting a hard horizon. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="liquid-metal" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="liquid-metal" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a dark scene in both colour schemes, so set text over it in text-white and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="liquid-metal" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="liquid-metal" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Silk" animated background from Dowel UI to this project. What it looks like: Folds of satin catching the light as they slide across each other. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="silk" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="silk" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a dark scene in both colour schemes, so set text over it in text-white and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="silk" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="silk" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Mesh Gradient" animated background from Dowel UI to this project. What it looks like: Four pools of the theme's colours wandering and blending, with fine grain. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="mesh-gradient" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="mesh-gradient" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="mesh-gradient" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="mesh-gradient" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Topography" animated background from Dowel UI to this project. What it looks like: Contour lines of a slowly shifting terrain, every fifth one in the accent. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="topography" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="topography" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="topography" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="topography" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Particle Ocean" animated background from Dowel UI to this project. What it looks like: A sea made of points of light, swelling towards a glowing horizon. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="particle-ocean" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="particle-ocean" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a dark scene in both colour schemes, so set text over it in text-white and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="particle-ocean" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="particle-ocean" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Nebula" animated background from Dowel UI to this project. What it looks like: Billowing gas clouds threaded with dust lanes over a field of stars. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="nebula" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="nebula" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a dark scene in both colour schemes, so set text over it in text-white and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="nebula" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="nebula" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Warp" animated background from Dowel UI to this project. What it looks like: Stars streaking past from a bright vanishing point. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="warp" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="warp" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a dark scene in both colour schemes, so set text over it in text-white and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="warp" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="warp" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Helix" animated background from Dowel UI to this project. What it looks like: A double helix of glowing beads and rungs turning on a diagonal. It is drawn with WebGL. Steps:1. Install the component as source: `npx @dowel-ui/cli add shader-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { ShaderBackground } from "@/components/ui/shader-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="helix" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="helix" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}``` 4. Readability: It is a dark scene in both colour schemes, so set text over it in text-white and keep long copy on a surface (a card with a translucent background and backdrop-blur).5. Customise only through props: `preset`, `colors` (up to four theme tokens such as "primary" or any CSS colour, in the order the scene uses them), `speed`, `scale`, `grain`, `vignette`, `fade` ("edges" | "top" | "bottom") and `resolution` (lower it, e.g. 0.6, on very large screens). Rules:- Use one animated background per page.- Each one is a WebGL context; never render more than a few on a page.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { ShaderBackground } from "@/components/ui/shader-background"; export function Hero() {  return (    <ShaderBackground preset="helix" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-white">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </ShaderBackground>  );}

import { ShaderBackground } from "@/components/ui/shader-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <ShaderBackground preset="helix" attach="viewport">          {children}        </ShaderBackground>      </body>    </html>  );}

Add the "Aurora Curtain" animated background from Dowel UI to this project. What it looks like: Streaked bands of light hung from the top, shearing slowly past each other. It is drawn with CSS. Steps:1. Install the component as source: `npx @dowel-ui/cli add aurora-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { AuroraBackground } from "@/components/ui/aurora-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { AuroraBackground } from "@/components/ui/aurora-background"; export function Hero() {  return (    <AuroraBackground variant="curtain" intensity={0.9} className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </AuroraBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { AuroraBackground } from "@/components/ui/aurora-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <AuroraBackground variant="curtain" intensity={0.9} className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/aurora-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { AuroraBackground } from "@/components/ui/aurora-background"; export function Hero() {  return (    <AuroraBackground variant="curtain" intensity={0.9} className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </AuroraBackground>  );}

import { AuroraBackground } from "@/components/ui/aurora-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <AuroraBackground variant="curtain" intensity={0.9} className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}

Add the "Aurora Glow" animated background from Dowel UI to this project. What it looks like: Three soft fields of the theme's colours wandering about the box. It is drawn with CSS. Steps:1. Install the component as source: `npx @dowel-ui/cli add aurora-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { AuroraBackground } from "@/components/ui/aurora-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { AuroraBackground } from "@/components/ui/aurora-background"; export function Hero() {  return (    <AuroraBackground variant="glow" intensity={0.9} className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </AuroraBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { AuroraBackground } from "@/components/ui/aurora-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <AuroraBackground variant="glow" intensity={0.9} className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/aurora-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { AuroraBackground } from "@/components/ui/aurora-background"; export function Hero() {  return (    <AuroraBackground variant="glow" intensity={0.9} className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </AuroraBackground>  );}

import { AuroraBackground } from "@/components/ui/aurora-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <AuroraBackground variant="glow" intensity={0.9} className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}

Add the "Cosmic Orbits" animated background from Dowel UI to this project. What it looks like: A seeded star field with orbiting bodies, rings and a glowing core. It is drawn with Canvas 2D and reacts to the pointer. Steps:1. Install the component as source: `npx @dowel-ui/cli add cosmic-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { CosmicBackground } from "@/components/ui/cosmic-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { CosmicBackground } from "@/components/ui/cosmic-background"; export function Hero() {  return (    <CosmicBackground className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </CosmicBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { CosmicBackground } from "@/components/ui/cosmic-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <CosmicBackground className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/cosmic-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { CosmicBackground } from "@/components/ui/cosmic-background"; export function Hero() {  return (    <CosmicBackground className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </CosmicBackground>  );}

import { CosmicBackground } from "@/components/ui/cosmic-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <CosmicBackground className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}

Add the "Starfield" animated background from Dowel UI to this project. What it looks like: Drifting stars at three depths, with the occasional shooting star. It is drawn with Canvas 2D and reacts to the pointer. Steps:1. Install the component as source: `npx @dowel-ui/cli add stars-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { StarsBackground } from "@/components/ui/stars-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { StarsBackground } from "@/components/ui/stars-background"; export function Hero() {  return (    <StarsBackground shootingStars className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </StarsBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { StarsBackground } from "@/components/ui/stars-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <StarsBackground shootingStars className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/stars-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { StarsBackground } from "@/components/ui/stars-background"; export function Hero() {  return (    <StarsBackground shootingStars className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </StarsBackground>  );}

import { StarsBackground } from "@/components/ui/stars-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <StarsBackground shootingStars className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}

Add the "Black Hole" animated background from Dowel UI to this project. What it looks like: Rings and spokes falling into a well, bending toward the centre. It is drawn with Canvas 2D and reacts to the pointer. Steps:1. Install the component as source: `npx @dowel-ui/cli add hole-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { HoleBackground } from "@/components/ui/hole-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { HoleBackground } from "@/components/ui/hole-background"; export function Hero() {  return (    <HoleBackground shape="well" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </HoleBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { HoleBackground } from "@/components/ui/hole-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <HoleBackground shape="well" className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/hole-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { HoleBackground } from "@/components/ui/hole-background"; export function Hero() {  return (    <HoleBackground shape="well" className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </HoleBackground>  );}

import { HoleBackground } from "@/components/ui/hole-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <HoleBackground shape="well" className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}

Add the "Constellation" animated background from Dowel UI to this project. What it looks like: Stars pulled toward the pointer, linked to their neighbours by faint lines. It is drawn with Canvas 2D and reacts to the pointer. Steps:1. Install the component as source: `npx @dowel-ui/cli add gravity-stars-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { GravityStarsBackground } from "@/components/ui/gravity-stars-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { GravityStarsBackground } from "@/components/ui/gravity-stars-background"; export function Hero() {  return (    <GravityStarsBackground connections className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </GravityStarsBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { GravityStarsBackground } from "@/components/ui/gravity-stars-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <GravityStarsBackground connections className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/gravity-stars-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { GravityStarsBackground } from "@/components/ui/gravity-stars-background"; export function Hero() {  return (    <GravityStarsBackground connections className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </GravityStarsBackground>  );}

import { GravityStarsBackground } from "@/components/ui/gravity-stars-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <GravityStarsBackground connections className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}

Add the "Fireworks" animated background from Dowel UI to this project. What it looks like: Rockets launching on their own and bursting into falling sparks. It is drawn with Canvas 2D and reacts to the pointer. Steps:1. Install the component as source: `npx @dowel-ui/cli add fireworks-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { FireworksBackground } from "@/components/ui/fireworks-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { FireworksBackground } from "@/components/ui/fireworks-background"; export function Hero() {  return (    <FireworksBackground autoLaunch className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </FireworksBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { FireworksBackground } from "@/components/ui/fireworks-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <FireworksBackground autoLaunch className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/fireworks-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { FireworksBackground } from "@/components/ui/fireworks-background"; export function Hero() {  return (    <FireworksBackground autoLaunch className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </FireworksBackground>  );}

import { FireworksBackground } from "@/components/ui/fireworks-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <FireworksBackground autoLaunch className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}

Add the "Bubbles" animated background from Dowel UI to this project. What it looks like: Blurred, gooey blobs of colour floating and merging. It is drawn with CSS and reacts to the pointer. Steps:1. Install the component as source: `npx @dowel-ui/cli add bubble-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { BubbleBackground } from "@/components/ui/bubble-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { BubbleBackground } from "@/components/ui/bubble-background"; export function Hero() {  return (    <BubbleBackground className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </BubbleBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { BubbleBackground } from "@/components/ui/bubble-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <BubbleBackground className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/bubble-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { BubbleBackground } from "@/components/ui/bubble-background"; export function Hero() {  return (    <BubbleBackground className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </BubbleBackground>  );}

import { BubbleBackground } from "@/components/ui/bubble-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <BubbleBackground className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}

Add the "Gradient Mesh" animated background from Dowel UI to this project. What it looks like: A drifting CSS mesh of the theme's colours with a fine grain. It is drawn with CSS and reacts to the pointer. Steps:1. Install the component as source: `npx @dowel-ui/cli add gradient-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { GradientBackground } from "@/components/ui/gradient-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { GradientBackground } from "@/components/ui/gradient-background"; export function Hero() {  return (    <GradientBackground variant="mesh" grain className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </GradientBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { GradientBackground } from "@/components/ui/gradient-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <GradientBackground variant="mesh" grain className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/gradient-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.

import { GradientBackground } from "@/components/ui/gradient-background"; export function Hero() {  return (    <GradientBackground variant="mesh" grain className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </GradientBackground>  );}

import { GradientBackground } from "@/components/ui/gradient-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <GradientBackground variant="mesh" grain className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}

Add the "Hexagon Grid" animated background from Dowel UI to this project. What it looks like: A honeycomb of cells that light up under the pointer and pulse when idle. It is drawn with SVG and reacts to the pointer. Steps:1. Install the component as source: `npx @dowel-ui/cli add hexagon-background`. If the project has no Dowel setup yet, run `npx @dowel-ui/cli init` first. Do not install it from npm or copy it from anywhere else.2. Import it with `import { HexagonBackground } from "@/components/ui/hexagon-background";` (adjust the path to wherever the CLI wrote it).3. Use it as the background of the landing page's hero section: ```tsximport { HexagonBackground } from "@/components/ui/hexagon-background"; export function Hero() {  return (    <HexagonBackground idle className="min-h-[80vh]">      <div className="mx-auto flex min-h-[80vh] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center text-foreground">        <h1 className="text-5xl font-semibold tracking-tight">Your headline</h1>        <p className="text-lg opacity-80">One sentence about the product.</p>      </div>    </HexagonBackground>  );}```    Or, to put it behind the whole site, in the root layout: ```tsximport { HexagonBackground } from "@/components/ui/hexagon-background"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className="bg-background">        <HexagonBackground idle className="fixed inset-0 -z-10" />        <div className="relative">{children}</div>      </body>    </html>  );}``` 4. Readability: It follows the active theme in light and dark mode, so keep the theme's text colours (text-foreground, text-muted-foreground).5. Customise only through the component's documented props (see https://dowelui.com/docs/components/hexagon-background). Rules:- Use one animated background per page.- Keep it decorative: never put interactive controls inside the background layer itself. If <body> or a wrapper paints an opaque background, it hides a -z-10 layer; move that background to <html>.- Do not add your own requestAnimationFrame loop, CSS animation or video for this effect; the component already pauses off-screen and in hidden tabs, and holds still under prefers-reduced-motion.- It is aria-hidden decoration: do not give it a role, label or tab stop, and keep all real content as children (or siblings) above it.- Do not change the component's source to restyle it; pass props instead, so `dowel update` can still update it.