REFERENCE
- Gallery page: https://magpui.com/en/i/halftone-city-train-landing-hero-48975f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/halftone-city-train-landing-hero-48975f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/halftone-city-train-landing-hero-48975f/clip.mp4
- Original post: https://x.com/traschcannot/status/2116455343782056373 by @traschcannot
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.
- Halftone skyline layers: Wide flat vector-style city skyline in black ink line art with halftone stipple textures, periwinkle dotted pixel-grid clouds and buildings, a large flat orange sun disc, round dark trees in front, an elevated monorail track with a small train, warm off-white paper background, no text, 16:5 aspect ratio, separable layers
BUILD: Build a calm, editorial transit-app landing hero where a small elevated train glides across a halftone-and-ink city illustration. The page is a warm off-white canvas with a large serif headline that mixes upright black text with one italic, indigo-colored phrase, a short grey subcopy line, two pill buttons, and a wide cityscape strip along the bottom of the viewport: engraved black-and-white buildings, a big flat orange sun disc behind them, dotted blue pixel-grid clouds and buildings, rounded dark trees in front, and a monorail track with a moving train. It should feel crafted, quiet and a little nostalgic, like a printed poster that comes alive.
DESIGN SYSTEM: Layout: centered single column, max content width about 720px for text, cityscape full-bleed and anchored to the bottom, taking roughly the lower 45% of the first viewport. Top nav: slim bar with a small round logo mark plus wordmark placeholder at left, 4 small text links centered, a small outlined pill button at right (13px text). Beneath the nav a thin row of tiny dots as a decorative divider. Typography: headline in a high-contrast editorial serif (Tiempos / Newsreader style) at about 56-64px desktop, line-height 1.05, letter-spacing -0.02em, ink black (#141414), with the key phrase in the italic serif cut colored indigo (#4b4fd6); subcopy in a clean grotesque sans 14-15px, grey (#6b6b66), max 52ch; a tiny eyebrow row of three status chips (8-11px sans, with small colored dots) above the headline. Colors: background #f7f5ef, ink #141414, indigo #4b4fd6 and light periwinkle (#aab0f5) for the dotted shapes, sun orange #f08a3c, tree black #1b1b1b, grey stone #bdbdb8. Buttons: primary is a black pill (height 36px, padding 0 16px, text off-white 13px, small arrow), secondary is an outlined pill with 1px #141414 border on transparent. Surfaces: no shadows on UI, only flat fills; illustration uses stipple/halftone dot textures and fine line hatching.
MOTION: (1) Train travel: the train travels left-to-right along the diagonal track, entering from the left edge and leaving past the right edge, translateX about 120vw over 9-12 s, linear easing, with a follow-the-track rotation of about -3deg to match the slope; loop with a 1.5 s pause. (2) Clouds: the dotted blue cloud shapes drift horizontally 20-40px over 14-20 s, cubic-bezier(0.45, 0, 0.55, 1), alternate direction. (3) Sun: a very slow scale pulse 1 to 1.03 over 6 s with the same easing. (4) Page load: headline lines fade up 16px over 700ms, cubic-bezier(0.22, 1, 0.36, 1), staggered 90ms, then buttons at 350ms delay, then the skyline rises 24px into place over 900ms. (5) Buttons: on hover the black pill lifts 1px and the arrow shifts 3px right in 180ms ease-out.
SECTIONS: For this hero component: nav bar; eyebrow chips row; headline with italic accent phrase; subcopy; button pair (primary + secondary); layered skyline illustration at the bottom with sun, clouds, buildings, trees, track and train. Layer order back to front: sun, dotted clouds and far buildings, near line-art buildings, track and train, trees. States: idle (train moving), hover on buttons, reduced-motion (train parked mid-track, everything else static).
IMPLEMENTATION: Build the skyline as layered inline SVG or separate transparent PNG/SVG layers with absolute positioning so each layer animates independently; use CSS transforms (translate3d, rotate) with CSS keyframes for the train, clouds and sun, and Motion or GSAP only for the staggered entrance timeline. Keep the train on its own compositing layer (will-change: transform) and animate only transform/opacity. Respect prefers-reduced-motion: stop the train, clouds and sun, keep the entrance as a simple fade. Make buttons real links/buttons with visible 2px indigo focus rings (offset 2px) and keyboard focus order nav, then CTAs. Performance: illustration under 300KB total, pause animations when the tab is hidden or the hero is off screen using IntersectionObserver. Responsive: on mobile reduce headline to 38-42px, crop the skyline to the central 60% and keep the train visible.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, typography, button components and spacing scale; map the colors above to the closest existing tokens. Do not copy any logo, brand name, copy, photography or illustration from the original; use placeholder wordmark and placeholder skyline artwork that you draw yourself or generate.
SUCCESS CHECK:
- The train loops across the skyline smoothly at 60fps using only transform animations and parks when reduced motion is on.
- The headline mixes upright and italic indigo serif text and stays readable above the illustration at desktop and mobile widths.
- Layered skyline (sun, dotted clouds, buildings, track, trees) is full-bleed at the bottom and nothing overlaps the buttons.
