Vibary.ai
Go Pro
← Vibe Coding

Theme Choice Preview

Picking a look repaints a small preview of the app: the new theme fades in over the old one, its rows rise in turn, and the selection ring slides to the chosen tile.

onboardingcalmminimalinteraction · finite · intermediate · ~0.4s
Interactive · click to play
Variant

The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.

263 lines · react + motion only
import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

/**
 * Vibary · Theme Choice Preview
 *
 * Picking light, dark or system during setup repaints a small preview
 * of the app before the person commits: the new look fades in over the

About this pattern

Asking someone to choose light, dark or system with three bare words makes them guess what they are agreeing to. This belongs in the appearance step of onboarding, the first-run setup of a desktop app, and the appearance page in settings. Each look is its own layer in a small preview of the app. The chosen one fades in on top of the old one and its rows rise a short way into place, one after another, so the repaint reads as the app being redrawn rather than a color flicker. The old layer clears only once it is covered, so the preview is never blank. The selection ring is a plain border that slides from the old tile to the new one as a short eased tween, tying the choice to its result. There are no springs and no text moves or scales. Under reduced motion the new look fades in and the ring jumps without travel.

Appearance step in onboardingFirst-run setup of a desktop appAppearance page in settingsLight, dark or system picker in a profile menu

Where it shows up

Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.

  • Set up your workspaceStep 2 of 4
    What should we call it?
    Ridgeline
    Who else is joining?
    3 invited
    Next
    Onboarding flow

    Choosing Dark fades the dark preview in over the light one and the ring slides to the Dark tile.

  • Ridgeline
    Appearance
    Inbox
    Starred
    Drafts
    Archive
    AppearanceNew
    Desktop notificationsAlert on mention and reply
    Weekly digestEvery Monday at 09:00
    SoundsPlay a tone for new messages
    Follow repliesTrack threads you post in
    Settings

    On the appearance page, picking System splits the preview into light and dark halves as the ring moves over.

Related patterns