Pricing Section With Animated Clouds
ProThree 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
- Category
- Pricing Sections
- 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

