Ruixen Pro is now live.50+ premium components, templates, blocks, and lifetime updates.

Command Palette

Search for a command to run...

Docs
Cloud Background

Cloud Background

A flowing cloud background with WebGL shaders and theme support

Installation

Usage

import CloudBackground from "@/components/ruixen/cloud-background";
 
export default function App() {
  return (
    <div className="relative h-screen w-full">
      <CloudBackground darkTheme={false} resolutionScale={1.0} />
      <div className="relative z-10">{/* Your content here */}</div>
    </div>
  );
}

Props

PropTypeDefaultDescription
darkThemebooleanfalseWhether to use dark theme colors
resolutionScalenumber1.0Scale factor for rendering resolution