A bento card for a deploy pipeline: code ships, tests pass, a release goes live. Convey momentum.
# Core Message Extraction **"Code → Tests → Release: unstoppable forward momentum"** The card must visualize a *pipeline flow*—sequential, accelerating, inevitable. Motion should feel like stages *cascading through* the card, gaining velocity, culminating in a "live" burst. On hover, the pipeline re-triggers, reinforcing the sense of deployment as a repeatable, smooth process. This is *progress made visible*. --- --- ## Motion Rationale The animation **visualizes forward momentum through three sequential stages**—each stage enters with a 200ms stagger (cubic-bezier 0.23, 1, 0.32, 1) and pulsates independently once on-screen. Code (blue) enters first and pulses softly; Tests (green) follows with slightly brighter pulsation; Live (orange) culminates with an aggressive burst effect (16px box-shadow bloom). The entire sequence takes ~1.6s total, making the deployment feel **inevitable and accelerating**—like stages cascading through a pipeline at increasing intensity. On click, the animation re-triggers by remounting the component, reinforcing the card as an interactive **"run now" trigger**. Hover brightens the card's ambient glow and scales the icon, signalling interactivity. The staggered pulsation creates visual "hand-off" between stages—Code hands to Tests, Tests hands to Live—making the pipeline legible *without reading labels*. All movement respects prefers-reduced-motion by dropping animations but keeping opacity intact, preserving the stage information for accessibility.