Unfolding Words Menu
What it does
Overlay menu where each link unfolds letter by letter: a frosted veil blurs the hero behind it (the photo also scales and softens), the index and first letter rise out of a mask, a thin light divider grows from its centre and the remaining letters slide in from the right while their container widens. Hovering a link shifts it sideways and dims the others, and the toggle flickers between Menu and Close.
How it's built
| Category | menu |
|---|---|
| Tech | gsap |
| GSAP plugins | SplitText |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Unfolding Words Menu — Frosted Veil & Letter-by-Letter Link Reveal
## Goal
Build a fullscreen overlay navigation where every link **unfolds letter by letter**. Pressing "Menu": a **frosted glass veil** fades over the hero photo (which also zooms and blurs slightly); then, link by link, the small index number and the **first letter rise out of a mask**, a thin **light divider** grows from its centre with a 20° lean, and the **remaining letters slide in from the right** while the box that holds them **widens from 0 to its natural width**. Serif and grotesk links alternate. Hovering a link nudges it to the right and dims the others; the toggle text flickers between "Menu" and "Close". Reverse on close. GSAP + SplitText.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) and the plugin **`SplitText`** (`gsap/SplitText`, included with GSAP 3.13+). Fonts: **Instrument Serif** (400) and **Space Grotesk** (400–600).
## Layout / HTML
```html
<div class="uw">
<nav class="uw-nav">
<a class="uw-brand" href="#">Obscura</a>
<button class="uw-toggle" aria-expanded="false" aria-controls="uw-menu">Menu</button>
</nav>
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in