Find your kind of smooth.

Settings

Orientation

Vertical Horizontal Both

Feeling

Damping 0.090

Wheel sensitivity 0.55

Snapping

Infinite loop Pin navigation

Parallax speed 0.70×

make
it feel.

A little perspective.

Notes on motion.

Less, but better.

Keep what matters.
Let the rest fall away.

Room to breathe.

A little space makes
all the difference.

Find a rhythm.

Something that moves
the way you do.

Keep going.

One moment flows
into the next.

and
again.

Position 0.0Velocity 0.000

View code

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

Back to story Full Documentation