Amber — Scroll & Motion Toolkit

A lightweight motion toolkit
for expressive websites.

For Sam

A laptop. A red handbook.
A place to begin.

Amber V1

AMBER / FOOTPRINT LESS TO CARRY.

Small by design.

0.0 KB

Smooth Scroll + Animation · Minified + gzipped

~ 55% lighter.

Than using separate libraries for scrolling and animation.

Entire toolkit. Under 20 KB.

Scroll, animation, and every plugin. Minified + gzipped.

Add only what
you use. BUILD YOUR BUNDLE ↓

Control ScrollPinParallaxInfinite: ~0.0 KB
Animate Animation Engine: ~0.0 KB
Morph SVG morphing: ~0.0 KB
Total: ~ 0.0 KB

AMBER / COLOPHON

The rest is yours.

Take Amber somewhere I haven’t imagined.

KEEP SCROLLING

AMBER / QUICK REFERENCE

Getting Started

Install

Install the smooth-scroll engine:

npm install amber-scroll

Import

Import the core Amber class:

import Amber from 'amber-scroll';

Create your first instance / setup

Set up a viewport and panel structure in HTML:

<div class="viewport">
  <main data-amber>
    <section>Panel 01</section>
    <section>Panel 02</section>
  </main>
</div>

.viewport { height: 100svh; overflow: auto; }
main[data-amber] { display: flex; flex-direction: column; }
main[data-amber] > section { flex: none; min-height: 100svh; }

Initialize Amber once the DOM is ready:

const amber = new Amber();

One tiny example

Simplest scroll initialization with an update listener:

import Amber from 'amber-scroll';

const amber = new Amber();

amber.on('scroll', ({ progress }) => {
  console.log(`Scroll progress: ${(progress * 100).toFixed(0)}%`);
});

Core concepts

Scroll — Smooth physics-driven 1D & 2D motion with inertia, snapping, and infinite recycling.
Animate — Lightweight timelines, CSS transforms, and direct scroll-scrubbing synchronization.
Morph — Fluid SVG path morphing and vector stroke drawing between shapes.

Next step

Playground Full Documentation

Move ityour way.