REFERENCE
- Gallery page: https://magpui.com/en/i/newsletter-hero-in-a-starlit-meadow-a87608
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/newsletter-hero-in-a-starlit-meadow-a87608/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/newsletter-hero-in-a-starlit-meadow-a87608/clip.mp4
- Original post: https://aster-template.modulify.website by Modulify
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.
- Starlit meadow: Dreamy night scene of rolling hills covered in glowing pink, orange and blue flowers and sparkling light dust, starry deep blue sky, shallow depth of field with blurred foreground flowers, bloom, cinematic, 16:9, empty space at the top for text
BUILD
A one-screen newsletter site for a monthly dispatch. A night sky over rolling hills covered in glowing flowers and sparkling dust, softly moving like a breeze, with a bold wide uppercase headline 'A field of quiet stars.', one line of copy and a glass email field with a round submit button.
DESIGN SYSTEM
- Sky #070A1F with faint stars; flowers glow pink #FF8FB1, orange #FFB067 and blue #8FA8FF with bloom.
- Headline: wide extended grotesk, 56px, uppercase, white, letter-spacing 0.02em, centered at 18% from the top.
- Copy: 14px, #FFFFFFB3, max 420px, centered.
- Email field: 420x44, background #FFFFFF14, backdrop blur 12px, 1px border #FFFFFF26, radius 999px; round 32px submit button with arrow inside.
MOTION
- Continuous: flowers sway with a slow noise-driven wind (2-4deg rotation, 5-8s period), sparkles drift and twinkle (opacity 0.2-1, random 1-3s), the hill ridge shimmers with a moving highlight.
- Depth of field: foreground flowers blurred and larger, background sharp and tiny.
- Field focus: border brightens to #FFFFFF66 and a soft glow, 200ms.
- On submit: button turns into a check, 300ms.
SECTIONS
1. Full-screen scene with headline, copy and email field.
2. Small footer line with past issues link.
IMPLEMENTATION
- Best: Three.js (or React Three Fiber) scene with instanced flowers, a particle system for sparkles and UnrealBloomPass; cap pixel ratio at 1.5.
- Cheaper fallback: a looping 10s background video (or the generated still with a CSS particle layer) behind the HTML form.
- Pause rendering when the tab is hidden.
- prefers-reduced-motion: show every section in its final state, no scroll-driven movement.
- Visible focus rings on every link and button; all nav reachable by keyboard.
- Lazy-load images below the fold, animate only transform and opacity.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders or the generated images listed separately.
SUCCESS CHECK
- The background moves continuously and smoothly at 60fps on a laptop.
- The headline and form stay readable on top (add a dark gradient behind them).
- The email form validates and shows a success state.
