MotionPager

Swipeable pages from data: onboarding, carousels and tab panels.

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, MotionPager, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const slides = [
  { id: 'welcome', title: 'Welcome', text: 'Swipe, drag or use the arrow keys.', tone: 'deep' },
  { id: 'data', title: 'Your data', text: 'Pages come from an array.', tone: 'forest' },
  { id: 'flick', title: 'Flick', text: 'A quick flick always turns one page.', tone: 'mint' },
  { id: 'done', title: 'Done', text: 'The index is yours to control.', tone: 'light' },
];

export default function App({ gap = 16, spring = 'default' }) {
  const [page, setPage] = useState(0);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];

  return (
    <div className="stage">
      <MotionPager
        className="pager"
        items={slides}
        index={page}
        onIndexChange={setPage}
        gap={gap}
        transition={transition}
        renderItem={(slide) => (
          <article className={`slide ${slide.tone}`}>
            <h2>{slide.title}</h2>
            <p>{slide.text}</p>
          </article>
        )}
      />
      <div className="controls">
        <button onClick={() => setPage(Math.max(0, page - 1))} disabled={page === 0}>
          Back
        </button>
        <MotionHighlight
          className="dots"
          itemClassName="dot"
          highlightClassName="dot-active"
          items={slides}
          value={slides[page].id}
          transition={transition}
          onValueChange={(key) => setPage(slides.findIndex((slide) => slide.id === key))}
          renderItem={(slide, { index }) => <span className="dot-number">{index + 1}</span>}
        />
        <button
          onClick={() => setPage(Math.min(slides.length - 1, page + 1))}
          disabled={page === slides.length - 1}
        >
          Next
        </button>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.pager {
  border-radius: 20px;
}

.slide {
  display: grid;
  align-content: end;
  gap: 6px;
  height: 240px;
  padding: 24px;
  border-radius: 20px;
  user-select: none;
}

.slide h2 {
  margin: 0;
  font:
    800 30px/1.1 system-ui,
    sans-serif;
}

.slide p {
  margin: 0;
}

.deep {
  background: #0e2e24;
  color: #fff;
}

.forest {
  background: #176b52;
  color: #fff;
}

.mint {
  background: #43c58f;
  color: #0e2e24;
}

.light {
  background: #eaf6f0;
  color: #0e2e24;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.controls > button {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.controls > button:disabled {
  opacity: 0.4;
}

.dots {
  display: flex;
  min-width: 0;
  gap: 4px;
}

/* On a narrow phone the page dots shrink (never below 28px); Back and Next keep their size. */
.dot {
  flex: 0 1 36px;
  min-width: 28px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.dot-number {
  font:
    600 13px system-ui,
    sans-serif;
  color: #5b616b;
}

.dot-active {
  border-radius: 50%;
  background: #eaf6f0;
  box-shadow: inset 0 0 0 2px #176b52;
}

@media (max-width: 340px) {
  .controls {
    gap: 8px;
  }

  .controls > button {
    padding: 0 14px;
  }
}

Shortest usage

Onboarding.jsx

<MotionPager
  items={slides}
  index={page}
  onIndexChange={setPage}
  gap={16}
  renderItem={(slide) => <Slide slide={slide} />}
/>;

What it handles for you

Pages follow swipes and mouse drags, resist past the ends and settle with your release speed.
A flick always turns a page, and one gesture never turns more than one.
Horizontal trackpad scrolling turns pages too, and its momentum tail is ignored.
Arrow keys, Home and End work when the pager is focused, and vertical scrolling keeps working.
Pages other than the active one are inert.

Use it for

An onboarding flow.
A photo carousel.
Swipeable tab panels paired with MotionHighlight.

Props

Prop	Type	Default	Description
`items`	`readonly T[]`	`—`required	Your data array.
`index`	`number`		The page shown. Leave it out to let the pager keep its own.
`defaultIndex`	`number`	`0`	Starting page when `index` is not controlled.
`onIndexChange`	`(index, item) => void`		Runs with the index and item as soon as a swipe, key or wheel gesture settles.
`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, { index, active }) => ReactNode`	`item.label`	Draws a page; receives its index and whether it is active.
`gap`	`number`	`0`	Space between pages in pixels.
`itemClassName`	`string`		Class for each item element; `itemStyle` 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

index can be controlled (onIndexChange(index, item) reports every settle) or left to the pager with defaultIndex.

The same component and props work on React Native.

Used in these examples

Photo feedSwipe through photos, jump with thumbnails, open any photo full screen and pull up its details.MotionPagerMotionHighlightMotionZoomMotionSheet