REFERENCE
- Gallery page: https://magpui.com/en/i/calm-landing-with-outlined-typography-582726
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/calm-landing-with-outlined-typography-582726/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/calm-landing-with-outlined-typography-582726/clip.mp4
- Original post: https://serene-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.
- Outdoor editorial hero photograph: Wide 16:9 editorial photograph of an anonymous person in an olive jacket walking between warm weathered stone walls, open sky above, soft natural daylight, earthy subdued colors, cinematic composition with generous darker negative space in the lower half for cream typography, no logos, no text.
BUILD: Build a calm productivity-software landing page with a photographic hero followed by a dark, typography-led problem section. The contrast between human photography and large outlined serif words is the main idea. Recreate only the sections visible in the reference: the hero and the problem section, without inventing pricing or a footer.
DESIGN SYSTEM: Use a full-width hero approximately 90vh tall with a cover photograph and a dark green-to-transparent gradient rising from the bottom. Place a restrained high-contrast serif headline at the lower left, approximately 76px on desktop, 1.02 line-height, with a 64px side inset and a maximum width of 850px. Use small 12-14px sans-serif labels and supporting copy. Estimate colors as forest-black #111B14, ivory #F4F1DD, muted olive #8B9075. Place a short support sentence and a small ivory pill download CTA on the same row beneath the heading. Add a few tiny dark translucent status chips across the photo, with subtle pale borders and 20px radii. The next section uses the same dark background, generous vertical breathing room and three centered serif lines, approximately 110px desktop and 48px mobile. Inactive letters have a fine 1px muted outline with transparent fill; active lines fill ivory. Avoid card grids, heavy shadows and bright accents.
MOTION: On hero entry, fade the small floating labels from opacity 0 to 1 over 600ms, with an 80ms stagger and cubic-bezier(0.22,1,0.36,1). For the problem section, tie the three lines' outline-to-solid reveal to scroll position; progressively reveal ivory fill on each line while preserving its outline underneath. Use a roughly 100vh scroll range, 250ms scrub smoothing and linear cubic-bezier(0,0,1,1), so reverse scrolling reverses the reveal. Suggested values are implementation targets rather than measured timings. The reference shows successive lines becoming solid while later ones remain outlined.
SECTIONS: 1. Full-bleed photo hero: a person outdoors framed between warm stone walls, small floating annotation pills, a large two-line serif promise at the bottom left, concise supporting text and an ivory pill CTA with a circular icon. Use a substitute photo, not the original. 2. Dark problem section: small eyebrow label near the upper left and three oversized centered lines naming distraction, overload and clutter, with sequential outline-to-fill treatment.
IMPLEMENTATION: Use semantic HTML and responsive CSS for the layout, and GSAP ScrollTrigger for the scroll-linked text reveal. Layer two copies of each visual text line, masking the solid layer while keeping only one accessible text node. Clamp type sizes, stack supporting text and CTA on small screens, and prevent overflow. Honor prefers-reduced-motion by displaying solid text immediately and removing entry animation. Use visible keyboard focus and proper link semantics for the CTA. Animate masks or opacity only on the three text lines; do not install smooth-scroll hijacking. Optimize the hero image with responsive sizes and explicit dimensions.
ADAPT TO THE PROJECT: Reuse the existing project's design tokens, components and fonts. Map these colors to the nearest existing tokens. Never copy the original logos, brand names, photos or illustrations; use neutral placeholder copy and licensed or generated replacement imagery.
SUCCESS CHECK:
- The first screen reads as a large photo with a lower-left serif heading and a compact pill CTA, not a conventional card-based SaaS layout.
- Scrolling fills the three outlined lines sequentially and reversing scroll reverses the progression without shifting layout.
- At 375px wide there is no horizontal overflow, the CTA has visible keyboard focus, and reduced-motion mode shows all copy clearly.
