Sumi

A site navigation whose active link is underlined by a brush stroke painted in ink, then stamped with a seal.

A UI component for any site
Plain HTML, CSS and JavaScript, 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

Sumi: a look at the source

// Sumi — brush-stroke site navigation. No dependencies.
// Every link gets its own stroke, drawn as a bundle of bristles for that link's width.
// The active link's stroke is painted left to right behind a wet bead of ink, spatters
// a few drops past the flick, soaks into the paper, then a vermilion seal stamps beside it.

const NS = 'http://www.w3.org/2000/svg';
const EASE = 'cubic-bezier(.23, 1, .32, 1)';
const H = 26;          // height of the stroke's drawing box, in drawing units
const TAIL = 20;       // room past the flick for the spatter
const SLANT = .22;     // the wet front leans forward like a real brush edge

let uid = 0;

function el(name, attrs, parent) {
  const node = document.createElementNS(NS, name);
  for (const k in attrs) node.setAttribute(k, attrs[k]);
  if (parent) parent.appendChild(node);
  return node;
}

// small seeded generator, so a link's stroke is the same on every visit but no two links share one
function rng(seed) {
  return () => {
    seed = (seed + 0x6D2B79F5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

const easeOut = t => 1 - Math.pow(1 - t, 3);
// the brush: a quick attack that still lets the stroke be watched, then a feathered end
const brush = t => 1 - Math.pow(1 - t, 2.2);
const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
const fmt = n => Math.round(n * 100) / 100;
// past an edge the brush still moves, but less the further it goes
const rubber = (over, dim = 60) => (over * dim * .55) / (dim + .55 * Math.abs(over));
const KEY = 'sumi:paint';

// A brush stroke of length L, built from bristles: a pressed, rounded head where they overlap
…  637 more lines in the zip

/* Sumi — a site navigation whose active link is underlined by a brush stroke painted in ink, then stamped with a seal */
.sumi {
  /* ink on washi: the stroke, its wet leading edge, the resting link colour, the pressed link colour */
  --sumi-ink: #221e1a;
  --sumi-ink-wet: #000000;
  --sumi-muted: #6d665b;
  --sumi-ink-press: #000000;
  /* the seal: vermilion paste, its deeper pressed tone, the paper indent around it */
  --sumi-seal: #c73a2b;
  --sumi-seal-deep: #8e2217;
  --sumi-glint: rgb(255 250 240 / .55);
  --sumi-indent: rgb(90 60 30 / .4);
  --sumi-indent-lip: rgb(255 253 246 / .4);
  --sumi-indent-fill: rgb(120 90 50 / .05);
  --sumi-focus: #c73a2b;
  /* type and layout */
  --sumi-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --sumi-size: 16px;
  --sumi-pad-x: 18px;
  --sumi-pad-y: 10px;
  --sumi-gap: 6px;
  --sumi-stroke-h: 26px;     /* height of the brush stroke's drawing area under a link */
  --sumi-stroke-lift: -7px;  /* where the stroke's box sits against the link's bottom edge */
  --sumi-seal-size: 20px;
  --sumi-seal-top: calc(var(--sumi-pad-y) - 2px);
  --sumi-ease: cubic-bezier(.23, 1, .32, 1);

  position: relative;
  display: inline-block;
  max-width: 100%;
  font-family: var(--sumi-font);
  font-size: var(--sumi-size);
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .sumi, .sumi[data-theme="dark"] {
  --sumi-ink: #f1ebe1;
  --sumi-ink-wet: #ffffff;
  --sumi-muted: #8f877b;
…  157 more lines in the zip

Ask a question

What it does

A top navigation for a website. When you choose a page, the old underline dries and fades, and a new brush stroke is painted under the link from left to right: a pressed head, a wet front, a dry tail where the bristles split, and a few drops of ink past the flick. Then a small vermilion seal is stamped beside the word.

Good for: Studio and portfolio sites, galleries, tea and food brands, bookshops, journals, anything with a hand-made feel.
How it works: Each link gets its own stroke, drawn for its width from a bundle of bristles, so no two links look the same and the stroke still fits after the layout changes. The stroke is revealed behind a darker wet edge, soaks into the paper as it finishes, and the seal lands with a short press. You can also press and drag along the menu: a wet stroke is painted live under your finger or mouse, thick when you go slowly, thin and streaky when you go fast, and the link under the brush darkens. Let go and the nearest link takes over the stroke and gets its seal. A quick flick left or right moves one link. On a multi-page site the stroke is painted once, on the page you chose, and not again on every page view.
How to use: Copy two files, paste the markup, call init(). Your links stay ordinary links; onChange tells you which one was chosen.

Price: $9, one payment
Version: 1.0.0
Code size: 12.3 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript
Category: Navigation
Licence: Unlimited personal and client projects
In the zip: sumi.css sumi.jsthe component
index.htmla plain example page
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 sumi.css and sumi.js into your project.
Add the markup from index.html (the block between the COMPONENT comments).
Start it:

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

init(document.querySelector('.sumi'), {
  onChange: (index, href) => console.log(index, href),
});

The links are ordinary <a class="sumi-link"> elements. Mark the current page with aria-current="page"; the script moves it when another link is chosen. Each link gets its own stroke, drawn for that link's width and redrawn when the layout changes.

On a normal multi-page site the browser follows the link as usual, and the next page paints the stroke once it has loaded (the choice is passed along in sessionStorage). A page opened any other way (typed URL, reload, back button) shows the stroke already dry, so the motion plays only when someone actually chose a page. In a single-page app, call event.preventDefault() in onChange and route yourself:

init(nav, {
  onChange: (index, href, event) => { event?.preventDefault(); router.go(href); },
});

useEffect(() => {
  const sumi = init(ref.current, { onChange });
  return () => sumi.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.

Do I need React?

No. The README shows how to use it in React or Next.js.

Does it work with a normal multi-page site?

Yes. The links are real <a> elements and the browser follows them. In a single-page app you can stop the click in onChange and route yourself.

Is it keyboard accessible?

Yes. Tab moves between links, Enter follows one, the focus ring is visible, and the current page carries aria-current="page".

Does it work on phones?

Yes. Tap a link, or drag along the menu with your finger; a sideways drag doesn't scroll the page, and an up-and-down swipe still does. On narrow screens the links wrap to two rows and the stroke follows each link's width.

What about reduced motion?

With the system setting on, the stroke and seal fade in over 160 ms with no painting or spatter. Dragging still works and ends with a fade.

Can I change the colours?

Yes. Ink, wet edge, seal and paper dent are CSS variables, and there is a dark theme with white ink on black.

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 Sumi

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

$12

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

10 KB0 depsNavigation

What it does

Use it in your project

Questions

More like Sumi

Zipper

Aperture

Dimple

Fresnel

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Sumi

Zipper

Aperture

Dimple

Fresnel