Installation
Usage
import GlassShipmentFlow from "@/components/ruixen/glass-shipment-flow";
export default function App() {
return <GlassShipmentFlow />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties | - | Additional styles for the container |
Features
- Stacked depth cards — two frosted-glass layers peeking above each card to create a deck-of-cards depth effect
- Status badges — orange "In Progress" pill with pulsing dot, blue "Delivered" pill with solid dot, monospace order IDs
- Price display — large bold amount with inline percentage change and dollar delta metrics
- Route visualization — orange filled origin dot, solid connecting line, hollow destination dot with full street addresses
- Timer pill — bordered pill with stopwatch icon and countdown in the card footer
- Travelling lights — animated SVG dashes with Gaussian blur glow flowing between the two cards
- Spring entrance — cards rise with smooth deceleration easing