Clouds Shader Background

A self-contained WebGL cloudscape built from the supplied Shadertoy-style noise shader.

Customize

The cloud field uses the supplied Shadertoy-style uniforms and responds to pointer clicks through iMouse.

Props

NameTypeDefault

animate

Animate the cloud movement; reduced-motion preferences are respected.

booleantrue

className

Optional wrapper classes.

string—

Install

Add the component directly to your configured component directory.

terminal

pnpm dlx shadcn@latest add https://awwwardedui.vercel.app
/r/clouds-shader-background.json

Usage

terminal

import { CloudsShaderBackground } from "@/components/ui/clouds-shader-background"

<section className="relative h-96 overflow-hidden">
  <CloudsShaderBackground />
  <div className="relative z-10 p-8 text-white">Your content</div>
</section>

Implementation prompt

A ready-to-use integration brief for a coding agent.

Install and integrate the Clouds Shader Background component from the AwwwardWinning UI shadcn registry.

Use the provided registry command and preserve the component inside the project's configured component directory.

Integration requirements:
- Replace the demo content with content already present in the application.
- Preserve the application's typography, colors, spacing, and border-radius tokens.
- Place the component inside a relative, overflow-hidden hero or atmospheric feature section.
- Preserve semantic HTML and keyboard accessibility.
- Do not introduce global styles, fixed IDs, or unnecessary dependencies.
- Do not rebuild unrelated sections of the page.
- Keep the component responsive and respect reduced-motion preferences.
- Confirm the registry component installed successfully before integration.

Registry command:
pnpm dlx shadcn@latest add https://awwwardedui.vercel.app
/r/clouds-shader-background.json

Dependencies

None

Touch

full

Motion

Reduced-motion support