---
id: "aw-el-63c53b1d-b177-4d6e-acaf-ba5ef7ca6775"
source: https://www.awwwards.com/inspiration/expanding-menu-why-zero
author: "Sindhur Dutta (dutta)"
media: "video, 1600x1200, 4.1s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Frosted Dock Expanding Menu

## Summary
A bottom-centred dock (green orb, black "Join Beta" pill and a small menu button) that grows upward into a frosted glass panel holding three large serif links, while the button morphs into a close cross. The panel blurs the dreamy page behind it: a glossy green 3D hand and swash serif headline words. A concise example of a mobile-style bottom sheet menu adapted for desktop, with soft glass and a single strong black anchor.

## Style
- Theme: light (pale mint page with frosted glass)
- Mood: soft, elegant, airy, tactile, dreamy
- Tags: menu, bottom-dock, glassmorphism, expanding-panel, serif-links, morphing-button, 3d-hand
- Category: Navigation, Components

## Palette
| Role | Hex |
|---|---|
| Mint white | #F7FEFE |
| Ice | #F3FCFC |
| Frosted glass | #E3ECE8 |
| Pure white | #FEFFFF |
| Leaf green | #5AA17A |
| Hand green | #8ADF86 |
| Pale jade | #B6DDC1 |
| Pill black | #252325 |
| Swash teal | #3E7F73 |

## Typography
- Menu links ("Home", "Letters" and a third link): transitional serif, regular, title case, dark grey, about 4% of frame height, centred, 1.8 line height. Newsreader or Libre Caslon Text.
- Page headline words ("College", "would", "You", "land"): high-contrast display serif in teal with a big swash capital, sizes mixed from 4% to 12% of frame height, condensed-italic feel. Playfair Display Italic with a swash alternate, or Bodoni Moda.
- Dock button ("Join Beta"): white medium sans 11px. Inter Medium.
- Micro UI (scroll pill, XP badge, ruler numbers): monospace caps 8px. JetBrains Mono.

## Layout
- 4:3 frame (1600x1200) of the page; the clip zooms in toward the menu while it is open.
- Closed dock: centred at the bottom, about 24px up; a 28px green orb, a 170x28px black pill and a 24px circular menu button sit in a translucent white capsule with 4px padding.
- Open panel: about 380x170px at 1x, 16px corner radius, rising from the dock so the dock becomes its bottom row; links stacked in the upper 70%.
- Glass: white at about 55% with strong backdrop blur (about 24px) and a 1px white inner border, soft shadow (0 20px 40px rgba(30,60,50,0.12)).
- A small "Scroll" pill with a dot sits above the closed dock; an XP badge sits top-right and a tick ruler top-centre.

## Elements
- Dock orb: green marbled sphere icon with a subtle highlight.
- Black pill: full-width primary button inside the dock, 14px radius.
- Menu toggle: two-line hamburger that rotates into an x when open, on a white circle.
- Glass panel: frosted sheet with three serif links; the hovered link sharpens while the others stay slightly soft.
- Background: glossy translucent green 3D arm and hand reaching diagonally across the page, swash serif words placed at opposite corners.

## Motion
- 0 to 900ms: click the menu button; the capsule stretches upward into the panel over about 500ms with a soft spring (stiffness 260, damping 28), corner radius easing from 20px to 16px.
- Links fade and rise in (12px, 250ms) with a 60ms stagger, starting as the panel is two thirds open; a short blur-to-sharp on each.
- The hamburger lines rotate to an x in 250ms.
- 1600 to 2400ms: hover moves between links; each brightens with a 150ms opacity change.
- 3100 to 3800ms: close; links blur and fade first (150ms), then the panel collapses back into the dock (400ms).
- Clip duration 4.1s, looping.

## Rebuild it
1. React dock fixed at `bottom-6 left-1/2 -translate-x-1/2`, rendered as a single Motion `motion.div layout` with `rounded-[20px] bg-white/55 backdrop-blur-xl border border-white/70 p-1`.
2. Keep an `open` state; when true, render the link list above the dock row inside the same `layout` container so Motion animates the height change (`transition={{ type: 'spring', stiffness: 260, damping: 28 }}`).
3. Links: `AnimatePresence` with variants `{ hidden: { opacity: 0, y: 12, filter: 'blur(6px)' }, show: { opacity: 1, y: 0, filter: 'blur(0px)' } }` and `staggerChildren: 0.06, delayChildren: 0.15`.
4. Toggle icon: two `motion.span` lines animating `rotate: 45 / -45` and `y` to cross.
5. Primary pill: `bg-[#252325] text-white rounded-full h-8 w-[270px] text-xs font-medium`.
6. Close on Escape and outside click; trap focus inside the panel while open.

## Generation prompt
A soft mint-white website with a glossy translucent green 3D hand reaching across it and swash teal serif words in the corners; at the bottom centre a small dock with a green marble orb, a black pill button and a round menu toggle expands upward into a frosted glass panel with three elegant serif menu links, the toggle morphing into an x; airy glassmorphism, smooth spring motion.