MotionHighlight

Tabs, segmented controls or navigation from data, with one highlight that travels to the selection.

WebReact NativeSelection and paging

Try it

Preparing the example…

JavaScript is off. The code below is the complete example.

App.jsx

import { useState } from 'react';
import { MotionHighlight, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const sections = [
  { id: 'overview', label: 'Overview', body: 'Totals for the last 30 days.' },
  { id: 'activity', label: 'Activity', body: 'Every change, newest first.' },
  { id: 'members', label: 'Members', body: 'Twelve people can edit this workspace.' },
  { id: 'billing', label: 'Billing', body: 'Next invoice on the 1st.' },
  { id: 'settings', label: 'Settings', body: 'Name, region and danger zone.' },
];

export default function App({ shape = 'pill', hover = true, spring = 'default' }) {
  const [tab, setTab] = useState('activity');
  const current = sections.find((section) => section.id === tab);

  return (
    <div className="stage">
      <MotionHighlight
        items={sections}
        value={tab}
        onValueChange={setTab}
        hover={hover}
        transition={motionTokens.spring[spring]}
        className={`tabs ${shape}`}
        itemClassName="tab"
        highlightClassName="highlight"
        renderItem={(section, { selected }) => (
          <span className={selected ? 'label on' : 'label'}>{section.label}</span>
        )}
      />
      <p className="body">
        <strong>{current.label}</strong> {current.body}
      </p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 44px 20px;
}

/* One row like a real tab bar: on a narrow screen it scrolls sideways instead of wrapping. */
.tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  background: none;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.label {
  color: #5b616b;
  transition: color 0.2s;
}

.label.on {
  color: #0e2e24;
}

.pill {
  padding: 4px;
  border-radius: 999px;
  background: #eaf6f0;
}

.pill .highlight {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.underline {
  border-bottom: 1px solid #cfe8dc;
}

.underline .highlight {
  border-bottom: 3px solid #176b52;
}

.block {
  gap: 6px;
}

.block .highlight {
  border-radius: 10px;
  background: #176b52;
}

.block .label.on {
  color: #fff;
}

.body {
  margin: 0;
  color: #5b616b;
}

.body strong {
  color: #0e2e24;
}

Shortest usage

Tabs.jsx

<MotionHighlight
  items={['Overview', 'Activity', 'Settings']}
  value={tab}
  onValueChange={setTab}
  hover
/>;

What it handles for you

One highlight moves and resizes between items; style it with highlightClassName.
Items come from items, keys from getKey and labels from renderItem.
hover makes it follow the pointer and return to the selection.
Items can wrap onto several rows and the highlight follows them.
Font loading and layout changes are measured again automatically.

Use it for

Page tabs.
A filter bar.
A segmented control in a settings form.

Props

Prop	Type	Default	Description
`items`	`readonly T[]`	`—`required	Your data array.
`value`	`key \| null`	`—`required	Key of the highlighted item; `null` hides the highlight.
`onValueChange`	`(key, item) => void`		Runs with the key and the item when an item is pressed.
`getKey`	`(item) => string \| number`	`item.id`	Returns a unique, stable key for an item. Defaults to `item.id`, or the item itself for strings and numbers.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Draws an item; receives whether it is selected.
`hover`	`boolean`	`false`	Follow the pointer over items and return to `value` on leave (web).
`itemAs`	`element`	`'button'`	The element for each item.
`itemClassName`	`string`		Class for each item element; `itemStyle` sets its inline style.
`highlightClassName`	`string`		Class for the highlight; `highlightStyle` sets its inline style.
`transition`	`Transition`	`spring`	A timing curve `{ duration, easing }` or a spring `{ tempo: 'spring', spring }`. Springs keep their momentum when interrupted.

Other props go to the rendered element, so className, style and event handlers work as usual.

Web and React Native

Each item renders as a button by default (itemAs changes it); pressing it calls onValueChange(key, item).

On React Native items are Pressables; position runs on the native driver and size on a nested view driven by JavaScript.