REFERENCE
- Gallery page: https://magpui.com/en/i/engraved-steam-train-under-the-footer-90375a
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/engraved-steam-train-under-the-footer-90375a/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/engraved-steam-train-under-the-footer-90375a/clip.mp4
- Original post: https://x.com/alimdesigner_/status/2097580771334893836 by @alimdesigner_
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.
- Engraved stone viaduct: Wide vintage engraving illustration of a stone railway viaduct with seven arches crossing a valley, sepia line work, fine cross-hatching, on off-white paper, no train, panoramic 4:1, no text.
- Steam train sprite: Vintage engraving style steam locomotive with three wagons seen from the side, sepia line work and cross-hatching, matching an old book illustration, transparent background, centered, no text, 4:1.
BUILD
A clean footer with brand blurb and link columns, sitting above a wide engraving-style illustration of a stone viaduct; a steam train crosses it in a loop, puffing smoke that drifts and dissolves.
DESIGN SYSTEM
- Background #FFFFFF, footer text 12px #555, column titles 12px #111.
- Illustration in sepia line work #5A4636 on #FBF8F2, cross-hatched shading.
MOTION
- Train moves left to right across the viaduct over 14s linear, loops after a 2s pause.
- Smoke puffs spawn every 350ms, scale 0.4 to 1.6, drift up-left, fade over 2.5s.
- Starts when the footer enters the viewport.
SECTIONS
- Footer links.
- Viaduct illustration (static).
- Train sprite and smoke layer.
IMPLEMENTATION
- Illustration as an SVG or high-res PNG; train as a separate layer moved with transform; smoke as small SVG blobs.
- Generate the engraving with an image model if needed, then vectorize.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Train never overlaps the footer text.
- Animation pauses when off screen.
- Illustration scales to full width on mobile.
