Skeleton Reveal
Skeleton Reveal 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.7s (172f: doodle 1s + swap-to-real 0.3s + skeleton roll-in 1.2s + push-in develop 3s)
- Energy
- Medium (narrative entrance; the point is the two "becomes real" transitions)
- Styles
- 1
Recipe notes
A three-tier fidelity reveal — draft → skeleton → content: hand-drawn doodle placeholders (boiling jitter) are replaced in one beat by gray-bar skeleton windows; after the skeleton list rolls in, the lens pushes closer and the gray bars develop row by row into avatars + word-by-word text, with the last word landing half a beat late
When to use it
"from nothing to something" entrance narrative for product UIs; the paragraph that first reveals the product interface after the opening
Intent
The UI entrance library is all "whole page in one shot" (fly-in / settle / wipe). This card splits the entrance into **three fidelity transitions**: hand-drawn doodle (idea) → gray-bar skeleton (structure) → real content (product); each transition is a "becomes real" payoff beat, and the viewer follows the full "sketch to product" narrative arc. The skeleton→content developing borrows loading-state grammar — users see skeleton screens every day; the moment they see gray bars they know "content is coming", the expectation is free. Division of labor with document-typewriter-reveal: that's **one document** being written block by block (content is the protagonist, you read the words); this card is **one interface** becoming real level by level (structure is the protagonist, text is the last-tier texture). Division of labor with ai-stream-response: that's evidence rows "streaming in" one by one (a list growing); this card is already-placed placeholders "developing" (layout decided early, fidelity upgrading).