FOUNDATIONS
Motion
Zajno's eight principles. Applied to every RI web build. Disciplined animation earns emotional weight.
Source: motion.zajno.com
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)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)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-outTransform & 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 morphingMasking
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 stencilDimension
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() + perspectiveParallax
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 layersZoom
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.fovTOOLCHAIN
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