127 Components
Clouds Drift
BackgroundsSeamless multi-layer CSS cloud parallax background where far, mid, and near cloud formations drift horizontally at independent speeds.
Clouds Drift · Daylight Cumulus
Parallax Cloud Layers
Three altitude layers of soft diffused cloud ellipses moving at independent translate3d velocities for seamless infinite drift.
Pure CSS · 3 Parallax Layers · Seamless Loop
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/clouds-drift.json"
Props
TypeScript props supported by <CloudsDrift />.
| Prop | Type | Default | Description |
|---|---|---|---|
| speed | number | 1 | Horizontal drift speed multiplier. |
| opacity | number | 0.85 | Overall cloud opacity multiplier (0.2 to 1). |
| variant | "day" | "sunset" | "night" | "day" | Atmospheric sky palette. |
| children | React.ReactNode | — | Optional foreground content rendered above the clouds. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Three depth planes (far, mid, near) moving on independent `translate3d(-50%, 0, 0)` infinite loops.
- Supports `day`, `sunset`, and `night` atmospheric color palettes.
- Pure CSS hardware-accelerated transforms with zero JavaScript animation loop.
Keyboard & Accessibility
- Marks decorative cloud layers with `aria-hidden='true'`.
- Interactive sky theme switcher buttons support keyboard focus.
- Maintains readable foreground contrast across all three sky presets.