Aperture

A menu button whose iris blades open into a full-screen menu and snap shut like a shutter.

A UI component for any site
Plain HTML, CSS, JavaScript and SVG, no dependencies
Use it in unlimited client projects

Checkout opens soon.
14-day refund if it doesn’t do what the demo shows.

BundleAll navigation: 13 pieces for $52, you save $13

Aperture: a look at the source

// Aperture — a menu button whose iris blades open into a full-screen menu. No dependencies.
// The button holds a seven-blade iris drawn in SVG. On open, a copy of that iris flies out of
// the button to the middle of the screen, its blades turn open, and then it rushes past the
// viewer until the hole covers the screen, so the menu is seen through the iris. One number,
// 0 to 1, drives everything: blade angles, the lens position and scale, the circle that clips
// the menu and the f-number. Re-triggering mid-motion continues from that number, and a drag
// sets that number straight from the pointer.

const BLADES = 7;
const OPEN_RAD = 57 * Math.PI / 180;    // how far a blade turns about its pivot
const CLOSED_RAD = 3 * Math.PI / 180;   // the blade edge's angle when shut (leaves a pinhole, like f/16)
const PIVOT_R = 26;             // blade pivots sit on this circle, in SVG units
const UNITS_R = 22.5;           // hole radius when fully open = 26 * sin(60°)
const RING_IN = 25;             // inner edge of the ring: the menu circle never needs to be larger
const HEPTAGON = 1 / Math.cos(Math.PI / 7);   // inscribed → circumscribed radius of the hole
const STAGE = .76;              // the lens's size mid-screen, as a share of the shorter side
const T_OPEN = 760;             // the whole opening
const TRAVEL_MS = 300;          // the lens flies from the button to mid-screen
const LEAD_MS = 120;            // the blades start to turn this long after the press
const OPEN_MS = 380, OPEN_LAG = 25;       // one blade's turn, and the lag between blades
const ZOOM_AT = 380;            // then the lens rushes past until the hole covers the screen
const CLOSE_MS = 150;           // one blade's turn when shutting
const T_CLOSE = T_OPEN * CLOSE_MS / OPEN_MS;
const PULL = 220;               // px of drag from shut to fully open
const F_STOPS = ['16', '11', '8', '5.6', '4', '2.8', '1.4'];
const SVG = 'http://www.w3.org/2000/svg';
const EASE_OUT = 'cubic-bezier(.23, 1, .32, 1)';

const quintOut = t => 1 - (1 - t) ** 5;   // the same curve as cubic-bezier(.23, 1, .32, 1)
const cubicInOut = t => (t < .5 ? 4 * t ** 3 : 1 - (2 - 2 * t) ** 3 / 2);
const clamp = (v, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, v));
// cubic-bezier(x1, y1, x2, y2) as a function of x, solved with a few Newton steps
function bezier(x1, y1, x2, y2) {
  const ax = 3 * x1 - 3 * x2 + 1, bx = 3 * x2 - 6 * x1, cx = 3 * x1;
  const ay = 3 * y1 - 3 * y2 + 1, by = 3 * y2 - 6 * y1, cy = 3 * y1;
  return x => {
    let t = x;
    for (let k = 0; k < 8; k++) {
      const d = (3 * ax * t + 2 * bx) * t + cx;
      if (Math.abs(d) < 1e-6) break;
…  443 more lines in the zip

/* Aperture — a menu button whose iris blades open into a full-screen menu and snap shut like a shutter */
.aperture {
  /* sizes */
  --aperture-size: 56px;                  /* the round button */
  --aperture-bar-h: 72px;                 /* the top plate */
  --aperture-link-size: clamp(28px, 7vw, 46px);
  --aperture-z: 50;
  /* type */
  --aperture-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --aperture-ink: #15171b;
  --aperture-muted: #646a74;
  --aperture-accent: #a86a0a;             /* hover colour, focus ring, the glow around a hovered button */
  /* the camera body: a silver top plate */
  --aperture-plate: linear-gradient(180deg, #f7f8fa, #dcdfe4);
  --aperture-plate-hi: rgb(255 255 255 / .9);
  --aperture-plate-edge: rgb(0 0 0 / .16);
  --aperture-plate-shadow: 0 14px 30px -20px rgb(20 24 32 / .45);
  /* the aluminium ring: light to dark across the diagonal */
  --aperture-rim-a: #ffffff;
  --aperture-rim-b: #d4d8de;
  --aperture-rim-c: #a3a8b0;
  --aperture-rim-d: #71767e;
  --aperture-groove-hi: rgb(255 255 255 / .45);
  --aperture-groove-lo: rgb(0 0 0 / .18);
  --aperture-spec: rgb(255 255 255 / .9);
  /* the blades: dark steel with one sheen stop */
  --aperture-steel-a: #4a4f58;
  --aperture-steel-b: #7d848e;
  --aperture-steel-c: #2a2e35;
  --aperture-steel-d: #121417;
  --aperture-blade-edge: rgb(255 255 255 / .32);
  --aperture-blade-shade: rgb(0 0 0 / .32);
  /* what the open hole shows in the button: the lens interior and its coating */
  --aperture-pupil-a: #262a31;
  --aperture-pupil-b: #07080a;
  --aperture-glint: rgb(255 255 255 / .34);
  --aperture-coat-a: #8a6cff;
  --aperture-coat-b: #3fd3c4;
  --aperture-occlusion: rgb(16 18 24 / .42);
  /* the engraved readout */
…  333 more lines in the zip

Ask a question

What it does

A round menu button set into a camera top plate: an aluminium ring with machined grooves and a seven-blade iris of dark steel, stopped down to a pinhole. Press it and a large copy of the lens flies out of the button to the middle of the screen, its blades turn open one after another and the first links appear in the hole; then the lens rushes towards you until the hole fills the screen and the menu is all that is left. The f-number engraved next to the button counts down from f/16 to f/1.4 as it opens, and when the last blade lands a flare crosses the ring and the number ticks. Or pull the button down and the iris opens with your finger, frame by frame, and finishes on its own when you let go. On the open menu, slide a finger over the links to light them up and let go on one to choose it, or swipe up to shut. Press again or pick a link and the blades slam shut, the lens pulls back and flies into the button, and the screen flashes once, like a shutter; Esc shuts it with a quick fade.

Good for: Photographers, studios, agencies, film and camera brands, portfolio and campaign sites, any site that wants a full-screen menu with a mechanical feel.
How it works: The iris is one inline SVG. The script draws a second copy of it over the page, moves and scales it from the button to the middle of the screen and on until the hole covers the viewport, and turns each blade about its own pivot with a 25 ms lag between blades; the menu is clipped to the hole the blades leave. One number drives the blades, the lens, the clip and the readout, so opening while it shuts, or the reverse, continues from where the blades are. A drag sets that number straight from the pointer (220 px from shut to open), and on release it carries on at the speed the finger let go with; a flick decides the direction. Pointer Events with pointer capture, so it works the same with a mouse and on touch.
How to use: Copy two files, paste the markup, change the five links, call init(). Pass your page wrapper as push and it sinks back and dims while the menu is open. Gestures are on by default; drag: false turns them off.

Price: $5, one payment
Version: 1.0.0
Code size: 11.9 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript, SVG
Category: Navigation
Licence: Unlimited personal and client projects
In the zip: aperture.css aperture.jsthe component
index.htmla plain example page with the iris markup
README.mdsetup, CSS variables, options, API, React notes
package.json vite.config.js npm install npm run dev
LICENSE.md

Use it in your project

Copy aperture.css and aperture.js into your project.
Add the markup from index.html (the block between the COMPONENT comments): a top plate with your brand link, the round button with its SVG iris, the f-number readout, and the menu with your links. Change the link text and hrefs; add or remove <li> items as you like.
Start it:

import { init } from './aperture.js';

const menu = init(document.querySelector('.aperture'), {
  push: document.querySelector('.page'),            // optional: sinks back and dims while the menu is open
  onSelect: (index, href, event) => console.log(index, href),
});

The menu is a dialog: the button carries aria-expanded and aria-controls, the menu role="dialog" and aria-modal, and it is inert while shut. Open it with the button, close it with the button, Esc, a press on the background or by choosing a link.

The page behind: give the wrapper of your page content the class aperture-push and pass it as push. It is scaled to .96 around the middle of the screen and dimmed to 60 % while the menu is open. Keep the .aperture element outside that wrapper, because a transformed ancestor would break the fixed-position menu.

useEffect(() => {
  const menu = init(ref.current, { onSelect });
  return () => menu.destroy();
}, []);

Questions

What exactly do I get?

The full source, an example page and a README. No account, no framework.

Can I use it in client projects?

Yes, in unlimited projects. You can't resell or share the source itself.

Can I change the links?

Yes. They are plain <a> elements in a list; add or remove as many as you need. The footer line is optional.

Can I change the colours?

Yes. The ring, the blades, the lens interior, the plate, the menu and the accent each have their own variables, for light and dark separately.

Is it accessible?

The button is a real button with aria-expanded; the menu is a dialog that takes focus, traps Tab, walks the links with the arrow keys, shuts on Esc and hands focus back. Keyboard opening and closing is a short fade. With reduced motion the menu fades and the blades jump, with no flash; pulling the button still works as a fade that follows the finger.

Light and dark?

Both are designed: a silver plate with dark steel blades by day, a matte black body with an aluminium ring at night. With no theme set, the system setting applies.

Does it work on phones?

Yes. At 320 px the button is 48 px, the links are 28 px and the whole menu fits without scrolling. Pull, scrub and swipe work on touch, and the page does not scroll under them.

What if it doesn't work for me?

If it doesn't work like the demo, you get a refund within 14 days.

Still have a question? Email us. The person who made it answers.

More like Aperture

All navigation

index.html

<nav class="abacus" aria-label="Pagination">
  <button class="abacus-end abacus-prev" type="button"></button>
  <div class="abacus-rail"></div>
  <button class="abacus-end abacus-next" type="button"></button>
</nav>

abacus.css

.abacus-end {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--abacus-post);
  height: calc(var(--abacus-bead-h) + 10px);
  margin: 0;
  padding: 0;
  border: 0;

abacus.js

export function init(root, {
  pages = 9,
  page = 1,
  window: win = 7,        // beads shown at once when there are more than 12 pages (odd numbers work best)
  onChange,
  onPreview,              // called while a bead is pulled, with the page it would land on
  drag = true,            // pull beads along the rod with a finger or the mouse
  duration = 440,         // ms a bead takes to cross the gap and settle
  stagger = 40,           // ms between beads in a chain
  labels = {},
} = {}) {

Abacus

Pagination where numbered beads slide along a metal rod and clack into place

11.3 KB0 depsNavigation

index.html

<nav class="dimple" aria-label="Main">
  <button class="dimple-tab" type="button" aria-selected="true" data-value="home" data-tint="#ffb238">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/><path class="dimple-line" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/></svg>
    <span class="dimple-label">Home</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="explore" data-tint="#36d695">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17z"/><path class="dimple-line" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17zM15.5 8.5l-2 5-5 2 2-5z"/></svg>
    <span class="dimple-label">Explore</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="inbox" data-tint="#ff6b57">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/><path class="dimple-line" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18zM3.5 13H8l1.5 2.5h5L16 13h4.5"/></svg>

dimple.css

.dimple {
  --dimple-h: 64px;                 /* the bar itself */
  --dimple-head: 30px;              /* room above the bar for the drop to hop */
  --dimple-drop: 46px;              /* drop diameter */
  --dimple-radius: 26px;            /* bar corners */
  --dimple-width: 420px;
  --dimple-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;

  --dimple-bar-top: #ffffff;
  --dimple-bar-bottom: #eef0f5;
  --dimple-rim: rgb(255 255 255 / .95);

dimple.js

export function init(root, { onChange, onPreview, drag = true } = {}) {
  const tabs = [...root.querySelectorAll('.dimple-tab')];
  const reduced = () => !!root.closest('[data-motion="reduced"]') || matchMedia('(prefers-reduced-motion: reduce)').matches;
  const tintOf = t => t.dataset.tint || '';

  let index = Math.max(0, tabs.findIndex(t => t.getAttribute('aria-selected') === 'true'));
  root.setAttribute('role', 'tablist');
  tabs.forEach(t => {
    t.setAttribute('role', 'tab');
    t.setAttribute('aria-selected', 'false');
    t.tabIndex = -1;

Dimple

A bottom tab bar where a coloured drop hops between dips in the bar and lands with a ripple

8.4 KB0 depsNavigation

index.html

<nav class="fresnel" aria-label="Main">
  <svg class="fresnel-lamp" viewBox="0 0 120 140" aria-hidden="true" focusable="false">
    <defs>
      <linearGradient id="fresnel-g-barrel" x1="0" y1="0" x2="1" y2="0">
        <stop class="fresnel-s-edge" offset="0"/>
        <stop class="fresnel-s-rim" offset=".07"/>
        <stop class="fresnel-s-hi" offset=".3"/>
        <stop class="fresnel-s-mid" offset=".58"/>
        <stop class="fresnel-s-shade" offset=".86"/>
        <stop class="fresnel-s-dark" offset="1"/>
      </linearGradient>

fresnel.css

.fresnel-lamp {
  grid-row: 1;
  position: relative;
  z-index: 3;
  height: var(--fresnel-lamp-h);
  width: auto;
  overflow: visible;
  translate: 0 0;
  transition: translate 100ms var(--fresnel-ease);
  pointer-events: none;
}

fresnel.js

export function init(root, {
  onChange,            // (index, href) => void, when the chosen link changes
  onPreview,           // (index, href) => void, while dragging: the link the beam is over
  followLinks = true,  // a plain click follows the link once the lamp strikes on it
  drag = true,         // press and drag (or flick) along the bar to aim the lamp
  travel = 560,        // ms, sets the spring's stiffness: with the default settle the beam is within 10% of
                       // the link after ~0.35 s, strikes at ~0.33–0.4 s and is fully still after ~0.9–1.2 s
  settle = .12,        // 0–.4, how much the lamp overshoots and settles on arrival
} = {}) {
  const $ = s => root.querySelector(s);
  const head = $('.fresnel-head');

Fresnel

A navigation bar lit by a stage spotlight that swings to the link you choose

10 KB0 depsNavigation

index.html

<nav class="lantern" aria-label="Main">
  <ul class="lantern-list">
    <li><a class="lantern-link" href="#overview" aria-current="page">
      <svg class="lantern-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="2"/><rect x="13.5" y="3.5" width="7" height="7" rx="2"/><rect x="3.5" y="13.5" width="7" height="7" rx="2"/><rect x="13.5" y="13.5" width="7" height="7" rx="2"/></svg>
      <span class="lantern-label">Overview</span>
    </a></li>
    <li><a class="lantern-link" href="#orders">
      <svg class="lantern-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 8.2 12 4l8.5 4.2v7.6L12 20l-8.5-4.2Z"/><path d="M3.5 8.2 12 12.4l8.5-4.2M12 12.4V20"/></svg>
      <span class="lantern-label">Orders</span>
    </a></li>
    <li><a class="lantern-link" href="#clients">

lantern.css

.lantern-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--lantern-row);
  padding: 0 14px 0 calc(var(--lantern-icon-x) - var(--lantern-inset));
  border-radius: 12px;
  text-decoration: none;
  color: var(--lantern-ink);
  -webkit-tap-highlight-color: transparent;

lantern.js

export function init(root, { onChange, onPreview, reach, drag = true } = {}) {
  const id = `lantern-${++instances}`;
  const links = [...root.querySelectorAll('.lantern-link')];
  if (!links.length) throw new Error('Lantern: no .lantern-link found');
  if (root.tagName !== 'NAV' && !root.getAttribute('role')) root.setAttribute('role', 'navigation');

  const hooks = links.map(link => {
    const hook = drawHook(id);
    link.prepend(hook);
    const dot = document.createElement('span');
    dot.className = 'lantern-dot';

Lantern

A sidebar where a hanging lantern swings to the item you choose and lights the labels around it

10.5 KB0 depsNavigation

What it does

Use it in your project

Questions

More like Aperture

Abacus

Dimple

Fresnel

Lantern

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Aperture

Abacus

Dimple

Fresnel

Lantern