Vibary.ai
Go Pro
← Vibe Coding

Feature Spotlight

The surrounding UI dims, a soft ring settles around one control, and a tooltip fades in beside it.

onboardingfriendlyelegantautomatic · finite · intermediate · ~0.9s
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.

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

/**
 * Vibary · Feature Spotlight
 *
 * The surrounding UI dims, a soft ring settles around one control, and

About this pattern

The coach mark that introduces one thing at a time: a new control after a release, the next action in a product tour, the button a first-run user keeps missing. The dim arrives first so the eye has somewhere to go, the ring settles onto the control from just outside its bounds, and the tip follows a beat later — staged, because all three arriving at once gives the eye nothing to follow. The dim is painted as an oversized shadow spread around a clear rect, so the highlighted control stays visible, clickable and untouched by layout.

Product tourNew feature calloutFirst-run tipDiscovery hint

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

    Tips that quiet their surroundings and point at a single control.

Related patterns