Morphing Menu

About this style

Mega menus are large dropdown panels that show many links at once, grouped into columns with headings, icons and short descriptions. They spread on big retail and corporate sites in the 2000s, where usability testing found them easier to scan than long cascading lists. Product sites later turned them into a single panel that reshapes and slides between sections as the cursor moves along the nav, keeping the motion continuous instead of opening and closing separate menus.

Make a 10-second website navigation demo: a cursor moves along a landing page's top nav and one dropdown panel morphs its size, position and content from section to section.

<inputs>
If I don't give you something, use the default and don't ask.
- Site: Cairnway, delivery routing software (fictional).
- Hero: "Every delivery, on the map." Subline: "Plan routes, track drivers and prove every drop, from one screen." Buttons: Book a demo, See pricing.
- Nav: Platform, Solutions, Resources, Company, Pricing; at right, Sign in and Book a demo.
- Platform panel: Route planning "Build a day's routes in seconds" · Live tracking "Every van on one map" · Proof of delivery "Photos, signatures, timestamps" · Driver app "Turn-by-turn, works offline"; a promo tile "New: Dock scheduling →"
- Solutions panel, three columns: By industry (Grocery, Pharmacy, Furniture) · By team (Dispatch, Operations, Finance) · By fleet size (Local, Regional, National)
- Resources panel: Guides, Webinars, Changelog, Help center; a featured story "How Ridley Grocers cut late deliveries by 38%"
- Company panel: About, Careers (badge "6 open roles"), Press, Contact
- Path: Platform → Solutions → Resources → Company → back to Resources, ending on the featured story.
- Length: 10 seconds.
</inputs>

<direction>
- Palette: hero forest #10291F under a seeded topographic texture (1px contour lines in #FFFFFF at 5%); cream text #F4EEDF; secondary #A9B8AE; apricot #FFB27A for the primary buttons, the badge and the nav underline; panel #FFFDF8; panel ink #18211C; panel secondary #66706A; row hover #F1EDE3; icon tiles sage #DCE8DF.
- Type: Bricolage Grotesque (opsz 96, wght 700, wdth 90) for the headline, 112px, tracking −0.02em, two lines; Inter 400–600 for everything else: nav 20px/500, subline 26px/400, panel titles 22px/600, descriptions 20px/400, section labels 20px/600 uppercase tracked 0.1em in secondary.
- Layout: the nav bar on y 56–120 within 120px side margins: a drawn cairn of three stacked stones and "Cairnway" (30px/700) at left; nav items from x 520, 48px apart; Sign in and an apricot "Book a demo" button at right. The headline's baselines sit at y 700 and 812 from x 120, the subline at y 880 and the two buttons on y 930–990. At right, a map card 620×400 with its top-left at (1180, 580): pale streets, three colored routes and van dots, drawn in SVG.
- One panel, never several: a single #FFFDF8 surface (20px radius, shadow 0 30px 80px rgba(4,16,11,0.45)) whose x, width and height move on a spring (stiffness 380, damping 34, about 2% overshoot) from one section's size to the next, centered under the hovered item but kept 120px from the stage edges, its top edge at y 140. Sizes: Platform 720×380, Solutions 900×300, Resources 640×420, Company 420×280. A 14px caret on its top edge and the 2px apricot underline under the hovered item slide on the same spring. Content is one layer per section: outgoing content slides 64px away from the direction of travel and fades out in 160ms; incoming content slides in from 64px on the side of travel and fades in over 240ms, starting 60ms later, on cubic-bezier(0.2, 0, 0, 1). The panel clips its content to its rounded box mid-morph, so nothing spills. It first opens from scale 0.96 and 8px higher, fading in over 220ms with its origin at the caret.
- Rows: a 44px sage icon tile with a drawn monoline icon (a route with stops, a map pin, a camera with a check, a phone), the title, and the description under it. Hover fades in a #F1EDE3 background (120ms) and nudges the icon 2px right.
- Featured story: a 260×300 card in the Resources panel with a drawn route-map thumbnail; on hover it lifts 4px with a deeper shadow, the thumbnail scales 1.04 inside its clip, and a "Read the story →" underline draws left to right.
- Cursor: a drawn white arrow with a dark outline on gently curved paths, 0.35–0.6s on cubic-bezier(0.45, 0, 0.15, 1), dipping slightly between nav items like a real hand and dwelling 0.8–1.2s per section.
- Premium: one surface that reshapes and slides, content that enters from the side the cursor is moving toward, and nothing popping. Cheap: separate dropdowns blinking open and shut with content swapped in place.
Banned: real company names or a copied real site, gradients on the panel, frosted glass, emoji, the panel closing between sections, content spilling outside the panel, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the hero: the contour lines fade in, the nav items drop in 8px, 40ms apart, the headline rises out of its mask line by line, then the subline, buttons and map card.
- 0.8–1.2s: the cursor enters from the lower right and climbs to Platform; the panel opens.
- 1.2–2.2s: it dips into the panel and hovers Live tracking.
- 2.2–2.6s: up and right to Solutions: the panel widens and shortens; content enters from the right.
- 2.6–3.4s: it hovers Pharmacy.
- 3.4–3.8s: right to Resources: the panel narrows and grows taller.
- 3.8–4.4s: right to Company: the panel turns compact; the cursor hovers Careers and its badge.
- 4.4–5.2s: a pause on Company.
- 5.2–5.6s: back left to Resources: the panel grows and the content enters from the left.
- 5.6–6.4s: the cursor dips toward the featured story. At 6.0s the Resources panel is fully settled over the hero.
- 6.4–7.2s: it hovers the story: the card lifts and the underline draws.
- 7.2–8.4s: the cursor rests on the card; everything settles.
- 8.4–10.0s: hold, perfectly still.
For other lengths, change the dwell on each section; keep each morph on its spring and at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: HTML/CSS with inline SVG for the logo, icons, cursor, map card and contour texture (the contours generated once at load), all positioned from seek.
- The cursor path and hover schedule are a timeline built once at load; the panel's springs are closed-form, and a spring retargeted mid-motion starts from its current position and velocity.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check there is only ever one panel and it never closes between sections, content always enters from the side of travel (from the left on the return), nothing spills past the rounded edge mid-morph, the caret always points at the hovered item, the headline is never covered, and the final frame holds the lifted story card. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…