Cloud Shader
Soft procedural clouds that drift across the sky. Tune speed, count, and colors with props.
Installation
Run the following command
npx shadcn@latest add @aceternity/cloud-shaderExamples
SaaS Hero Section
Banking above
the clouds
Altitude gives your finance team one home for cards, payments, and forecasting. Close the books in hours, not weeks, with automation that works while you sleep.
No credit card required · Free 14-day trial
Flight Booking Hero Section
Your window seat to anywhere on Earth
Search 400+ airlines, watch fares drop in real time, and book in under a minute. No hidden fees, no fine print, just you and the clouds.
Manu and 5 others saved 30% on their last trip
Plane Window Hero Section
Your window seat to anywhere on Earth
Search 400+ airlines, watch fares drop in real time, and book in under a minute. No hidden fees, no fine print, just you and the clouds.
Manu and 5 others saved 30% on their last trip
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Extra classes for the outer container. |
children | React.ReactNode | - | Content drawn above the cloud field. |
speed | number | 1 | Animation speed multiplier. |
count | number | 6 | Number of clouds (1-6). |
cloudColor | string | "#fbf8f2" | Cloud tint. |
skyTopColor | string | "#3876ba" | Sky color at the top. |
skyBottomColor | string | "#8cbfe8" | Sky color at the bottom. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
