Hero Section With Animated Clouds

Pro

Centered hero drifting over a WebGL cloud shader. Layered FBM noise bands blend a sky-blue-to-white daytime palette (deep navy at night), with a soft readability scrim, dual CTA buttons, and staggered content reveals. Adapts to light and dark mode.

When to use Hero Section With Animated Clouds

The only hero in this category that runs on a real canvas. Three.js has to load, a shader has to compile, and only then does the first cloud band appear, which on a mid range phone is a pause you can feel. Everything else here paints with the stylesheet. Knowing that is the whole decision: buy the atmosphere when the atmosphere is part of what you are selling, and skip it when it is scenery.

What you get for the cost is weather that never repeats, drifting from sky blue by day to deep navy at night, with a scrim under the copy so the text stays readable as the bands move beneath it. If it has to sit above the fold, put a still image behind the canvas so there is something on screen while the renderer starts, and check it once on a throttled connection before you decide it was worth it.

Block details

Renders
WebGL canvas. Compiles a shader before the first frame
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxframer-motionnext-themestailwind-mergethree
Source
446 lines, 18 KB in one file
Install
wensity add hero-section-with-animated-clouds --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, webgl, shader, clouds, sky, centered
Last updated

More hero sections