Motion layer · live demonstration

Pages that hold your attention instead of losing it.

Same HTML. Same copy. Same brand. The only thing added is the layer that decides how things arrive, settle and respond — and it is the difference between a site people scan and a site people explore.

Scroll the demo
Payload
— KB
Libraries
0
Properties animated
transform / opacity

02 — Scroll choreography

Nothing appears. Everything arrives.

Each block rises from a little further away than the one before it, with a short delay between them. The eye follows the sequence instead of trying to read four things at once.

01

Perspective rise

Sections come up from 48px with a 6° rotation on the X axis and a touch of scale. It reads as depth, not as a slide.

data-reveal="rise"
02

Line masking

Headlines are split into lines and wiped upward behind their own clip mask — the classic editorial entrance.

data-reveal="mask"
03

Stagger by group

A parent hands each child an incrementing delay. Add a fifth card and it inherits the rhythm — no code change.

data-stagger="90"
04

Pointer tilt

Hover any of these. The card leans toward the cursor and a soft highlight tracks it. It returns on a spring, not a cut.

data-tilt
motion.js
<section data-reveal="rise" data-delay="0.1">
  <h2 data-reveal="mask">Headline</h2>

  <div data-stagger="90">
    <article data-reveal="rise" data-tilt>…</article>
    <article data-reveal="rise" data-tilt>…</article>
  </div>

  <a class="btn" data-magnet>Get started</a>
</section>

That is the entire integration. No wrappers, no build step.

03 — Opposing slide-in

Two halves that meet
in the middle.

Side-by-side content enters from opposite edges. It is one of the cheapest ways to make a static two-column block feel composed — and it costs two attributes.

  • Markup stays semantic — animation is an attribute, never a wrapper div
  • Any developer can add, retime or remove a reveal without reading the engine
  • Elements are released from observation once revealed — zero ongoing cost
  • Without JavaScript, every element renders at its final state

04 — Parallax depth

Four layers.
Four speeds.

Background elements travel slower than the content in front of them, so the page gains a sense of distance as you scroll. Every layer is moved with a single translate3d inside one shared animation frame — the browser never recalculates layout.

0.08× far 0.12× grid 0.20× mid 0.38× near

05 — Interactive graphic

Move your cursor through it.

An on-page graphic that responds to the pointer — on touch screens it responds to a finger, and if nothing is touching it, it breathes on its own. Drawn to a canvas, capped to the device pixel ratio, and paused the moment it scrolls out of view.

drag · hover · tap

06 — Measured, not claimed

The numbers behind this page.

0 Sustained through the scroll, measured in-page — the badge in the header is live.
0 Kilobytes total, fonts included. Filled in at runtime from the Resource Timing API.
0 Third-party requests. No GSAP, no Lottie, no CDN, no tracking — nothing leaves the domain.
0 Every hover state settles inside 300ms, so interaction always feels immediate.

Buttons that
reach back.

The button below leans toward your cursor before you get there, and lets go with a small overshoot. Pointer-based effects are switched off entirely on touch devices, where they would only cost battery.

Back to the top

Reduced-motion is respected: if a visitor's system asks for less movement, the ambient canvas never starts and every reveal resolves instantly.