Pricing Section With Animated Clouds

Pro

Three glass plan cards on a drifting cloud sky, with a yearly or monthly toggle and a highlighted middle seat.

When to use Pricing Section With Animated Clouds

Reach for this when the pricing page should feel like a landing, not a spreadsheet. The sky is the same drifting FBM cloud field as the animated clouds hero, copied into this file so the block installs alone. Three glass cards sit on it. Drift, Grove, and Range are named seats. Yearly and monthly share one pill. The unused period line stays in the layout so the cards do not shift. Grove is the filled action.

Skip it when the buyer needs a feature matrix or a live receipt. Clouds behind a comparison table are decoration. The shader pauses when the visitor asks for reduced motion. The shipped copy is a fictional field notebook called Bracken, so replace the plan names, the rates, and the feature lists before this goes to production. The palette follows light and dark. Do not import the hero. This file owns the canvas.

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-merge
Source
664 lines, 21 KB in one file
Install
wensity add pricing-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, pricing, clouds, webgl, saas
Last updated

More pricing sections