Blob nav

A nav bar whose active pill breaks into drops of goo that flow over to the link you pick.

enhancer
navigation
goo
particles
click
links
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Blob nav example

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<nav data-motion="blob-nav" aria-label="Sections">
  <a href="#" aria-current="page">Home</a>
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Notes</a>
  <a href="#">Contact</a>
</nav>

import { BlobNav } from "./motion/react/BlobNav";

<BlobNav>Your content</BlobNav>

<script setup lang="ts">
import BlobNav from "./motion/vue/BlobNav.vue";
</script>

<template>
  <BlobNav>Your content</BlobNav>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "blob-nav";

The wrappers: BlobNav.tsx (React, TypeScript) and BlobNav.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-particles`	`12`	how many drops burst from the link you pick
`data-motion-spread`	`70`	how far the drops fly
`data-motion-duration`	`700`	how long the burst lasts

- It stays a nav landmark of ordinary links: Tab reaches each, Enter follows it (and plays the burst, as a click does). - aria-current="page" marks the active link; the pill, the drops and the filter sit in one layer hidden from screen readers and from the pointer. - The active label switches to the page's own color on the pill, so it keeps the page's contrast in light and dark. - Reduced motion moves the pill at once and skips the burst. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

blob-nav.js is 1.9 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.