Live Glance Strip

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<LiveGlanceStrip />

Installation

npx shadcn@latest add https://webberui.com/r/live-glance-strip.json

Usage

import { LiveGlanceStrip } from "@/components/ui/live-glance-strip";

<LiveGlanceStrip
  icon={<Rocket className="size-4" />}
  title="Production deploy"
  status="Building" // changing the value triggers the flip
  progress={0.6}
  position="fixed-bottom" // fixed to the bottom of the window in a real app; the docs preview uses 'inline'
>
  {/* The details shown once expanded */}
  <ul className="space-y-2 text-xs">
    <li>Install dependencies ✓</li>
    <li>Build and bundle …</li>
    <li>Deploy to edge nodes</li>
  </ul>
</LiveGlanceStrip>;

Controlled expansion:

const [open, setOpen] = React.useState(false);

<LiveGlanceStrip
  title="Production deploy"
  status="Deploying"
  expanded={open}
  onExpandedChange={setOpen}
>
  …
</LiveGlanceStrip>;

Props

LiveGlanceStrip

How it works

• The Live Activity metaphor: it borrows the information hierarchy of iOS Live Activities — a glance gives you only three things (icon, title, current status) and you tap in for the whole picture; a good fit for "still in progress" activities such as deployment progress, delivery tracking, and game scores
• Status flip: when the status value changes, AnimatePresence mode="popLayout" flips the old value out upward and the new one in from below, with overflow-hidden on the wrapper acting as a mask, producing a small split-flap scoreboard effect
• Progress track: the 2px thin track at the bottom is driven by scaleX (origin-left + spring), so even a jumping value advances smoothly along an elastic curve, and it carries role="progressbar" semantics
• Expansion morph: the pill body carries a layout spring, so mounting children grows the whole thing naturally and unmounting collapses it; the details fade in with a delay — open the box first, then serve. The inner layer is protected with layout="position" so during the growth the content only shifts and is never stretched
• Positioning: fixed-bottom centers it with a pointer-events-none wrapper, so only the pill body takes pointer events and it never blocks clicks elsewhere on the page
• Frosted-glass texture: a translucent base color plus backdrop-blur-xl, preserving that see-through feel in both light and dark themes
• Reduce motion: when the user has "reduce motion" enabled at the system level, the flip degrades to a fade in and out and the layout morph and progress spring are disabled in favor of direct switching; the first render still matches the SSR output
• Accessibility: assistive technology hears a plain-text "title: status" announcement through an sr-only role="status" live region, and animated nodes are always aria-hidden; the expansion trigger is a native button carrying aria-expanded and aria-controls