Preloader

P10 Landing Page Reveal

by Vanguardia · motionprompts.dev

A preloader-driven landing reveal that plays automatically on load: SplitText masked characters slide the studio name and a large '10' into view, the intro character slides and scales into a logo mark while animated corner tags flip in and out, then two dark overlays split apart along a clip-path seam to unveil a full-bleed hero image, a center card and a masked per-character card heading. Driven by a single GSAP timeline using a custom 'hop' CustomEase and staggered clip-path/transform tweens.

Type: Web motion
Framework: GSAP
Trigger: load
Duration: 0.75–1s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: custom
Complexity: 2/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, CustomEase, SplitText

Autoplay ~7.25s preloader takeover: masked char/word reveals on a custom 'hop' ease (.8,0,.3,1 — fast-out, long glide, hard settle), then two identical stacked full-viewport layers are clip-path-split at the 50% seam and driven apart with a function-based value (y:(i)=>i===0?'-50%':'50%') while the underlying .container clip-path expands from a 4%-tall horizontal seam to the full frame and the card wipes open

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev20,292 chars

# Landing Page Reveal — Typographic Preloader with Split-Screen Unveil

## Goal
Build a full-screen landing intro that plays automatically once on page load (~7…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.