Split-Stack Stepper

A high-impact, interactive split-screen layout animated with plain CSS transitions — no animation library. One side renders a narrative sequence of feature cards with glowing pill badges, while the opposite side maintains a sticky visual showcase container.

Unlike basic tab replacements, this engine applies dynamic mathematical depth tweens via GreenSock to stack previous visual cards on top of each other in a 3D deck format as the user progresses through the narrative.

SplitStepper orchestrates the responsive grid itself — you supply the narrative sequence and a JSX payload per card, and CSS transitions handle the stacking. Click any step in the scrolling column to watch the deck restack.

Split stepper

Text on the scrolling side, cardContent on the sticky deck.

Passsteps: as { id, stepNumber, title, description, cardContent }[] — cardContent is arbitrary JSX for the sticky card.
onStepChange: fires with the index whenever the reader clicks a new narrative step.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Split Stepper

npx shadcn@latest add @algorize-ui/split-stepper

components/custom/blocks/SplitStepperBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Split Stepper needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Sticky on the left

SetstickySide"left": to mirror the layout, moving the card deck opposite the narrative. Defaults to right.

Deck depth

cardOffset{16}: is the pixel Y-translation applied to each stacked card.
cardDepthScale{0.05}: shrinks each deeper card by that fraction.

Custom color

color: themes the active rail, badge and arrow. A hex is applied inline; a Tailwind class also works.

Props Reference

Component / Interface	Prop	Type	Default	Description
`SplitStepper`	`steps`	`SplitStep[]`	Required	An array defining the narrative step sequence and paired visual showcase cards.
`SplitStepper`	`stickySide`	`"left" \| "right"`	`"right"`	Determines which grid column remains sticky as a 3D visual card stack versus which column flows as a clickable narrative list.
`SplitStepper`	`cardDepthScale`	`number`	`0.05`	Controls the scaling mathematics. A value of `0.05` means each stacked background card shrinks by an additional 5% as it is pushed deeper into the 3D deck.
`SplitStepper`	`cardOffset`	`number`	`16`	The absolute pixel distance applied to the vertical Y-axis translation of stacked background cards, creating the staggered deck effect.
`SplitStepper`	`color`	`string`	`theme primary`	The global theme color applied to active card borders, step index badges, glowing pill tags, and indicator arrows. Accepts hex codes or Tailwind utility classes.
`SplitStepper`	`onStepChange`	`(index: number) => void`	`undefined`	Optional callback fired whenever the user clicks on a new narrative step in the sequence.
`SplitStepper`	`className`	`string`	`undefined`	Custom Tailwind CSS classes to apply to the outermost responsive grid wrapper.
`SplitStep`	`id`	`string`	Required	A unique identifier string required for safe React list rendering.
`SplitStep`	`stepNumber`	`string`	Required	Formatted numerical string (e.g., `"01"`, `"02"` ) rendered inside the step index badge.
`SplitStep`	`title`	`string`	Required	Primary headline text displayed prominently on the narrative sequence card.
`SplitStep`	`description`	`string`	Required	Detailed paragraph text explaining the specific feature or step in the workflow.
`SplitStep`	`tags`	`string[]`	`undefined`	An optional array of keyword strings rendered as interactive pill badges underneath the description. Glows with the active theme color when selected.
`SplitStep`	`cardContent`	`React.ReactNode`	Required	The custom JSX/UI payload (e.g., analytics charts, terminals, mockups) rendered inside the sticky 3D card for this specific step.
`SplitStep`	`color`	`string`	`"bg-zinc-900 text-white"`	Optional Tailwind background and border color classes applied to the specific showcase card surface (e.g., `"bg-[#090a14] border-indigo-500/20"`).