AlaDesign Landing Page Reveal

Landing Page Reveal — Preloader-to-Hero Intro

Goal

Build a full-screen fashion/editorial landing hero with a cinematic preloader-to-hero reveal that plays automatically once on page load (~7 seconds). A dark overlay counts 0 → 100 while a small masked label steps through three words; five portrait images rise from below, collapse their gap and scale up; the four side images wipe away upward with a clip-path while the center image scales to fill the screen; finally the dark overlay wipes upward to reveal a giant hero name that slides in word by word. Everything is driven by three parallel GSAP timelines sharing one custom ease called hop.

Tech

Vanilla HTML/CSS/JS with ES module imports. Use gsap (npm) plus the GSAP plugins CustomEase and SplitText. No smooth-scroll library (the page does not scroll during the intro). Register the plugins with gsap.registerPlugin(CustomEase, SplitText). Fire the whole sequence on DOMContentLoaded.

Layout / HTML

Semantic structure (class names are load-bearing — the JS/CSS query them):

<nav>
  <div class="nav-logo"><a href="#">Elara Vandenberg</a></div>
  <div class="nav-items">
    <a>Runway</a><a>Lookbook</a><a>Campaigns</a><a>Biography</a>
  </div>
</nav>

<section class="hero">
  <div class="hero-overlay">
    <div class="counter"><h1>0</h1></div>
    <div class="overlay-text-container">
      <div class="overlay-text">
        <p>Structure</p>
        <p>Designed Identity</p>
        <p>Welcome</p>
      </div>
    </div>
  </div>

  <div class="hero-images">
    <div class="img"><img src="..." alt="" /></div>
    <div class="img"><img src="..." alt="" /></div>
    <div class="img hero-img"><img src="..." alt="" /></div>  <!-- center, index 2 -->
    <div class="img"><img src="..." alt="" /></div>
    <div class="img"><img src="..." alt="" /></div>
  </div>

  <div class="hero-header"><h1>Elara Vandenberg</h1></div>
</section>

Notes:

• .hero-images holds exactly 5 .img wrappers; the third one (index 2) also gets class hero-img — it is the center image that survives and scales to fill.
• Use "Elara Vandenberg" as the neutral placeholder brand/name.

Styling

Fonts: Inter (body), Space Grotesk (all big headings) and Space Mono (nav links + overlay label) — all free.

Palette (CSS vars) — cool paper, near-black ink, and one saturated red that owns all the colour on the page:

:root {
  --paper: #f2f2f2;
  --ink: #16161a;
  --overlay: #ff4e45;   /* the panel that wipes away */
  --light: #f2f2f2;
  --accent: #ff4e45;
  --graphite: #2b2b31;
  --display: "Space Grotesk", sans-serif;
  --sans: "Inter", sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

Every photograph runs as black and white — filter: grayscale(1) contrast(1.06) — precisely so the red overlay is the only colour in the frame. That is the whole colour idea: one red panel over a monochrome page.

Global:

• * { margin:0; padding:0; box-sizing:border-box }; body { font-family: var(--sans); background-color: var(--paper); color: var(--ink); }.
• img { width:100%; height:100%; object-fit:cover }.
• a, p: text-decoration:none; text-transform:uppercase; font-family: var(--mono); font-size:0.9rem; line-height:1.25; color: var(--ink).

nav: position:fixed; width:100%; padding:2rem; display:flex; justify-content:space-between; align-items:flex-start. .nav-items is a flex-direction:column; align-items:flex-end stack.

.hero: position:relative; width:100%; height:100svh; overflow:hidden.

.hero-overlay (the dark preloader panel):

• position:absolute; width:100%; height:100svh; background-color: var(--overlay); z-index:0 — the red panel, not a dark one.
• Initial clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) (full rectangle covering everything). will-change: clip-path.
• .counter inside it: position:absolute; right:2rem; bottom:2rem; color:var(--light). Its h1: font-size:4rem; font-weight:500.
• .overlay-text-container: position:absolute; top:2rem; left:2rem; height:2rem; overflow:hidden (a 2rem-tall clipping window — only one line shows at a time).
• .overlay-text: display:flex; flex-direction:column; transform:translateY(2rem); will-change:transform (starts pushed one line DOWN, so the window is initially empty).
• .overlay-text p: color:var(--light); height:2rem; display:flex; align-items:center (each line is exactly the window height).

.hero-images:

• position:absolute; top:50%; transform:translateY(-50%); width:100%; padding:0 2rem; display:flex; justify-content:center; z-index:2.
• gap: 0.75vw plus a custom property --strip-gap-start: 10vw. The gap is laid out once and never animated, and it is frozen at the converged value, not at the spread one; --strip-gap-start is the spread the strip starts from and is applied by the script as a transform. See the trap under "images converge with x, not with gap" for why both of those matter.
• .hero-images .img: width:10vw; aspect-ratio:5/7. Initial transform:translateY(50%) scale(0.5); opacity:0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) (full rect). will-change:opacity, transform, clip-path.

.hero-header:

• position:absolute; bottom:2rem; width:100%; z-index:3 — in front of the images. On a desktop viewport the giant name and the zoomed centre image overlap, and the name must cross in FRONT of the photo; a header behind the image reads as a headline sliced in half by a rectangle.
• h1: text-transform:uppercase; text-align:center; font-size:15vw; font-weight:500; line-height:0.85, plus visibility:hidden — see the trap below.
• .hero-header h1 .word (the SplitText word wrappers): transform:translateY(100%); will-change:transform (each word starts hidden below its masked line).

Z-index stack (important for the reveal to read right): overlay 0 < images 2 < header 3 < nav 4.

Trap — the header's initial state. Putting the header in front only works if the header has an initial state of its own. The translateY(100%) that hides the words lives on .word, and those wrappers do not exist until SplitText runs; between first paint and the module executing, the raw <h1> is just visible text — which used to be invisible for free, because a header at z-index:-1 was covered by the full-screen red panel. In front of the panel it flashes. Hide .hero-header h1 with visibility:hidden in CSS and clear it (gsap.set(heroHeader, { visibility: "visible" })) immediately after the split; visibility:hidden still lays out, so SplitText measures the words correctly.

That is a hard dependency on the script, taken knowingly: the whole hero is script-driven (the images are opacity:0 in CSS too, and the red panel never wipes without GSAP), so a page where the module never runs has nothing to show either way. It gets one net — @media (scripting: none) { .hero-header h1 { visibility: visible } } — so a reader with scripting off keeps the name rather than a blank page. Write that query in the positive form: not all and (scripting: enabled) looks equivalent but evaluates to *true* in a browser that has never heard of the scripting feature, which would un-hide the headline for everyone and bring the flash straight back. The net does not cover "the script 404'd or threw", and nothing in CSS can.

Trap — stacking contexts. z-index:3 on the header beats z-index:2 on the images only because .hero is a plain positioned box: give .hero a transform, filter, opacity < 1 or will-change on any of them and it opens a stacking context that the header can never climb out of. .hero-images *does* open one (it carries transform:translateY(-50%)), but it is a sibling of the header, so the two are compared directly and the higher value wins.

GSAP effect (be exact)

Setup

CustomEase.create("hop", "0.85, 0, 0.15, 1");

const counterEl  = document.querySelector(".hero-overlay .counter h1");
const heroHeader = document.querySelector(".hero-header h1");
const overlayText= document.querySelector(".overlay-text");
const heroImages = document.querySelector(".hero-images");
const images     = gsap.utils.toArray(".hero-images .img"); // length 5
const heroOverlay= document.querySelector(".hero-overlay");
const counter    = { value: 0 };

// The centre image is read from the markup (class .hero-img), not hard-coded as index 2: it is the
// pivot both for "who survives the wipe" and for the converge maths below.
const heroIndex = Math.max(0, images.findIndex((el) => el.classList.contains("hero-img")));

// Spread/converge distances, measured once, before anything moves.
const rowStyle  = getComputedStyle(heroImages);
const layoutGap = parseFloat(rowStyle.columnGap) || 0;                     // px, the frozen CSS gap
const startGap  = vwToPx(rowStyle.getPropertyValue("--strip-gap-start"));  // px, the spread
const targetGap = (0.75 * window.innerWidth) / 100;                        // px, normally == layoutGap
const itemWidth = parseFloat(getComputedStyle(images[0]).width);           // used width, transform-free
// One xPercent per image for any gap: the offset from where CSS actually laid it out.
const shiftFor  = (gap) => (i) => ((i - heroIndex) * (gap - layoutGap) * 100) / itemWidth;

gsap.set(images, { xPercent: shiftFor(startGap) }); // spread, before anything animates

const split = new SplitText(heroHeader, {
  type: "words",
  mask: "words",        // each word gets an overflow-hidden mask wrapper
  wordsClass: "word",   // matches the CSS translateY(100%) init above
});

gsap.set(heroHeader, { visibility: "visible" }); // the words are masked now, so the h1 can show

Trap — images converge with x, not with gap. The obvious way to pull the filmstrip together is to tween gap on the flex row. Do not. Tweening gap re-runs flex layout on every frame, and on any viewport where the row overflows its container the items are *shrink-to-fit*, so their used width is a function of the gap: (100vw − padding − 4·gap) / 5. Closing the gap therefore grows every image on every frame; aspect-ratio turns that into a changing height; and top:50% + translateY(-50%) re-centres the whole row vertically every frame. The result is a sub-pixel shimmer/tremble that is invisible on desktop — where 5·10vw + 4·10vw + padding still fits, so the declared widths are honoured and the gap tween is a pure slide — and obvious on phones and tablets, where 5·26vw + 4·4vw = 146vw does not fit. It is a layout bug that only shows on small screens, so it survives desktop review.

The fix is arithmetic: in a centred flex row every item sits at centre + (i − heroIndex) · (width + gap), so going from gap G to gap G' is exactly a translation of (i − heroIndex) · (G' − G) — the item width cancels out. Freeze the CSS gap (the shrink-to-fit width is then computed once and never moves) and animate xPercent on the images instead. Use xPercent rather than x: it is resolved against the item's own border-box width and GSAP emits it as a percentage, and since both terms of the ratio are vw-derived the offsets survive a viewport resize the way a vw-based gap did.

And freeze it at the converged end, not the spread end. This is the part that is easy to get backwards. Whichever gap you leave in the CSS is the one whose shrink-to-fit width becomes permanent, so it decides the size of the images for the whole reveal. Freeze the *spread* gap and the strip keeps its small intro width forever: the final full-bleed frame — the one composition anybody actually looks at, and the only one a screenshot catches — comes out ~14% narrower (~26% less area) and no longer fills the width. Freeze the *converged* gap (gap: 0.75vw) and the final frame is laid out by CSS at exactly its intended size, the images end on xPercent: 0 (pure layout, so it tracks a resize by itself with nothing left over), and the whole difference is pushed back to the start of the reveal — where the images are at scale(0.5) behind opacity: 0 and nobody is measuring them. Same algebra, opposite sign.

The one cost of freezing at the far end: the intro images are now as wide as the final layout makes them (~19vw on a phone instead of ~16vw), so the starting spread has to be *tighter* or the outer pair begins off-screen. That is why --strip-gap-start drops to 3.4vw below 768px rather than the 4vw you would expect: at the top of that range (768px) a 4vw spread pushes the outer images ~5px past the viewport edge. It is a ceiling, not a taste call — check it if you change the widths.

Create three independent timelines that run in parallel (each with its own delay):

Timeline 1 — counterTl (delay 0.5)

One tween on the plain object counter:

• counter.value: 0 → 100, duration: 5, ease: "power2.out".
• onUpdate: write Math.floor(counter.value) into counterEl.textContent (so the bottom-right number ticks up from 0 to 100 over 5s, decelerating).

Timeline 2 — overlayTextTl (delay 0.75)

Four sequential tweens on overlayText, each duration: 0.75, ease: "hop", stepping the flex column up one line per beat through the 2rem window (label text: Structure → Designed Identity → Welcome → empty):

1. y: "0" — reveals line 1 ("Structure").
2. y: "-2rem", delay: 0.75 — reveals line 2 ("Designed Identity").
3. y: "-4rem", delay: 0.75 — reveals line 3 ("Welcome").
4. y: "-6rem", delay: 1 — scrolls everything out (empty window again).

Timeline 3 — revealTl (delay 0.5) — the main reveal

Sequential unless a position param says otherwise. All tweens ease: "hop" unless noted.

1. Images rise + fade in: images → { y: 0, opacity: 1, stagger: 0.05, duration: 1 }. (From translateY(50%) scale(0.5) opacity:0 to y:0 opacity:1, still at scale 0.5, left-to-right stagger.)
2. Filmstrip converges and scales up — ONE tween, both properties: images → { xPercent: shiftFor(targetGap), scale: 1, duration: 1, delay: 0.5 } (scale 0.5 → 1 while the visual gap goes from --strip-gap-start down to the knob's 0.75vw — i.e. back to xPercent: 0, the position CSS already laid out, unless the knob has been moved off its default). Keep these in a single tween on a single target list: two concurrent tweens writing to the same element's transform is the other classic source of jitter here, and they always ran together anyway.
3. *(folded into step 2 — do not add a second tween for the scale.)*
4. Side images wipe away upward: images.filter((_, i) => i !== heroIndex) (the 4 non-center images) → { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)", duration: 1, stagger: 0.1 }. The clip-path collapses each image's bottom edge up to the top edge, so they vanish upward one after another, leaving only the center image.
5. Center image scales to fill: images[heroIndex] → { scale: 2, duration: 1 } (1 → 2, grows to dominate the frame). Its xPercent is 0 by construction, so it grows exactly where it already sits.
6. Overlay wipes upward: heroOverlay → { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)", duration: 1 }. Same collapse-to-top-edge clip-path, so the whole red preloader panel wipes up and off, leaving the paper background, the zoomed centre image and — in front of it — the hero name.
7. Hero name slides in word by word (position param "-=0.5", i.e. starts 0.5s before step 6 ends, overlapping the overlay wipe): ".hero-header h1 .word" → { y: "0", duration: 0.75, stagger: 0.1, ease: "power3.out" }. Each word slides up from translateY(100%) into its mask (ease: "power3.out", NOT hop, for this one).

Ease reference

• hop = CustomEase.create("hop", "0.85, 0, 0.15, 1") — a steep symmetric in-out used for nearly everything.
• counterTl uses power2.out; the final word slide uses power3.out.

Assets / images

Five portrait editorial fashion photos, aspect-ratio roughly 5/7, each a single subject against a flat studio or atmospheric backdrop. All five are greyscaled by the CSS, so their original colour stories are irrelevant — what matters is that each has one clear subject and enough tonal separation to survive at both 0.5× and full-bleed. In row order (positions 1–5 = img_1–img_5):

• img_1: a woman in a heavy coat over a draped gown, three-quarter turn.
• img_2: a man in a tailored suit facing camera against a painterly backdrop.
• img_3 — the center image (index 2, the third) that scales up to fill the screen: a side profile of a woman with her hair in a low bun and a hoop earring. Being the hero frame, its off-centre profile still reads well full-bleed.
• img_4: a model in an open blazer with layered necklaces against a plain ground.
• img_5: a figure in a long lace dress on a grassy islet flanked by two black swans in a misty lake — the one landscape-led frame.

Use object-fit: cover. The four non-center frames are only seen briefly as a tight filmstrip before they wipe away upward, so their differing palettes and moods don't need to match. If you have fewer than five images, repeat one to fill the row.

Behavior notes

• Autoplay once on load; no scroll, hover or click triggers. Total runtime ≈ 7s.
• Responsive (max-width: 1000px): nav padding → 1rem; .counter → right:1rem; bottom:1rem; .hero-images → padding:0 0.5rem; gap:2.5vw; .hero-images .img → width:20vw, --strip-gap-start:2.5vw; and (max-width: 768px) .hero-images → --strip-gap-start:3.4vw, .hero-images .img → width:26vw, hero-header font → 17vw. Only the *spread* changes per breakpoint — the laid-out gap stays 0.75vw at every width, which is what keeps the final frame identical everywhere. Note that below 1000px width:26vw overflows the row on purpose (5·26vw > 100vw), so the items are shrink-to-fit and each ends up ~19vw wide; that is fine as a static layout and is exactly why the gap must never be animated — see the converge trap above. Also note that on phones the name sits well below the image and the two never overlap, so the header's z-index only matters on desktop.
• Uses 100svh (small viewport height) so mobile browser chrome doesn't clip the hero.
• will-change hints are set on the overlay clip-path, the image transforms/clip-path, the overlay-text transform and the header words — keep them, they matter for the smoothness of the clip-path wipes. There is deliberately no hint on the row's gap, because the gap no longer animates. Drop the hints again on revealTl's onComplete (gsap.set([...], { willChange: "auto" })): five promoted, filtered images plus a full-screen clip-path panel are worth their compositor layers for seven seconds and are pure memory for the rest of the session.

Images

This component ships with 5 reference assets, served publicly. Use them as-is to reproduce the demo faithfully, then swap in your own — the layout expects the same aspect ratios.

https://motionprompts.dev/c/aladesign-landing-page-reveal/img_1.jpg
https://motionprompts.dev/c/aladesign-landing-page-reveal/img_2.jpg
https://motionprompts.dev/c/aladesign-landing-page-reveal/img_3.jpg
https://motionprompts.dev/c/aladesign-landing-page-reveal/img_4.jpg
https://motionprompts.dev/c/aladesign-landing-page-reveal/img_5.jpg

They are hotlinkable for prototyping. For anything you ship, replace them: they are licensed for demonstration of this component, not for redistribution.

Using this outside its demo page

This component is written as a complete page — that is how the demo is meant to look. If you are dropping it into an existing project, or combining it with other components, these are the things it declares at document level and that you need to move or reconcile first.

• Palette on :root — --paper, --ink, --overlay, --light, --accent, --graphite, plus the type variables --display, --sans, --mono. These names are not namespaced and they collide: --ink is defined by 164 of the 219 components in this catalogue, --paper by 94, --muted by 80, each with different values — and they will also collide with whatever your own project defines. Move them onto the component's wrapper (.my-section { --ink: … }) or rename them with a prefix.
• **Rules on *, body** — the demo owns the whole document, so these set the page background, typography and resets. Dropped into an existing project they restyle the entire page, not just this section. Re-target them at the component's wrapper before using it.

Adapting this to React

Everything above describes a standalone document: one script that runs once, reaches into the page with document.querySelector, and never has to undo itself. React withdraws all three of those guarantees at once, and it does it quietly — the component renders, looks right for a moment, and then misbehaves in a way that does not point back at any of this.

Under React 19 with StrictMode, every effect mounts, unmounts, and mounts again before anything reaches the screen. Here that leaves you two of nearly everything this reveal builds: two counterTl instances both racing to write into the same counterEl.textContent, two revealTl instances pulling the same five .hero-images .img elements through the same clip-path collapse at once, and — worse — a header that has been split by SplitText twice, so the second pass wraps words that are already wrapped in .word spans. The visible symptom is a counter that stutters or overshoots and a hero title whose words never slide into place, because revealTl's final tween is targeting nodes one level removed from the ones the CSS actually masks. None of this reproduces in a production build, because React only does the double mount in development. Treat the cleanup as part of the effect, not as an afterthought.

*(1) The entry point* — The script checks document.readyState before subscribing to DOMContentLoaded, and only reaches that guard at all when it is not running inside this catalogue's own tuning harness (the window.MP branch). Neither survives the move to React: the harness branch is specific to this repository's authoring tool and has no equivalent in a shipped component, and the readiness guard is dead weight once useEffect guarantees the DOM is already committed. Drop both, along with the boot wrapper, and move the body of mount() — the SplitText call, the construction of counterTl, overlayTextTl and revealTl, and their tweens — directly into a useEffect with an empty dependency array. The destroy() this component already returns is not incidental — its shape (kill the three timelines, clear the inline styles GSAP wrote, revert the split) is close to what a correct cleanup function looks like; the work below is about tightening it, not replacing it.

*(2) Element lookups* — counterEl, heroHeader, overlayText, heroImages, images (via gsap.utils.toArray) and heroOverlay are six separate global lookups, each trusting that this markup is the only copy in the document. Put a ref on the outermost element this component owns — the <section class="hero"> — and resolve all six from it (rootRef.current.querySelector(".hero-images .img") and so on) instead of from document. This is not cosmetic here: during the StrictMode remount two copies of the hero markup exist for an instant, and an unscoped .hero-header h1 can bind to the copy that is being torn down, so the split runs on a node about to be detached.

*(3) Cleanup* — Wrap the SplitText call and all three timelines in one gsap.context scoped to that root ref, and revert the context on cleanup:

useEffect(() => {
  const ctx = gsap.context(() => {
    const split = new SplitText(rootRef.current.querySelector(".hero-header h1"), {
      type: "words",
      mask: "words",
      wordsClass: "word",
    });
    // counterTl, overlayTextTl and revealTl exactly as constructed above
    return () => split.revert();
  }, rootRef);
  return () => ctx.revert();
}, []);

ctx.revert() now does what destroy() currently does by hand — kill counterTl, overlayTextTl and revealTl, and strip every inline style GSAP wrote onto the counter, the overlay text, the five images and the overlay panel — so the manual gsap.killTweensOf / clearProps: "all" pair in the existing destroy() becomes redundant once the context is in place. The one thing the context cannot infer on its own is the split, since reverting it is a DOM operation, not a tween; returning split.revert() from inside the context callback (as above) registers it as part of the same teardown, so it runs as part of ctx.revert() rather than needing its own separate call. Get the split un-reverted and the next mount's new SplitText(...) wraps .word spans that are already inside .word spans, which is exactly the doubled-nesting failure described above.

gsap.registerPlugin(CustomEase, SplitText) and CustomEase.create("hop", …) stay at module scope, outside the component. Re-registering the plugins or recreating the hop ease on every mount is harmless but pointless — the ease only needs to exist once for the whole page.

One gap the current script.js doesn't cover but is worth closing in the port: SplitText's word masks are measured against whichever font is loaded at the moment the split runs, and this component splits a large, prominent headline. If the display face for .hero-header h1 is still loading when the effect fires, the words get masked against the fallback font's line metrics, and the reveal can play against boundaries that don't match the font that then swaps in. Gate the split behind document.fonts.ready if that risk applies to your font-loading setup, keep the effect itself synchronous, and guard the deferred split with a cancellation flag so a StrictMode unmount that lands before fonts resolve doesn't run new SplitText against a header that has already been removed.