KINESIS

A field guide to the scroll-narrative

Most pages are read. This one is travelled.

Scroll is the only verb every visitor already knows. Treated as a timeline instead of a chore, it becomes narrative. KINESIS is a working demonstration — every technique below is performed while it is named.

06 techniques 1 thesis 0 frameworks
begin

01 — The Glide

Give the scroll weight.

Native scrolling is instantaneous — it snaps, pixel-for-pixel, to the wheel. A smoothing layer (here, Lenis) interpolates toward the target each frame, so the page carries momentum. It now feels like a physical object you set in motion, not a list you nudge.

The marker below is driven straight from your scroll position; the disc eases toward it. That gap — that lag — is the entire feeling.

target = scroll follower = eased

02 — The Type

Type at architectural scale.

One word, sized in viewport units and let run past the edges, stops being text and becomes structure. Scale is the loudest signal of hierarchy we have — louder than colour, louder than weight. Spend it on one idea per view.

font-size: clamp(3rem, 18vw, 22rem) — fluid between a floor and a ceiling, so it is enormous on a wall and still legible in a hand.

Negative space is not empty — it is the silence that makes the note land.

03 — The Reveal

Withhold, then grant.

Content that arrives all at once is a wall. Content that assembles as it enters the frame has rhythm — the eye is led, line by line, at a tempo you set. A staggered delay turns a paragraph into a sentence spoken aloud.

  1. 01 the eye enters the frame
  2. 02 a line resolves from below
  3. 03 a beat of stillness — 70ms
  4. 04 the next follows, and the next
  5. 05 attention becomes a tempo

04 — The Turn

Turn the scroll sideways.

Pin a tall section and map its vertical progress onto horizontal travel. The reader keeps doing the one gesture they know, and the world moves in an axis they didn't expect. It is the single most cinematic move in the kit — perfect for sequences, timelines, and reveals that want a held breath.

  1. 01

    The Glide

    momentum as mood

  2. 02

    The Type

    scale as hierarchy

  3. 03

    The Reveal

    tempo as attention

  4. 04

    The Turn

    axis as surprise

  5. 05

    The Contrast

    polarity as rhythm

  6. 06

    The Depth

    parallax as space

05 — The Contrast

Invert to punctuate.

A page in one register goes numb. Flip the polarity at a threshold — dark to light, light to dark — and the change itself becomes a beat, a chapter break the body feels. The discipline that makes it work: hold a single accent across both states, so the colour reads as a voice, not a paint set.

one accent, both worlds

06 — The Depth

Move planes at different speeds.

The brain reads anything that moves slower as further away. Offset a few layers against the scroll and a flat page gains a third dimension — the aurora drifts behind, a label floats in front. Depth is generous in small doses and nauseating in large ones; the craft is knowing where to stop.

07 — The Register

The architecture is neutral. You compose the feeling.

Every technique above is a dial, not a destination. The same six dials, turned two ways, build two opposite emotions. Disorient on purpose and you get a maze — a luxury dream that wants you a little lost. Slow everything and open the space and you get a breath — a calm that wants you to stay. Pick the feeling first; the values follow.

easing / lerp
0.12 — quick, restless
reveal stagger
30ms — things rush in
contrast
hard — abrupt cuts
density
crowded — edges cropped
palette
hot accent on black
feeling
a luxury you get lost in

You can now read a scroll as sheet music.

  1. 01 Glide — momentum tunes mood before a word is read.
  2. 02 Type — scale is the loudest hierarchy you can spend.
  3. 03 Reveal — a stagger turns a paragraph into a tempo.
  4. 04 Turn — vertical input, horizontal world: held breath.
  5. 05 Contrast — flip polarity to punctuate; hold one accent.
  6. 06 Depth — offset planes for space; stop before nausea.
  7. 07 Register — the kit is neutral; you compose the feeling.

Built with

Plain HTML, CSS & JavaScript. One vendored dependency — Lenis, for the glide. No framework, no build step. Every motion rides transform and opacity.

Made to read

Honours prefers-reduced-motion: the telemetry still names each technique, but the page holds still and stays fully legible. Real landmarks, focus rings, a skip link.

Field notes

Architecture after a teardown of Somni; register after a study of Megumi. A guide to reading — and composing — the scroll.