Curtain Menu

A hamburger menu that drops a dark curtain over the page with a curved edge, then raises its links out of masked lines beside a tilted preview card.

About this tool

A full-page hamburger menu with a sense of theatre. The round toggle drops a dark curtain over the page: its leading edge is a curve whose middle lags behind the sides, flattening as it lands. Once the curtain is past halfway, the links rise one after another out of masked lines and a tilted card swings in, showing the look behind whichever link is hovered. Closing drops the links back and lifts the curtain with the middle hanging below the sides, and a click mid-way reverses it from where it is. It is a real menu: a toggle that reports its state and names its action, a labelled navigation, focus kept inside while it is open, Escape to close with focus handed back to the toggle, and the page behind made inert. Wordmark, copy, links, three photos, palette, curve depth and fall time are editable live, and the export is one HTML file with no dependencies.

In collections: Navigation Components: Tabs, Steppers & Menus Micro Interactions: UI Animation Examples

Guide: Feature Sections That Explain a Product: Grid, Tabs or Walkthrough? Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS / JS All tools

Copy

Wordmark

Eyebrow

Heading

Link 1

Link 2

Link 3

Assets

Layout

Scale %

Palette

Page

Text

Secondary text

Accent

Curtain

Curtain text

Motion

Curve depth

Fall time ms

Preview

Autoplay

off loop

Stage

Stage colour

#ffffff