demo · v142

Onboarding Stepper

A six-step onboarding flow rendered as a horizontal snapping carousel. The scroll marker group at the top is styled three ways — done (green), current (filled black), pending (faded) — using only :target-before, :target-current, and :target-after. Zero JavaScript for the visited-state styling.

progress
0%

1. Welcome

Pick a username and avatar. Nothing else asked yet.

2. Connect

Optional: link a workspace so we can suggest people to follow.

3. Notifications

Choose how loud the app should be: silent, important, or chatty.

4. Theme

Light, dark, or system. The theme picker drives every screen.

5. Tour

Three-tap overview of the main views and how to switch between them.

6. Done

You're set up. We saved your prefs — change them any time from settings.

:target-beforemarker matches a step that comes before the current snap target. Used for "done" styling.
:target-currentthe active snap target itself. Filled and prominent.
:target-afterupcoming steps. Faded.

relevant CSS

.scroller { scroll-marker-group: after; }
.step-card::scroll-marker { /* the dot in the strip */ }

.step-card:target-before::scroll-marker { background: green; }
.step-card:target-current::scroll-marker { background: black; }
.step-card:target-after::scroll-marker { opacity: 0.55; }

see also