REFERENCE
- Gallery page: https://magpui.com/en/i/hero-with-falling-maple-leaves-7b4ef7
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hero-with-falling-maple-leaves-7b4ef7/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hero-with-falling-maple-leaves-7b4ef7/clip.mp4
- Original post: https://x.com/sucodeee/status/2111851097551782252 by @sucodeee
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.
- Hero landscape painting: Painted anime-style landscape, snowy conical mountain rising above a sea of clouds, bright blue sky, lush wind-swept green grass hill in the foreground, a large red maple tree on the right edge with a lone robed figure sitting beneath it seen from behind, soft daylight, high detail, wide 16:9, no text
- Maple leaf sprites: Set of 6 single red maple leaves at different angles and curls, painterly style matching an anime landscape, crimson to deep red, transparent background, square 1:1 each
BUILD: A full-viewport hero for a retreat or hotel: a painted landscape (snowy mountain, sea of clouds, grassy hill, a lone figure sitting under a large red maple tree on the right) with red maple leaves continuously detaching from the canopy and tumbling across the screen, over and behind the headline. The text appears after the first gust. It should feel calm, cinematic and seasonal.
DESIGN SYSTEM: Background image full bleed, object-fit cover, focal point right-center. Top bar 64px: left a small pill button "Home" with a back chevron (white #FFFFFF, 12px text #111111, radius 999px, padding 6px 10px) and a small wordmark in white 13px; right 3-4 nav links 12px white at 80% opacity, gap 24px, and a solid white "Book" button 12px #111111, radius 4px, padding 6px 12px. Headline left aligned at x 6vw, y about 38vh: large high-contrast serif, 64-72px desktop, 40px mobile, line-height 1.0, white, max 2 lines, subtle text-shadow 0 2px 24px rgba(0,0,0,0.25). Body copy below 14px white at 75%, max-width 420px. CTAs 24px under: primary white button 14px #111111, radius 4px, padding 12px 18px, plus a text link in white 80% with 16px gap. Bottom center a small dark pill 28px tall, #111111 at 80%, white 11px label with an icon. Leaf colors from #C1121F to #E63946 with some darker #7A0A12.
MOTION: Leaves: 40-70 sprites at a time, each 10-28px, spawned from the canopy area (top right 45% of the viewport). Each falls with gravity 30-60px/s, wind drift to the left 40-120px/s, sinusoidal sway amplitude 20-40px with period 1200-2400ms, rotation 90-360deg/s, and a flip effect by scaling X between 1 and -0.2 on the sway rhythm. Gusts every 4000-6000ms: wind speed eases up 2x over 800ms with cubic-bezier(0.4, 0, 0.2, 1) and back. Two depth layers: back layer (behind the text, 70% size, blur 1px) and front layer (over the text, full size). Intro: no leaves for 600ms, the first gust releases about 30 leaves, then headline lines fade and rise 16px, 700ms, stagger 120ms, cubic-bezier(0.22, 1, 0.36, 1); body and CTAs follow at +300ms. Nav fades in at 200ms delay, 500ms cubic-bezier(0, 0, 0.2, 1).
SECTIONS: Top bar (back pill, wordmark, nav, Book button), hero background art, back leaf layer, text block (headline, body, primary CTA, secondary link), front leaf layer, bottom center pill control.
IMPLEMENTATION: One canvas 2D layer per depth drawing pre-rendered leaf sprites with transforms; this handles 100+ leaves cheaply. Text is real HTML between the two canvases via z-index. Motion or plain CSS for the text intro. prefers-reduced-motion: show 12 static leaves scattered in place and the text without the rise. Pause the canvas when the hero is off-screen or the tab is hidden; cap devicePixelRatio at 2; 25 leaves under 768px. Keyboard: all nav links and CTAs focusable with a 2px white outline offset 3px; canvases use pointer-events none so they never block clicks.
ADAPT TO THE PROJECT: Reuse the project's existing tokens, buttons, nav and fonts; map colors to the closest tokens and use the project's serif for the headline if it has one. Do not copy logos, brand names, the original painting or copy; use a placeholder landscape image and draw a simple maple leaf as SVG.
SUCCESS CHECK:
- Leaves pass both behind and in front of the headline, and buttons stay clickable through them.
- A gust visibly speeds up the leaves every few seconds and the scene holds 60fps.
- With reduced motion on, nothing moves and the hero still reads complete.
