Step 01
Understand
Listen before shaping the answer
Collect the request, its context, and the examples that reveal what a useful outcome should actually feel like.
How It Works
Premium process sections that turn an abstract workflow into a clear, animated story with visible steps and purposeful product motion.
Centered process cards
how-it-works-centered-cards.tsxA centered process introduction followed by three independent cards with compact animated product scenes and clear supporting copy.
How it works
Three steps. One clear outcome.
A considered process keeps the original context connected to every decision, from the first request to the finished release.
Step 02
Align
Make one direction easy to follow
Turn the signal into a focused brief with clear decisions, an owner, and the next move everyone can see.
Step 03
Deliver
Close the loop with confidence
Review the finished work against the original intent, publish it, and keep the result visible after launch.
Install
$ bunx --bun shadcn add @beui-pro/how-it-works-centered-cards
Cinematic process grid
how-it-works-process-grid.tsxA sharp three-column process narrative with all steps visible, distinct capture-to-launch illustrations, direct selection, and motion contained inside each scene.
How it works
One clear path fromraw input to release.
Capture what matters, shape it into an aligned plan, and move it live without losing the thinking that got you there.
See the workflowInstall
$ bunx --bun shadcn add @beui-pro/how-it-works-process-grid
Editorial story stack
how-it-works-story-stack.tsxA spacious alternating process story with large narrative typography, atmospheric shader scenes, glass interface details, and scroll-triggered editorial reveals.
A simpler way to work
From scattered contextto a confident release.
Three considered steps keep the original signal connected to every decision that follows.
1
Collect
Start with the full picture
Bring customer language, internal context, and the original request together before deciding what to build. Nothing is summarized away too early, so the team can see the evidence behind the brief and return to it when priorities change.
2
Decide
Make the next move obvious
Turn the shared context into a focused outcome, clear ownership, and a plan the whole team can follow. Make tradeoffs explicit and leave every owner with a next move they can act on without another meeting.
3
Deliver
Ship without losing the story
Review the final work against the original intent, publish it, and keep the result visible after launch. Connect the shipped version back to the decision that shaped it and leave a useful record for the next release.
Install
$ bunx --bun shadcn add @beui-pro/how-it-works-story-stack
Guided walkthrough
how-it-works-walkthrough.tsxA focused interactive walkthrough with one atmospheric product canvas, three always-visible selectable steps, soft scene morphs, and viewport-aware autoplay.
A guided workflow
See the work take shape,one decision at a time.
Follow the complete path without hiding the context between steps.
Try the workflowMaya
Can we keep the review context beside the work?
Jon
The team needs one place to see what changed.
Customer call
Make the next step obvious without another meeting.
Install
$ bunx --bun shadcn add @beui-pro/how-it-works-walkthrough
Progressive card deck
how-it-works-card-deck.tsxAn interactive fixed-width process row that extends beyond the viewport, then pulls each full card into a layered stack as the next step takes focus.
How it works
A clear path fromfirst thought to finished work.
Move through the process one decision at a time. Use the controls to fold completed steps into the deck.
Install
$ bunx --bun shadcn add @beui-pro/how-it-works-card-deck