Circular Futuristic Navigation Menu
What it does
A fullscreen overlay menu whose links are arranged as radial clip-path segments around a draggable center joystick. Clicking the bottom hamburger button toggles the overlay with GSAP opacity, scale (back.out/back.in) and randomized yoyo-flicker reveals; dragging the joystick with lerped follow motion highlights the segment it points toward via CSS flicker keyframes, with audio feedback on open/close/select.
How it's built
| Category | menu |
|---|---|
| Tech | gsap |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | desktop-first |
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.
# Circular Futuristic Navigation Menu — Radial Segments + Draggable Joystick
## Goal
Build a fullscreen overlay navigation menu whose 6 links are arranged as **radial "pie-donut" segments** (clip-path wedges) around a **draggable white joystick** in the center. Clicking a rounded hamburger tab at the bottom of the screen toggles the overlay: the joystick **pops in with a back-out scale**, and the nav bar, footer and every wedge **flicker in with randomized glitchy yoyo blinks** (GSAP `repeat`/`yoyo` opacity pulses). While open, hovering a wedge — or **dragging the joystick toward it** — triggers a CSS "flicker to solid white" keyframe animation on that wedge, like a sci-fi console selection. Short UI sound effects play on open/close/select. The star effect is the combination of the randomized glitch-flicker reveal and the lerped joystick-drag segment highlighting.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) — **core only, no plugins**. No smooth-scroll library. Icons come from **Ionicons v7 web components**, served from your own origin:
```html
<script type="module" src="/vendor/ionicons/ionicons.esm.js"></script>
<script nomodule src="/vendor/ionicons/ionicons.js"></script>
```
Get those two files with `npm i ionicons@7.1.0` and copy `node_modules/ionicons/dist/ionicons/`
into your public directory. Copy the **whole** folder: the loader fetches its `p-*.entry.js` chunks
and one `svg/<name>.svg` per icon at runtime, resolved relative to the script's own URL.
…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
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.