---
id: "aw-el-ad74315e-867b-4e2e-b322-eae495e6ec42"
source: https://www.awwwards.com/inspiration/dynamic-menu-siena-film-foundation
author: "Niccolò Miranda (niccolo.miranda)"
media: "video, 1600x1200, 10.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Cinema Ticket Navigation Menu

## Summary
A navigation bar shaped like a cream cinema ticket: the main stub shows the current film's thumbnail, title and a three-cell info strip, the small stub holds a hamburger, and notched corners plus dashed perforations sell the paper ticket look. The title stub drops down a film list and the hamburger unfolds the ticket into a big menu. Worth studying for how a single physical metaphor drives a dynamic, context-aware navbar over a dark cinematic site.

## Style
- Theme: dark (cream ticket floating over dark film stills)
- Mood: cinematic, tactile, witty, editorial
- Tags: navbar, ticket-ui, dropdown, hamburger-menu, perforation, film-site, skeuomorphic
- Category: Navigation

## Palette
| Role | Hex |
|---|---|
| Page background | #0A0909 |
| Ticket cream | #F5F1E9 |
| Ink black | #080707 |
| Film shadow brown | #1F1510 |
| Warm brown | #3B261B |
| Leather | #5B4335 |
| Taupe grey | #82746A |
| Deep black | #030202 |

## Typography
- Ticket title (current film): grotesk sans, bold, uppercase, tight leading (about 0.9) and tracking, two lines, about 2 percent of frame height. Archivo (700) or Inter Tight (700).
- Info strip ("FILM", "SHORT FILM", "MIN.93"): tiny uppercase sans with wide tracking (about 0.15em), centred in cells. Inter (500).
- Menu links ("WORK", "ABOUT", "CONTACT"): large bold uppercase grotesk, about 4 percent of frame height, with tiny "01" to "03" indexes. Archivo (700).

## Layout
- 4:3 frame (1600x1200); the ticket sits at the top-left of the page in the close-ups, and at the top-right on the full page views, about 260 x 80px at rest.
- Ticket structure: a main stub (about 70 percent width) with a 36px square thumbnail and title in the top row and a 3-cell info strip below divided by thin vertical lines; a hamburger stub (about 30 percent) separated by a dashed vertical perforation.
- Corners and the perforation ends are cut with 8px semicircle notches, filled with the page background colour.
- Dropdown: hangs under the main stub with the same width, rows about 34px tall with 20px thumbnails, separated by dashed lines; the active row has a grey fill and a dot.
- Menu state: the whole ticket grows to about 260 x 310px; links stacked left with 8px gaps, dashed separators, a cookie row and a row of two social icons at the bottom.

## Elements
- Hamburger stub: three thin horizontal lines that morph into an "x".
- Perforations: dashed 1px lines with notches at both ends, like a tear-off line.
- Film list: six or seven rows, each a thumbnail and uppercase title; the hovered row shows a small arrow button.
- Big menu: indexed links, cookie settings row, two social icons.
- Background page: full-bleed film stills with large white uppercase titles, a year, review quotes with five stars, and a small "Explore" outline button.

## Motion
- 0.4s: ticket at rest; about 1 to 2.4s: clicking the title drops the list down (rows unfold one by one, about 40ms stagger, 300ms total, ease-out) and the ticket's title swaps to the chosen film with a quick vertical text slide.
- About 3 to 4.4s: tapping the hamburger expands the ticket height with a spring (about 450ms) while the info strip collapses; links rise into place line by line (60ms stagger), and the icon morphs to an "x" (200ms).
- 6.4s: back on the page; the ticket now shows the film in view, updating as the user scrolls.
- 8.3s: the list opens over a film still; hovering a row highlights it (150ms) and choosing it transitions the page to that film at 10.3s.

## Rebuild it
1. Ticket shell: a `motion.nav` with `layout` and `bg-[#F5F1E9] text-[#080707]`; create notches with a CSS `mask` of radial gradients at the corners and at the perforation ends (`radial-gradient(circle 8px at 0 0, transparent 98%, #000)` combined per corner).
2. Inner grid: `grid grid-cols-[1fr_auto]`; the perforation is a `border-l border-dashed border-black/40`.
3. Title: `font-[Archivo] font-bold uppercase leading-[0.9] text-sm`; swap it with `AnimatePresence mode="popLayout"` (`y: 100%` to `0`, 250ms).
4. Dropdown: render rows inside the same `layout` container so the ticket height animates; stagger rows with variants (`staggerChildren: 0.04`).
5. Menu: toggle a `menuOpen` state that swaps the content for big indexed links; animate the container with `transition={{ type: "spring", stiffness: 260, damping: 28 }}`.
6. Hamburger: two `motion.span` lines that rotate to 45 and -45 degrees; keep the ticket `fixed top-4 right-4 z-50`.

## Generation prompt
A dark cinematic film website with a cream paper cinema-ticket shaped navigation bar floating at the top: notched corners and dashed perforation lines, a small film thumbnail with a bold uppercase title, a tiny info strip, and a hamburger stub; the ticket unfolds into a dropdown list of films with thumbnails and into a large menu of bold uppercase links, moody film stills with big white titles and star-rated review quotes behind, tactile and editorial, no real logos or names.