FOUNDATIONS

Motion

Zajno's eight principles. Applied to every RI web build. Disciplined animation earns emotional weight.

Source: motion.zajno.com

01

Easing

Natural acceleration and deceleration. No linear movement — ever. Elements speed up as they depart and slow as they arrive, like physical objects with mass.

RI APPLICATION

Every transition in every RI experience. Scene changes in Douglass, panel reveals in VR Cave Gallery, card appearances in the app.

IMPLEMENTATION

cubic-bezier(0.22, 1, 0.36, 1)
02

Offset & Delay

Staggered timing across related elements. Nothing enters simultaneously. A 40-80ms offset between siblings creates the feeling of coordinated life.

RI APPLICATION

Data plate labels appearing sequentially, knowledge graph nodes expanding, gallery station text fading in station-by-station.

IMPLEMENTATION

transition-delay: calc(var(--i) * 60ms)
03

Fade

Soft opacity transitions. No hard cuts between states. Elements emerge from and dissolve into the void — the black background is the source and destination.

RI APPLICATION

Scene transitions in Douglass (amber → void), VR station narration text, AR scanning UI, content reveals.

IMPLEMENTATION

opacity 400ms ease-out
04

Transform & Morph

Shapes shift between states. Charts morph between types. Faces cross-fade through ages. Text reforms from particles. The object changes — it is not replaced.

RI APPLICATION

Douglass face aging (34→72), Du Bois chart interactions, particle-to-text transitions, Constitution burn-dissolve.

IMPLEMENTATION

transform + clipPath + SVG morphing
05

Masking

Shapes as containers. Content reveals through geometric or organic masks — fire burns through a rectangle, text flows around 3D geometry, images emerge from silhouettes.

RI APPLICATION

pretext.js text flowing around 3D scans, fire burning through Constitution mask, hieroglyphics revealed through erosion mask.

IMPLEMENTATION

clip-path + mask-image + WebGL stencil
06

Dimension

Depth illusion via layering, parallax, and z-axis movement. The screen is not flat — it has rooms. pretext.js 3D layers, knowledge graph nodes floating at different depths.

RI APPLICATION

pretext.js editorial typography, knowledge graph, VR Cave Gallery depth, Paris 1900 Hall spatial layers.

IMPLEMENTATION

transform: translateZ() + perspective
07

Parallax

Multi-layer scrolling. Background moves slower than foreground. Creates spatial depth on 2D surfaces. Every scrollytelling page uses this.

RI APPLICATION

Paris 1900 Wrapped, Du Bois Data Lessons, newsletter pages, RI main site, design thesis page.

IMPLEMENTATION

Lenis smooth scroll + transform layers
08

Zoom

Continuity through magnification. Enter a Du Bois plate by zooming in. Emerge from a knowledge graph node. The transition between scales maintains spatial memory.

RI APPLICATION

Entering a data plate detail view, zooming into Douglass photograph, expanding a knowledge graph cluster.

IMPLEMENTATION

scale() + transform-origin + camera.fov

TOOLCHAIN

+

Lenis

Smooth scrolling on all scrollytelling pages

+

Framer Motion

React component animation (layout, presence, gestures)

+

GSAP

Timeline animation for complex sequences (Douglass scenes)

+

Three.js / R3F

3D animation, particle systems, camera movement

+

Custom GLSL

Fire-text, dissolve transitions, particle field

+

CSS Transitions

UI chrome, hover states, opacity fades