REFERENCE
- Gallery page: https://magpui.com/en/i/sketched-door-opening-onto-data-1b23cb
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sketched-door-opening-onto-data-1b23cb/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sketched-door-opening-onto-data-1b23cb/clip.mp4
- Original post: https://x.com/nickbakeddesign/status/2115130404134846645 by @nickbakeddesign
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Ink sketch door: Hand-drawn black ink sketch of a simple panelled wooden door in its frame standing on a rough floor line, loose bold expressive strokes, editorial illustration style, pure white background, no color, front view, 3:4 aspect ratio, plus a separate version of the door leaf alone
BUILD: A looping hero animation for a brand section. A black ink hand-drawn door in a rough frame stands on a sketched floor line, with a serif headline above it ("Opening the door to more human AI."). The door swings open in perspective, revealing behind it a bright blue panel filled with columns of monospace characters that scramble rapidly; as the door reaches full open, a few characters in the middle settle into the words HUMAN and AI in white. Then the door swings closed and the loop restarts. It should feel editorial and handcrafted, the clean digital blue contrasting with the wobbly ink lines.
DESIGN SYSTEM: White background #FFFFFF, illustration about 420px wide centered, headline serif 28px #111111 centered above with 40px gap. Ink lines #0A0A0A, 3-6px rough strokes. Blue panel #1E6FE8 with characters 11px monospace uppercase in #0B2E73 at 70% opacity, highlighted words #FFFFFF bold, letter spacing 0.1em, grid of about 6 columns.
MOTION: Loop 5s. 0-400ms hold closed. Door opens 400-1600ms: the door leaf is a separate layer that scales X from 1 to about 0.25 with transform-origin left and a small skewY of -4deg for perspective, cubic-bezier(0.65,0,0.35,1). The blue panel is revealed by the same motion (clip-path from right edge). Characters re-randomize every 50ms; from 1400ms the target letters lock in one by one with 60ms stagger. Hold open 1600-3200ms with scramble continuing around the locked words. Close 3200-4400ms with the reverse easing while letters unlock. Ink lines boil subtly: swap between 3 slightly different SVG path versions every 120ms, stepped.
SECTIONS: Headline; door frame (static); door leaf (animated); blue data panel with scramble grid; floor line. States: closed, opening, open with locked words, closing.
IMPLEMENTATION: SVG for the ink drawing (door frame and leaf as separate groups, or an image asset with the leaf cut out), GSAP timeline for the loop, a small JS scramble routine writing into a CSS grid of spans. Pause when off screen with IntersectionObserver. prefers-reduced-motion: show the open door with the words locked, no scramble or boil. The animation is decorative: aria-hidden on the art, headline stays real text.
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 or illustrations from the original; draw your own placeholder sketch or use the generated asset, and pick your own words to reveal.
SUCCESS CHECK:
- The sketched door swings open in perspective and reveals a blue scrambling character panel.
- Characters settle into the chosen words while the door is open, then unlock as it closes.
- The loop pauses off screen and reduced motion shows a still open-door frame.
