How It Works Section With Dotted Curve Steps
ProHow it works section with a centered heading, three illustrated step cards, and a dotted curve joining the mockups. Follows light and dark.
When to use How It Works Section With Dotted Curve Steps
Reach for this when three stages should read as a product walkthrough with small interface drawings, not a dated case study. How it works sits in the middle. A grey dotted curve joins the three mockups. Create Account, Upload Data, and Access Anywhere sit under the drawings. The red on the button, the upload arrow, and the check is the accent. Keep it.
Skip it when the stages are dates and durations. That is the zigzag timeline. Skip it when the proof is three photographs. That is the sticky scroll. Replace the three titles and sentences before this ships. Keep the dotted curve and the three drawings. Flattening this into a plain three column list removes the reason this layout exists. The section follows light and dark.
Block details
- Category
- How It Works Sections
- Renders
- JavaScript animation. Paints first, then animates
- Theme
- Follows the site theme in light and dark
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxframer-motiontailwind-merge- Source
- 283 lines, 10 KB in one file
- Install
wensity add how-it-works-section-with-dotted-curve-steps --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, how it works, dotted, curve, illustrations
- Last updated
