— how it works

From zero to
transfer-ready.

The default wireframe direction turns the how-it-works page into a scroll-driven story. The left preview stays pinned while the right column explains how the transfer plan assembles itself.

— how it works

Scroll through — the UI builds itself.

The sticky preview changes state as each planning step becomes active.

STICKY PREVIEW · STATE 2/3
Fall 2025
CS M30 · data structures
MATH M07 · calc 2
PHYS M20A · mechanics
★ Kai pick
↑ this morphs as you scroll ↓
01 · Tell us your goals

Who, what, where.

Your community college, your target UC or CSU, and your intended major become the route in under ninety seconds.

02 · Watch Kai build it

Your 2-year roadmap, animated.

Semester sequencing, IGETC coverage, and major prep organize themselves into a living transfer plan.

03 · Optimize & track

Every class, optimized.

When the roadmap is in place, Kai starts ranking live sections and the next semester becomes actionable instead of theoretical.

The sticky panel does the wow work. Students literally see the plan materialize as the page explains it.
This route is now aligned to the active wireframe direction instead of the older blue glass-card implementation.
Default direction A applied

See the planner
build itself.

The interaction is intentionally simple: a sticky left preview, a three-step narrative, and a clear transition back into the actual onboarding flow.

Scroll-locked storySticky preview morph