Cloud Shader

Source: Aceternity UI ↗
Author: Aceternity UI
Licence: Aceternity UI licence (free component)

Loading…

A fragment shader drifts soft clouds across a blue sky.

Code

"use client";

import { CloudShader } from "@/lab/aceternity/ui/cloud-shader";

export default function CloudShaderDemo() {
  return <CloudShader className="h-full min-h-0 w-full" />;
}

Prompt

Build "Cloud Shader", a background animation. What it does: A fragment shader drifts soft clouds across a blue sky. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS. Technique: an HTML canvas, WebGL, a requestAnimationFrame loop. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://ui.aceternity.com/components/cloud-shader (Aceternity UI, Aceternity UI licence (free component)).