react-kenburns-view

May 25, 2026 · View on GitHub

Vite + React app showcasing the react-kenburns-view Ken Burns effect (slow zoom and pan over still images).

Back to react-library-demos.

Prerequisites

This demo links to the library from a local sibling checkout, not only from npm.

  1. Clone react-library-demos.
  2. Clone react-kenburns-view next to it:
side-projects/
├── react-library-demos/
│   └── react-kenburns-view/    ← you are here (this demo)
└── react-kenburns-view/        ← library source (required)

Alternatively, install the published package instead of the local path:

npm install react-kenburns-view

and remove or change the file:../../react-kenburns-view entry in package.json.

Run locally

From this folder (react-library-demos/react-kenburns-view/):

npm install
npm run dev

Open http://localhost:5173.

Build and preview

npm run build
npm run preview

What you'll see

Three landscape images, each in a KenBurnsView with independent zoom/pan timing (duration, zoomStart, zoomEnd, panX, panY). Resize the window to see responsive width handling.

Library docs

Installation, API, and usage: react-kenburns-view README.