REFERENCE
- Gallery page: https://magpui.com/en/i/hardware-unfolds-into-exploded-diagrams-04e44d
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hardware-unfolds-into-exploded-diagrams-04e44d/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hardware-unfolds-into-exploded-diagrams-04e44d/clip.mp4
- Original post: https://x.com/jakubkrehel/status/2114379959263502712 by @jakubkrehel
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 an isolated technical animation showing computer hardware separating into exploded isometric layers. Show a closed hard drive, its separated lid, actuator, circular platters, housing and circuit board; continue with layered chips, a floppy disk and a triple-fan graphics card. Keep a white field and delicate engineering linework rather than photorealistic materials.
DESIGN SYSTEM: Center each object in a responsive 600px square stage. Use an orthographic isometric view, white #FFFFFF background, 1px gray #8B8B8B outlines, pale #EEEEEE surfaces and occasional #BDBDBD internal layers. Tiny uppercase monospaced labels around 9px and hairline leaders identify selected hard-drive parts. Reserve sparse pink and green accents for the small chip stack. No enclosing card or navigation.
MOTION: Reconstruction targets: on entry show the assembled object for 600ms, then translate each layer along the vertical screen axis to an exploded spacing of 24-50px over 1000ms with 70ms stagger and cubic-bezier(0.22,1,0.36,1). Fade labels in over 250ms after separation. Hold 900ms, then reassemble over 800ms using cubic-bezier(0.4,0,0.2,1); crossfade to the next hardware diagram over 300ms. Keep the camera angle fixed and preserve alignment between parts.
SECTIONS: Assembled device; separated technical layers; annotated hard-drive state; alternate chip, floppy and graphics-card diagrams. Use a contained sequence, not an entire website.
IMPLEMENTATION: Use layered SVG isometric paths and GSAP timelines for crisp scalable lines and coordinated layer transforms. Draw simplified original geometry with separate groups for every physical layer; do not use a flat image and pretend it separates. Keep stroke widths stable with non-scaling-stroke. Pause offscreen. Provide accessible description and keyboard-operable pause/replay controls with visible focus. Under prefers-reduced-motion show a static exploded diagram with manual next/previous controls. Avoid heavy blur, live shadows and continuous geometry recalculation.
ADAPT TO THE PROJECT: Reuse the project's design tokens, components and fonts; map colors to the nearest existing tokens. Never copy logos, brand names, photos or illustrations from the original; draw original simplified diagrams or use placeholders.
SUCCESS CHECK:
- All layers maintain their shared isometric alignment while separating.
- Thin outlines remain legible on mobile and labels never overlap.
- Pause, replay and reduced-motion alternatives work without autoplay dependence.
