Fresnel

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

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 $120, you save $30

Fresnel: a look at the source

// Fresnel — a navigation bar lit by a stage spotlight that swings to the link you choose. No dependencies.
// The lamp head turns in its yoke; the beam shares the same pivot, so lens and cone stay aligned.
// One value drives everything per frame: the lamp's angle. A spring moves it after a click; the pointer moves it
// while you drag. From it come the iris (from speed), how much light falls on each link (from its angular
// distance to the beam), the hot spot on the bar and the shadow on the floor.

const DEG = 180 / Math.PI;
const EASE_OUT = 'cubic-bezier(.23, 1, .32, 1)';
const smooth = t => (t <= 0 ? 0 : t >= 1 ? 1 : t * t * (3 - 2 * t));
const easeOut = t => 1 - (1 - t) ** 3;
// past the first or last link the beam follows less and less: real things slow before they stop
const rubber = (over, dim) => (over * dim * .55) / (dim + .55 * over);

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');
  const pivotMark = $('.fresnel-pivot');
  const lensMark = $('.fresnel-lens-mark');
  const flare = $('.fresnel-flare');
  const beam = $('.fresnel-beam');
  const irises = [...root.querySelectorAll('.fresnel-cone, .fresnel-core, .fresnel-dust')];
  const bar = $('.fresnel-bar');
  const list = $('.fresnel-list');
  const spot = $('.fresnel-spot');
  const shadow = $('.fresnel-shadow');
  const rise = [...root.querySelectorAll('.fresnel-rise')];
  const links = [...root.querySelectorAll('.fresnel-link')];
  const last = links.length - 1;
  // a lit copy of each label over the plain one; its opacity is the light falling on the link
  const lits = links.map(a => {
    const s = document.createElement('span');
    s.className = 'fresnel-lit';
…  336 more lines in the zip

/* Fresnel — a navigation bar lit by a stage spotlight that swings to the link you choose */
.fresnel {
  /* the room: a daylight rehearsal space by default, a dark theatre with data-theme="dark" */
  --fresnel-ink: #7b7466;              /* a link outside the light */
  --fresnel-ink-hover: #4e4739;        /* a link the pointer rests on */
  --fresnel-ink-lit: #1a1510;          /* a link inside the light */
  --fresnel-glow: rgb(255 170 60 / .35);   /* halo around lit text */
  --fresnel-beam: #ffb24e;             /* 3200 K tungsten */
  --fresnel-beam-a: .6;                /* how much of the beam shows in the air */
  --fresnel-beam-w: 176px;             /* width of the cone where it meets the floor */
  --fresnel-spot: rgb(255 184 92 / .55);   /* the hot spot where the beam hits the bar */
  --fresnel-shadow: rgb(45 30 10 / .3);    /* the shadow the bar throws on the floor */
  --fresnel-dust: #fff2d8;
  /* the bar */
  --fresnel-bar: rgb(255 255 255 / .6);
  --fresnel-bar-blur: blur(18px) saturate(150%);
  --fresnel-rim-top: rgb(255 255 255 / .95);
  --fresnel-rim-bottom: rgb(255 255 255 / .35);
  --fresnel-hairline: rgb(50 35 10 / .1);
  --fresnel-bar-shadow: 0 1px 2px rgb(50 35 10 / .06), 0 24px 50px -24px rgb(50 35 10 / .45);
  --fresnel-focus: #ff8c1a;
  /* the lamp: enamel housing, grey shade, warm rim */
  --fresnel-metal-hi: #fbf8f2;
  --fresnel-metal: #ddd6c9;
  --fresnel-metal-shade: #a8a092;
  --fresnel-metal-dark: #7d766a;
  --fresnel-metal-edge: #5d574d;
  --fresnel-rim: #fff6e4;
  --fresnel-lens: #fff3d4;
  --fresnel-lens-edge: #e2b878;
  --fresnel-lens-glow: #ffd387;
  --fresnel-lens-glow-a: .8;
  /* layout */
  --fresnel-rig: 190px;                /* room above the bar for the lamp and the beam */
  --fresnel-floor: 72px;               /* room below the bar for the floor shadow */
  --fresnel-lamp-h: 150px;
  --fresnel-link-size: 15px;
  --fresnel-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --fresnel-ease: cubic-bezier(.23, 1, .32, 1);
  /* set by the script from the real geometry; the defaults match a 150px lamp */
…  332 more lines in the zip

Ask a question

What it does

A site navigation built as a small stage. A Fresnel lamp hangs above a floating glass bar of links. Choose a link and the lamp head turns in its yoke to aim at it; the beam turns with it, opens a little while it moves and closes again as it lands. The light washes over the row on the way: every link brightens and dims as the cone crosses it, with a warm halo on the one it stops on. On arrival the lamp strikes, with a quick double flicker of the lens and a few motes of dust drifting up through the beam. The bar throws a soft shadow on the floor that leans away from the lamp. You can also press and drag along the bar: the lamp aims at your finger or pointer as you move, the light passes over the links live, and on release it swings to the nearest link and strikes. A quick flick moves one link.

Good for: Studio, agency and portfolio sites, theatres, galleries, photographers, event and festival pages, any site that wants one memorable header.
How it works: The links are real <a> elements in a <nav>, the lamp is inline SVG and the beam is two blurred gradient cones that share the lamp's pivot. One spring drives the whole sweep each frame, so a second click mid-sweep redirects the lamp without a jump. While you drag, the pointer drives the same angle directly; on release its speed is handed to the spring, so there is no seam. Past the end links the beam resists and springs back. Pointer Events with mouse and touch; vertical swipes still scroll the page. A plain click turns the lamp and follows the link when it strikes.
How to use: Copy two files, paste the markup, change the link text and hrefs. Pass followLinks: false and an onChange to route it yourself in a single-page app.

Price: $12, one payment
Version: 1.0.0
Code size: 10 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript, SVG
Category: Navigation
Licence: Unlimited personal and client projects
In the zip: fresnel.css fresnel.jsthe component
index.htmla plain example page
README.md package.json vite.config.js LICENSE.md

Use it in your project

Copy fresnel.css and fresnel.js into your project.
Add the markup from index.html (the block between the COMPONENT comments). Keep the lamp SVG and the beam: they are the mechanism, not decoration. Change the links' text and href as you like, 4 to 6 links fit best.
Start it:

import { init } from './fresnel.js';
const nav = init(document.querySelector('.fresnel'), {
  onChange: (index, href) => console.log(index, href),
});

Mark the current page's link with aria-current="page"; the lamp starts there. A plain click turns the lamp first and follows the link when the lamp strikes on it (about 0.35–0.4 s after the click). Cmd/Ctrl/Shift-clicks, middle clicks, target="_blank" and download links go straight to the browser.

useEffect(() => {
  const nav = init(ref.current, { followLinks: false, onChange: (i, href) => router.push(href) });
  return () => nav.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.

Does it work with my own links?

Yes. Any number of links from 3 to 6 fits the bar; the lamp measures the real positions, so it aims correctly whatever the text says.

Does it navigate?

A normal click turns the lamp and then follows the href when the lamp strikes, about 0.4 s later. A drag navigates only after you let go. Modifier clicks, middle clicks and target="_blank" links go straight to the browser. Set followLinks: false to handle routing yourself.

Is it accessible?

Real links, Tab and Enter, aria-current="page" on the current page, a visible focus ring, 44px targets. With reduced motion there is no sweep: the old link dims and the new one lights in a short crossfade.

Can I change the light?

Yes. The beam colour, its brightness and width, the halo, the hot spot, the floor shadow, the lamp housing and the lens are all custom properties on the component.

Light and dark?

Both are designed: an enamel lamp with a soft warm wash in a daylight rehearsal room, a black-metal lamp with a tungsten beam on a dark stage.

Phones?

Works from 320px. The links shrink and the bar scrolls sideways; the beam still aims at the chosen link. Drag and flick work with touch; holding a drag near the bar's edge scrolls it.

Can I turn the dragging off?

Yes, drag: false. Clicks and keyboard work either way.

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 Fresnel

All navigation

index.html

<nav class="zipper" aria-label="Menu">
  <button class="zipper-pull" type="button" aria-expanded="false" aria-controls="zipper-links" aria-label="Menu">
    <span class="zipper-slider"></span>
    <span class="zipper-bail"></span>
    <span class="zipper-tag"></span>
  </button>
  <div class="zipper-body">
    <div class="zipper-lining"></div>
    <ul class="zipper-links" id="zipper-links">
      <li class="zipper-item"><a class="zipper-link" href="#home">Home</a></li>
      <li class="zipper-item"><a class="zipper-link" href="#shop">Shop</a></li>

zipper.css

.zipper-link {
  position: relative;
  display: inline-block;
  padding: 2px 8px;
  margin: -2px -8px;
  border-radius: 8px;
  color: var(--zipper-ink);
  text-decoration: none;
  font: 600 var(--zipper-link-size)/1.2 var(--zipper-font);
  letter-spacing: -.012em;
  white-space: nowrap;

zipper.js

export function init(root, { onOpen, onClose, onSelect, threshold = 0.4 } = {}) {
  const $ = s => root.querySelector(s);
  const body = $('.zipper-body');
  const pull = $('.zipper-pull');
  const slider = $('.zipper-slider');
  const tag = $('.zipper-tag');
  const list = $('.zipper-links');
  const items = [...root.querySelectorAll('.zipper-item')];
  const links = [...root.querySelectorAll('.zipper-link')];
  const teethBox = $('.zipper-teeth');
  const flaps = ['l', 'r'].map(s => ({

Zipper

$15

A side menu you unzip: drag the pull down and the teeth part to reveal the links

9.8 KB0 depsNavigation

index.html

<div class="aperture">
  <header class="aperture-bar">
    <a class="aperture-brand" href="#">Nocturne</a>
    <button class="aperture-toggle" type="button" aria-label="Menu">
      <svg class="aperture-iris" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <defs>
          <linearGradient id="aperture-rim-g" gradientUnits="userSpaceOnUse" x1="8" y1="6" x2="56" y2="60">
            <stop offset="0" class="aperture-rim-a"/><stop offset=".42" class="aperture-rim-b"/><stop offset=".6" class="aperture-rim-c"/><stop offset="1" class="aperture-rim-d"/>
          </linearGradient>
          <linearGradient id="aperture-steel-g" gradientUnits="userSpaceOnUse" x1="6" y1="4" x2="58" y2="62">
            <stop offset="0" class="aperture-steel-a"/><stop offset=".34" class="aperture-steel-b"/><stop offset=".52" class="aperture-steel-c"/><stop offset="1" class="aperture-steel-d"/>

aperture.css

.aperture-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--aperture-plate);
  box-shadow: inset 0 1px 0 var(--aperture-plate-hi), 0 1px 0 var(--aperture-plate-edge), var(--aperture-plate-shadow);
  transition: opacity 240ms var(--aperture-ease-out);
}
.aperture.is-open .aperture-bar::before { opacity: 0; }
.aperture-brand {

aperture.js

export function init(root, { onOpen, onClose, onSelect, onPreview, push, drag = true } = {}) {
  const toggle = root.querySelector('.aperture-toggle');
  const iris = toggle.querySelector('.aperture-iris');
  const menu = root.querySelector('.aperture-menu');
  const list = menu.querySelector('.aperture-list');
  const readout = root.querySelector('.aperture-readout-n');
  const glass = iris.querySelector('.aperture-glass');
  const flare = iris.querySelector('.aperture-flare');
  const links = [...menu.querySelectorAll('.aperture-link')];
  const blades = [...iris.querySelectorAll('.aperture-blade')];

Aperture

$12

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

11.9 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

$12

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="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

$12

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 Fresnel

Zipper

Aperture

Dimple

Lantern

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Fresnel

Zipper

Aperture

Dimple

Lantern