Product Card Progressive Assemble
Product Card Progressive Assemble is a ui entrance & showcase Remotion shot (with a public demo.tsx). Watch the video preview, read the recipe notes, and copy the agent brief to implement it from tuned TSX.
- Category
- UI Entrance & Showcase
- Duration
- ~5.0s (150f@30fps)
- Energy
- Medium (continuous small events densely packed, no single explosion; forward push keeps the momentum)
- Styles
- 1
Recipe notes
A detail card assembles itself like fields being grabbed one by one — image→title→breadcrumb pills pop in sequence→original price appears then gets crossed-out and demoted, accent new price springs out→body text reveals line by line with a highlight block sweeping left to right→color swatches light up; the whole card pushes forward at a very slow scale the entire time
When to use it
capability showcase for product/item detail pages; main shot for "structured extraction""auto-fill""data grows itself" narratives
Intent
A detail card fading in as one piece only shows "there's a card". Field-by-field landing turns the card into a **form being filled**: each field arrives in turn, and the viewer's attention gets walked through the card's information structure once — where the image is, where the title is, where the price is, where the body's emphasis is. The price cross-out demotion is the piece's only semantic event (not "appearing" but "changing"), so it's placed in the middle at the most visible position.