REFERENCE
- Gallery page: https://magpui.com/en/i/wireframes-resolve-into-finished-ui-79dac1
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/wireframes-resolve-into-finished-ui-79dac1/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/wireframes-resolve-into-finished-ui-79dac1/clip.mp4
- Original post: https://x.com/Jakubantalik/status/2113656694303551906 by @Jakubantalik
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a reusable generative reveal wrapper for a single UI card, with related text and image variants. The reveal should move from faint technical traces to a finished element. Demonstrate it with a compact financial chart card rather than a whole website.
DESIGN SYSTEM: Use a white stage, near-black #171917 finished card around 240px square, 20px corners, 20px padding, small neutral sans-serif labels at 12px and a prominent 26px numeric value. Add a green #58A66C and muted red #B35B5C candlestick chart above a four-option period selector. Construction overlays use fine #C9CECA lines, dotted boundaries, corner handles and tiny monospaced annotations. Text and image demonstrations can use large black sans-serif words and a placeholder flower photograph, respectively.
MOTION: On mount or explicit Replay, reveal the construction boundary over 300ms, then stagger fragmented marks and glyphs by 20ms. Resolve these into coherent strokes over 800ms using cubic-bezier(0.22,1,0.36,1). Fade construction annotations away over 250ms as the finished surface and chart appear over 450ms. For text, replace a sparse scrambled trailing edge with stable letters; for an image, crossfade its fine contour stage into the placeholder. These timings are rebuild targets.
SECTIONS: Idle placeholder; fine outline and scattered marks; resolving content; completed card with heading, value, small performance pill, chart and period selector; replay state. Keep the final content readable and stable.
IMPLEMENTATION: Use SVG paths and clip masks for chart and construction lines, and Motion for opacity, transforms and staggered text. Keep the real semantic card mounted, with decorative overlays hidden from assistive technology. Avoid generating random layouts on each frame; precompute seeded positions. Animate only the active demonstration, cap decorative fragments at 120, and clean up timers. Period controls must be keyboard operable with visible focus and selected state. With prefers-reduced-motion, show the finished card immediately.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts, map colors to the closest existing tokens, and never copy logos, brand names, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- A single replay progresses from technical traces into a complete readable card without layout shift.
- Construction marks disappear and controls remain functional after the reveal.
- Keyboard navigation and reduced-motion mode expose the same completed content.
