Integration Hub Map
Integration Hub Map 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
- windup ~0.5s + fast flip ~1.2s + icons all at once → pipes connect, two beats ~0.7s + delivery breathing ≥1.5s; whole piece 4.5–5s
- Energy
- Medium-high (the flip is the explosion, the delivery segment is the afterglow)
- Styles
- 1
Recipe notes
The old page flips 180° in one fast turn (its side edge flashes briefly) landing on a new hub page; five integration app icons pop in on the same frame, then five rainbow light-pipes connect all at once on the same frame, with delivery pulses flowing through the pipes continuously — "turn a new page, the whole ecosystem hooks in at once"
When to use it
integration/ecosystem capability sections (one product connecting everything); version-renewal narratives (old page flips into new); dark neon-toned feature climax
Intent
The flip is "changing eras": the old document page rotates the full 180° to become the new hub page — it must be a **complete flip, not a partial angle** (judgment); the flip motion is **fast flip + tail deceleration**, done in one continuous breath with no staged pauses (the "uniform" judgment: what the user meant by uniform is no pauses, not literal linear; the version pausing at the 90° side-edge was cut). The side-edge moment only "flashes" (1–3f pulse; the long glow platform was cut). The hook-in is **two-beat**: five icons pop in on the same frame (beat one) → five pipes start drawing and connect on the same frame (beat two) — simultaneous, so it reads "the ecosystem lands in one go"; staggered one-by-one connections read as negotiating one at a time (two rounds cut). After connecting, bright pulses in the pipes loop continuously from icons toward the hub — "delivery feel" is the life of the end state.