An onboarding flow is the set of intro screens a new user swipes through on first launch — each pitching one feature with an illustration, a headline, and a line of copy, with progress dots and a skip option. This snippet builds a complete, swipeable one inside a CSS phone frame in HTML, CSS, and vanilla JavaScript with no dependency, ready to adapt to any app.

A sliding track of full-width slides

All slides sit in a flex .ob-track where each slide is min-width: 100%, so they line up horizontally. Navigation is a single transform: translateX(-index * 100%) on the track, transitioned with a cubic-bezier ease — moving between screens is just changing one index and letting CSS animate the slide. There's no per-slide show/hide, which keeps state trivial and the motion smooth.

Swipe and buttons share one navigator

A go(i) function clamps the index, sets the transform, updates the dots, and relabels the button — every navigation path funnels through it. The Next button advances, Skip jumps to the last slide, and a pointer swipe (comparing start and end clientX against a 45px threshold) moves a slide in either direction. Because they all call go(), the dots, button label, and slide position can never desync.

Animated progress dots

The dots aren't just filled circles — the active one stretches into a pill (width animates from 7px to 22px) while the others stay small, the modern "worm" indicator. It's driven by toggling an .on class, with a CSS transition doing the morph, so it reads as a continuous progress bar split into segments.

Morphing blob illustrations

Each slide's art is an emoji glyph over a gradient blob whose organic shape comes from a multi-value border-radius (e.g. 42% 58% 63% 37% / 45% 38% 62% 55%) animated between two shapes on an infinite obMorph keyframe. It gives lively, on-brand artwork with zero images — swap the gradient and glyph per slide to match your features.

Context-aware controls

On the last slide the Next button becomes "Get started" and Skip hides, because skipping the final screen makes no sense — small touches that make the flow feel finished. Wire the final button to your home route or auth screen.

Reusing it

Keep the slide structure and replace the copy, glyphs, and gradients. Drop it into a phone mockup for presentations, or lift it out as a responsive web onboarding carousel.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't need to work out on your own why every interaction funnels through one function. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain precisely how the go(i) function keeps the translateX transform, the worm-style progress dots, and the button label from ever drifting out of sync, or why the pointer swipe compares clientX against a 45px threshold rather than reacting to any movement at all. The same assistant is useful for optimizing it too — ask whether the blob's animated multi-value border-radius keyframe is cheap enough to run on lower-end devices, or whether preloading the next slide's content would smooth the cubic-bezier transition further. It is equally handy for extending the flow: have it add a progress-based auto-advance timer, support more than three slides driven from a data array, or replace the emoji glyphs with SVG illustrations. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a swipeable mobile "onboarding carousel" in plain HTML, CSS, and JavaScript using only a single CSS transform for navigation — no carousel library, no per-slide show/hide.

Requirements:
- A horizontal flex track containing full-width slides (each slide min-width: 100%), where moving between slides is done entirely by setting one transform: translateX(-index * 100%) on the track, transitioned with a CSS cubic-bezier easing.
- A single go(index) function that clamps the index within bounds, applies the transform, updates a row of progress dots, and relabels the primary button — and make every navigation path (a Next button, a Skip button, and a swipe gesture) call only that one function so they can never disagree about the current slide.
- The progress dots must use a "worm" style: the active dot animates its width from a small circle to an elongated pill via a CSS transition triggered by toggling a single class, while inactive dots stay small circles.
- Implement swipe navigation with pointerdown recording a starting clientX and a window-level pointerup comparing the ending clientX; only change slides if the horizontal delta exceeds a defined threshold (e.g. 45px) in either direction, so small accidental drags are ignored.
- Each slide's illustration must be built with no images: an organic blob shape from an animated multi-value border-radius keyframe animation behind a centered emoji or icon glyph.
- On the final slide, change the primary button's label to something like "Get started" and hide the Skip control, since skipping the last screen doesn't make sense.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA three-screen onboarding flow renders in a phone frame.
2
Press NextThe track slides to the next screen and the dots advance.
3
SwipeDrag left or right to move between slides past a threshold.
4
Tap SkipJump straight to the final get-started screen.
5
Reach the endNext becomes Get started and Skip hides.
6
CustomizeSwap the copy, glyphs, and blob gradients per feature.

Real-world uses

Common Use Cases

App first-run intros

Introduce features inside a phone mockup.

Feature tours

A lighter alternative to an onboarding tour.

Lead into sign-in

Hand off to a mobile login screen.

Web onboarding

Lift it out as a carousel-style intro.

Product walkthroughs

Pair with a progress wizard for steps.

Learning sliders

A reference for translateX carousels and swipe.

Got questions?

Frequently Asked Questions

All slides live in a flex track, each at min-width 100%, so they sit side by side. Moving is a single transform: translateX(-index * 100%) on the track with a CSS transition, so changing the index animates the slide. There's no per-slide visibility toggling, which keeps the logic and the motion simple.

Every navigation — Next, Skip, and swipe — calls one go(i) function that clamps the index, sets the transform, updates the progress dots, and relabels the button. Because there's a single source of truth, the dots, the button text, and the visible slide can never drift out of agreement.

A pointerdown records the start X, and a window pointerup compares the end X. If the horizontal delta is less than -45 pixels it advances, more than +45 it goes back, otherwise it stays — a threshold that ignores tiny accidental drags. Listening for pointerup on the window catches releases even outside the track.

No. Each is an emoji glyph layered over a gradient blob whose organic shape comes from a multi-value border-radius animated between two shapes on an infinite keyframe. Swapping the gradient and glyph per slide gives distinct, lively artwork for each feature with no image assets to load.

Keep the active index in state and bind the track's transform to it. Implement Next, Skip, and swipe handlers that update the index. Render slides from a data array of glyph, title, and copy. The progress dots derive from the index. In Tailwind, set slides to w-full shrink-0 in a flex track and animate the active dot's width.

Loading…