Proximity list

List items lean out and light up as the pointer passes near them.

enhancer
hover
pointer
navigation
list
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

Proximity list 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 class="m-proximity-list" aria-label="Sections"><ul data-motion="proximity-list">
  <li><a href="#proximity-list">Overview</a></li>
  <li><a href="#proximity-list" aria-current="page">Getting started</a></li>
  <li><a href="#proximity-list">Pointer effects</a></li>
  <li><a href="#proximity-list">Backgrounds</a></li>
  <li><a href="#proximity-list">Text</a></li>
  <li><a href="#proximity-list">Sounds</a></li>
  <li><a href="#proximity-list">Accessibility</a></li>
</ul></nav>

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

<ProximityList>Your content</ProximityList>

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

<template>
  <ProximityList>Your content</ProximityList>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "proximity-list";

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

Options

Attribute	Default	What it does
`data-motion-reach`	`80`	how far, in pixels above and below, the pointer reaches
`data-motion-shift`	`16`	how far the nearest item leans out, in pixels
`data-motion-color`	`#f6a04d`	the tick and highlight color

The lean is a transform and the highlight is paint, so the list never reflows, and the item text keeps its own color and contrast. Keyboard focus inside an item and aria-current hold an item fully lit. Reduced motion: no lean, the light alone shows nearness.

Size

proximity-list.js is 1.2 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.