# Full-Screen Overlay Menu with Clip-Path Wipe & Lerped Highlighter

## Goal
Build a fixed top navbar whose **Menu** toggle opens a full-screen dark overlay that **wipes open from the bottom edge upward via an animated `clip-path` polygon**. As it opens, two columns of meta text fade/slide in, a small centered image scales up, and a row of five oversized (Anton, 10rem) menu links **stagger up into view from a mask**. On desktop, each link does a **per-character vertical swap on hover** (SplitText), a lime **highlighter bar slides + resizes to track the hovered link** using a lerp loop, and the **entire link strip pans horizontally with the mouse X position** (also lerped). It is a click-to-open/close menu, not scroll-driven.

## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm), the GSAP plugins **`ScrollTrigger`** and **`SplitText`**, and **`lenis`** for smooth scroll. Import as:
```js
import { gsap } from "gsap";
import { ScrollTrigger, SplitText } from "gsap/all";
import Lenis from "lenis";
```
Register `gsap.registerPlugin(ScrollTrigger, SplitText)` inside `DOMContentLoaded`. (ScrollTrigger is only wired to Lenis for smooth scroll updates; there are no scroll-triggered animations in this component — everything is click/hover/mousemove driven.)

## Layout / HTML
```
nav                       (fixed top bar)
  .nav-toggle > p "Menu"        (left — click target that opens/closes)
  .nav-item   > p "Archive"     (right — decorative)

.menu-overlay             (fixed full-viewport dark panel, clipped closed)
  .menu-content                 (two meta-text columns, absolutely centered-ish)
    .menu-col   → stacked <p> lines separated by <br> (studio name, address, city, edition, contact email, phone)
    .menu-col   → stacked <p> lines separated by <br> (social links, language, credits/ref) — right-aligned
  .menu-img                     (single small centered image)
    img
  .menu-links-wrapper           (bottom-left horizontal row)
    .menu-link × 5              (each links to "#")
      a
        span  (visible copy)    ← duplicate text
        span  (hover copy)      ← same text, stacked absolutely on top
    .link-highlighter           (the lime tracking bar)

.container
  section.hero > h1 "Shaping Ideas"   (full-viewport light hero behind the overlay)
```
The five link labels are: **Index, Persona, Biography, Work, Journal**. Each `.menu-link a` contains the **same word twice** in two `<span>`s (span 1 = visible copy, span 2 = hover copy stacked directly on top).

Use a neutral fictional studio identity for the meta text (e.g. "Jam Area", a street/city, an edition/volume number, a contact email, a phone number, social platforms, a language, credits/imprint, a reference code). No real brands.

## Styling
Fonts (Google Fonts): **Anton** (display) and **DM Sans** (UI/body, variable, italic + optical size + weight axes).

Color tokens:
- `--dark: #1e1e1e`
- `--light: #fefff8`
- `--accent: #9dfc11` (lime green)
- `body { background: #000; }`

Type:
- `h1`: Anton, uppercase, `font-size: 10rem`, weight 500, `letter-spacing: -0.1rem`, `line-height: 0.9`. `.hero h1` width 70%.
- `p, a`: uppercase, `font-size: 0.8rem`, weight 600, `line-height: 1`, no underline, `user-select: none`.
- `.menu-link a`: **Anton, `font-size: 10rem`, weight 500, `letter-spacing: -0.2rem`, `display: inline-block`, `overflow: hidden`**, color `--light`.
- `img { width:100%; height:100%; object-fit: cover; }`

Key positioning / structural CSS (these are load-bearing for the effect):
- `nav`: `position: fixed; top:0; left:0; width:100vw; padding:1rem;` flex `space-between`, color `--light`, **`mix-blend-mode: difference`**, `z-index:2`. `nav p { padding:1rem; cursor:pointer; }`
- `.menu-overlay`: `position: fixed; inset:0 auto auto 0; width:100vw; height:100svh; overflow:hidden;` background `--dark`, color `--light`, `z-index:1`, `will-change: clip-path`. **Initial closed state: `clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)`** (a degenerate rectangle collapsed onto the bottom edge — overlay invisible).
- `.menu-content`: `position:absolute; top:45%; transform:translateY(-50%); width:100%; padding:2rem;` flex `space-between` / `align-items:center`. `.menu-col:nth-child(2){ text-align:right; }`
- `.menu-img`: `position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); width:150px;`
- `.menu-links-wrapper`: `position:absolute; left:0; bottom:0; width:max-content; padding:2rem;` flex, `gap:2rem`, `will-change: transform`.
- `.menu-link`: `position:relative; overflow:hidden;` `will-change:transform`. (Overflow toggles to `visible` once open so the highlighter/hover chars aren't clipped — see GSAP section.)
- `.menu-link a span:nth-child(2)`: `position:absolute; top:0; left:0;` (hover copy stacked on the visible copy).
- `.link-highlighter`: `position:absolute; bottom:0; left:0; width:400px; height:0.75rem;` background `--accent`, `will-change: transform, width`. (JS overwrites width to the first link's measured width.)
- `.char` (created by SplitText): `position:relative; display:inline-block; will-change:transform;`
- `section`: `width:100vw; height:100svh;` flex-centered, background `--light`, color `--dark`, `padding:2rem`.
- `.container`: `position:relative; z-index:0; will-change:transform, opacity;`

## GSAP effect (exhaustive)

### 0. Smooth scroll bootstrap
`const lenis = new Lenis();` → `lenis.on("scroll", ScrollTrigger.update)`; drive it from the GSAP ticker: `gsap.ticker.add((time)=> lenis.raf(time*1000))`; `gsap.ticker.lagSmoothing(0)`.

### 1. SplitText per link + initial states
For each `.menu-link a`, grab its two `<span>`s. For **each** span run `new SplitText(span, { type: "chars" })` and add class `.char` to every resulting char. For the **second** span only (index 1, the hover copy), `gsap.set(split.chars, { y: "110%" })` so its characters sit one line-height below (hidden by the `a`'s `overflow:hidden`).

Then set the closed/pre-open states:
- `gsap.set(menuContent, { y: "50%", opacity: 0.25 })`
- `gsap.set(menuImage, { scale: 0.5, opacity: 0.25 })`
- `gsap.set(menuLinks, { y: "150%" })`  ← `menuLinks` = all `.menu-link a`
- `gsap.set(linkHighlighter, { y: "150%" })`

### 2. Measure highlighter to first link
Read the first link's first span `offsetWidth` → set `linkHighlighter.style.width` to that px and seed `currentHighlighterWidth = targetHighlighterWidth = linkWidth`. Compute `initialX = firstLink.getBoundingClientRect().left - menuLinksWrapper.getBoundingClientRect().left` → seed `currentHighlighterX = targetHighlighterX = initialX`.

### 3. Open sequence (click `.nav-toggle`, `isMenuOpen === false`)
Guard with `isMenuAnimating` (bail if already animating; set true at start). These are **independent `gsap.to` tweens fired simultaneously**, each with its own delay — not a single timeline. **All eases are `expo.out`.**
- `container` → `{ y: "-40%", opacity: 0.25, duration: 1.25 }` (pushes the hero back).
- `menuOverlay` → `{ clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)", duration: 1.25 }` — this grows the top two corners up to `0%`, wiping the panel open **from the bottom edge upward to full-screen**. `onComplete`: `gsap.set(container, { y: "40%" })`, `gsap.set(".menu-link", { overflow: "visible" })`, then `isMenuOpen = true; isMenuAnimating = false`.
- `menuContent` → `{ y: "0%", opacity: 1, duration: 1.5 }`.
- `menuImage` → `{ scale: 1, opacity: 1, duration: 1.5 }`.
- `menuLinks` → `{ y: "0%", duration: 1.25, stagger: 0.1, delay: 0.25 }` — the five oversized links rise up out of the mask left-to-right.
- `linkHighlighter` → `{ y: "0%", duration: 1, delay: 1 }` — the lime bar drops in last.

### 4. Close sequence (click `.nav-toggle`, `isMenuOpen === true`)
Again independent simultaneous tweens, all `expo.out`, `duration: 1.25` unless noted:
- `container` → `{ y: "0%", opacity: 1 }` (hero returns).
- `menuLinks` → `{ y: "-200%" }` (links shoot up out of frame).
- `menuContent` → `{ y: "-100%", opacity: 0.25 }`.
- `menuImage` → `{ y: "-100%", opacity: 0.5 }`.
- `menuOverlay` → `{ clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }` — collapses the panel **upward into the top edge**. `onComplete` resets everything to the closed state: overlay clip-path back to the bottom-collapsed polygon `polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)`, `menuLinks y:"150%"`, `linkHighlighter y:"150%"`, `menuContent {y:"50%", opacity:0.25}`, `menuImage {y:"0%", scale:0.5, opacity:0.25}`, `.menu-link { overflow: "hidden" }`, `menuLinksWrapper { x: 0 }` and reset `currentX = targetX = 0`; then `isMenuOpen = false; isMenuAnimating = false`.

### 5. Per-character hover swap (desktop only, `window.innerWidth >= 1000`)
On each `.menu-link` `mouseenter`: get the two spans' `.char` sets.
- visible copy chars → `gsap.to({ y: "-110%", stagger: 0.03, duration: 0.5, ease: "expo.inOut" })`
- hover copy chars → `gsap.to({ y: "0%", stagger: 0.03, duration: 0.5, ease: "expo.inOut" })`

On `mouseleave`:
- hover copy chars → `{ y: "110%", stagger: 0.03, duration: 0.5, ease: "expo.inOut" }`
- visible copy chars → `{ y: "0%", stagger: 0.03, duration: 0.5, ease: "expo.inOut" }`

Net effect: the word rolls upward, the visible copy exiting through the top while the duplicate copy rides in from below, character by character.

### 6. Mouse-driven horizontal pan of the link strip (desktop only)
Listen for `mousemove` on `.menu-overlay`. Compute:
- `maxMoveLeft = 0`, `maxMoveRight = viewportWidth - menuLinksWrapperWidth` (negative-space room to slide the strip fully right).
- `sensitivityRange = viewportWidth * 0.5`; `startX = (viewportWidth - sensitivityRange)/2`; `endX = startX + sensitivityRange`.
- `mousePercentage`: `0` if `mouseX <= startX`, `1` if `mouseX >= endX`, else `(mouseX - startX) / sensitivityRange`.
- `targetX = maxMoveLeft + mousePercentage * (maxMoveRight - maxMoveLeft)`.

So only the **central 50% of the screen width** is active: sweeping the cursor across it pans the whole `.menu-links-wrapper` from its left-docked position to fully right-docked.

### 7. Highlighter target on hover (desktop only)
On each `.menu-link` `mouseenter`: `targetHighlighterX = linkRect.left - menuWrapperRect.left` and `targetHighlighterWidth = (that link's first span).offsetWidth`. On `.menu-links-wrapper` `mouseleave`: reset both targets back to the **first** link's position/width.

### 8. Lerp rAF loop (`animate()`)
A `requestAnimationFrame` loop with **`lerpFactor = 0.05`** interpolates each `current` toward its `target`:
```
currentX               += (targetX               - currentX)               * 0.05
currentHighlighterX    += (targetHighlighterX    - currentHighlighterX)    * 0.05
currentHighlighterWidth+= (targetHighlighterWidth- currentHighlighterWidth)* 0.05
```
Then each frame apply:
- `gsap.to(menuLinksWrapper, { x: currentX, duration: 0.3, ease: "power4.out" })`
- `gsap.to(linkHighlighter, { x: currentHighlighterX, width: currentHighlighterWidth, duration: 0.3, ease: "power4.out" })`

This double-smooths (lerp + short `power4.out` tween) so the strip pan and the bar's slide/resize feel fluid and trailing.

## Assets / images
**1 image**, role = *small centered menu image*. A single portrait-oriented black-and-white editorial photograph displayed at ~150px wide (`object-fit: cover`), sitting dead-center of the open overlay between the two text columns. The real asset is a tightly-cropped monochrome studio headshot of a young person facing the camera, short hair, dark top, shot against a plain light-grey seamless backdrop — dominant tones are soft greys and near-blacks with bright highlights, no color. The high-contrast grayscale reads cleanly against the dark panel. Provide one image; aspect ratio ~3:4 portrait.

## Behavior notes
- **Desktop-only interactions:** the hover char-swap, mouse pan, and highlighter tracking all early-return when `window.innerWidth < 1000`.
- **Responsive (`max-width: 1000px`):** hero `h1` becomes `width:100%; font-size:4rem`; `.menu-content` `top:25%`; `.menu-img` and `.link-highlighter` are `display:none`; `.menu-links-wrapper` switches to `flex-direction: column; gap: 0`; `.menu-link a` shrinks to `font-size:4rem; letter-spacing:-0.05rem` (links stack vertically).
- **Re-entrancy guard:** `isMenuAnimating` blocks toggling mid-animation; `isMenuOpen` tracks state. The open tween's `onComplete` flips `container` to `y:"40%"` (so the hero peeks from below while open) and unhides link overflow.
- The `animate()` rAF loop runs continuously for the lifetime of the page.

## Images

This component ships with 1 reference asset, 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/jamarea-menu/menu_img.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`** — `--dark`, `--light`, `--muted`, `--accent`. 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.
- **Smooth scroll (Lenis)** — this creates its own Lenis instance, and a page may only have one. If your project already runs Lenis, drop the setup shown above and reuse the existing instance, keeping the `lenis.on("scroll", ScrollTrigger.update)` wiring once. Two instances fight over the same scroll and stutter visibly, with no error in the console.
- **Full-screen overlay** — a fixed element covers the viewport (a loader or transition). Only one may exist per page and it must remove itself when done. If your page already has one, keep that and drop this; otherwise the second silently hides the first.

## 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. Setup that runs twice with teardown that runs never leaves you two of everything: two Lenis instances fighting over the same wheel event, two sets of `SplitText` chars nested inside the same five links, two `animate()` loops nudging the same highlighter toward two different targets. The visible symptom is jitter or doubled speed, and it will not reproduce 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`; that guard exists to survive being loaded late in a plain document, and in React it is dead weight, because `useEffect` already runs after the DOM is committed. Drop the guard, the listener, and also the `window.MP` branch above it — that hook exists for this catalogue's live-knobs editor, which has no React equivalent here. What remains is `mount(config)` and the function it returns, already shaped as a matched setup/teardown pair; move that body into a `useEffect` with an empty dependency array and return its existing cleanup as the effect's cleanup.

*(2) Element lookups* — Every `document.querySelector` in the code above assumes this component owns the document. Give the component a root `ref`, render it on the outermost element, and scope every lookup to it. Unscoped selectors are not a style problem here: during the StrictMode remount two copies of the subtree exist for an instant, and an unscoped selector will bind to the one that is on its way out. Concretely, that means the seven nodes destructured at the top of `mount()` (`.container`, `.nav-toggle`, `.menu-overlay`, `.menu-content`, `.menu-img`, `.menu-links-wrapper`, `.link-highlighter`, each bailing the whole effect out via an early return if any is missing) as well as the two repeated queries — `.menu-link a` / `.menu-link` for the five-link collections, and `.menu-link:first-child` for the "reset to default" reads used both at initial seeding and again inside the wrapper's `mouseleave` handler.

The closure also carries four flags that are not DOM state — `destroyed`, `alive`, `isMenuOpen`, `isMenuAnimating` — read and written synchronously from click handlers and from a loop that runs every animation frame. Keep these as `useRef` values seeded once inside the effect. Routing them through `useState` buys nothing the render output ever reads and would either fight React's batching or force a render on every frame.

*(3) Cleanup* — Everything the effect creates must be undone in the function it returns.

`ScrollTrigger` is registered here only to keep it synchronized with Lenis's virtual scroll (`lenis.on("scroll", ScrollTrigger.update)`); this component defines no `ScrollTrigger.create()` triggers of its own, so there is no scrubbed trigger to wrap. Wrap the rest — the initial `gsap.set` calls that hide the menu, the links and the highlighter before anything opens — in a `gsap.context` scoped to the root ref, and revert that context in the cleanup. But that initial batch is not everything this component animates: `toggleMenu`, the per-link `mouseenter`/`mouseleave` pair, the overlay's `mousemove` handler and `animate()`'s own frame loop all fire their `gsap.to` calls later, from event listeners and from `requestAnimationFrame`, not while the context factory is synchronously running — so `gsap.context` never sees them, and `ctx.revert()` on the StrictMode remount will unwind the initial `gsap.set` calls while leaving the open/close tweens, the hover tweens, and the per-frame wrapper/highlighter tweens running against elements a second copy of the component is now also animating. Register each of these as a named method with the context's second `self.add` overload — `self.add("toggleMenu", () => { ... })`, `self.add("onLinkEnter", (link) => { ... })`, `self.add("tick", () => { ... })` — and call them from the DOM listeners as `ctx.toggleMenu()`, `ctx.onLinkEnter(link)`, `ctx.tick()`. Only then does every tween this component ever fires end up inside the set `ctx.revert()` tears down.

Lenis here is driven off the GSAP ticker rather than its own `requestAnimationFrame` call: `gsap.ticker.add(raf)`, where `raf` forwards each tick into `lenis.raf()`. Keep that wiring, and in the cleanup unwind it in the same order the original does — ticker callback removed before the scroll subscription is dropped before `destroy()` runs. That order is not arbitrary: `lenis.raf()` calls after `destroy()` throw, so if the ticker still holds the reference when the next tick lands, it throws into a component that no longer exists. If this menu ends up embedded as one section of a larger app rather than owning the whole page, lift this Lenis instance to a shared provider instead of creating one per mount, per the note on document-level resources further up.

`animate()` is not tied to the menu's open state or to `ScrollTrigger` — it starts once and keeps re-scheduling itself via `requestAnimationFrame` for as long as the component exists, continuously lerping the link strip's horizontal offset and the highlighter's position and width toward whatever the latest pointer move set as their targets, then issuing a fresh `gsap.to` on the wrapper and one on the highlighter every single frame. Capture the handle the last `requestAnimationFrame(animate)` call returned and cancel it in the cleanup no matter whether the menu happens to be open or closed at that moment — nothing else stops this loop, so a missed `cancelAnimationFrame` leaves it retargeting a highlighter that is no longer on the page, forever, one more copy per remount. A second, easy-to-miss detail belongs next to it: the highlighter's pixel width is written straight to `linkHighlighter.style.width`, not through `gsap.set`, specifically so that value survives the later `gsap.set(el, { clearProps: "all" })` — `clearProps` only removes inline styles GSAP itself wrote. Capture the pre-effect width the same way the original does before overwriting it, and restore it by hand in the cleanup, or the underline carries a stale pixel width — measured against whatever font metrics were loaded at the previous mount — into the next one.

Each of the five links carries two spans, the visible copy and the hover copy stacked on top of it, and both get their own `SplitText` call — the effect creates ten `SplitText` instances, not one. Collect all ten and revert every one in the cleanup, in the order the effect already enforces: kill the tweens running on the `.char` elements first, then revert the ten splits, and only then clear the animated properties on the containers — reverting the splits first would delete nodes GSAP still has tweens targeting. The `offsetWidth`/`getBoundingClientRect` reads that seed the highlighter's starting position and width happen immediately after this split, measured against the Anton display face at the ten-root-em size the link labels render at. If the effect runs before that face has swapped in, those measurements lock in the fallback font's metrics for the life of the mount — nothing here ever recomputes them except a later hover. Gate the split and the initial measurement behind `document.fonts.ready`, using the same cancellation-flag shape described above for asynchronous continuations, so a StrictMode unmount that lands before the fonts settle doesn't split, or measure, a node that is already gone.