spatialmeasured

Bryce Rambach

brycerambach.comcaptured 2026-10-17raw file reduced-motion run

One custom ease-out, cubic-bezier(0.2, 0.7, 0.1, 1), carries almost everything from 0.3s to 1.3s. Cards lift out of their berths and sink back on an ease-in, letters rise, and a small overshoot marks the nav.

Tiers

Each curve was read from the browser while visiting brycerambach.com. The demo is our own element running the same timing.

statement

project card lifting out of its berth

cubic-bezier(0.2, 0.7, 0.1, 1)

Scrub through the curve

The site animates translate; the demo shows the same timing as movement.

Timing: cubic-bezier(0.2, 0.7, 0.1, 1)
Duration: 1.15s
Property: translate
Seen: CSS transition, on hover, 2×
On: div.sky-berth.is-up > a.sky-card

secondary

section rule drawing across

cubic-bezier(0.2, 0.7, 0.1, 1)

Scrub through the curve

Click the track or Replay.

Timing: cubic-bezier(0.2, 0.7, 0.1, 1)
Duration: 1.3s
Property: transform
Seen: CSS transition, while scrolling, 3×
On: h2.sky-title > span.sky-rule

secondary

letters rising on scroll

cubic-bezier(0.2, 0.7, 0.1, 1)

Scrub through the curve

The site animates translate; the demo shows the same timing as movement.

Timing: cubic-bezier(0.2, 0.7, 0.1, 1)
Duration: 0.9s
Property: translate
Seen: CSS transition, while scrolling, 3×
On: span > span.sky-ch

signature

nav marker overshoot

cubic-bezier(0.34, 1.5, 0.64, 1)

Scrub through the curve

The site animates scale; the demo shows the same timing as movement.

Timing: cubic-bezier(0.34, 1.5, 0.64, 1)
Duration: 0.6s
Property: scale
Seen: CSS transition, on hover, 1×
On: li > a.sky-head::before

utility

external link arrow colour

cubic-bezier(0.2, 0.7, 0.1, 1)

Scrub through the curve

The site animates color; the demo shows the same timing as movement.

Timing: cubic-bezier(0.2, 0.7, 0.1, 1)
Duration: 0.3s
Property: color
Seen: CSS transition, on hover, 1×
On: li > a.sky-u.sky-ext::after

exit

card sinking back into its berth

cubic-bezier(0.45, 0, 0.75, 0.25)

Scrub through the curve

The site animates translate; the demo shows the same timing as movement.

Timing: cubic-bezier(0.45, 0, 0.75, 0.25)
Duration: 0.6s
Property: translate
Seen: CSS transition, when the pointer left, 3×
On: div.sky-berth > a.sky-card

ambient

word glint

ease-in-out

Scrub through the curve

The site animates a keyframe animation (sky-glint); the demo shows the same timing as movement.

Timing: ease-in-out
Duration: 1.2s
Property: sky-glint
Seen: CSS animation, while scrolling, 3×
On: a.sky-pl.lit-up > span.sky-w.sky-pw

Honest notes

Reduced motion: Honored
Movement (transform, position, size): 121 events in the normal run, 0 with reduced motion on (0%). All timed CSS and WAAPI motion: 293, then 0 (0%). 6 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 6137 times.
transition: all: Not seen
0 elements computed transition-property: all at the end of the visit. 0 declarations in the CSS the page loaded.
Motion in JavaScript: None seen
No motion library fingerprints in the scripts. Motion run on requestAnimationFrame isn't readable from styles, so it isn't in the tiers.
Canvas: No viewport-sized WebGL canvas
Nothing here was hidden in a canvas.
Posture: spatial
At rest, 134 transitions move things (transform, opacity) and 92 change surfaces (colour, shadow, background, filter), and 12 elements loop. The glossary's quick test reads that as spatial.
Coverage: One load, 7 elements hovered
Scrolled to the bottom with the mouse wheel, hovered and left a spread sample of links and buttons. Menus, clicks, forms and other pages weren't visited.

Eleven canvases draw with 2D contexts (no WebGL); whatever they animate isn't in these numbers. Scripts asked matchMedia about reduced motion 6,137 times in one visit, which looks like a check on every animation frame.

Notes

A dedicated ease-in exit: the card rises in 1.15s on ease-out and drops in 0.6s on cubic-bezier(0.45, 0, 0.75, 0.25).
Reduced motion stops everything the tool could see: 293 timed events became 0.
The live build differs from the Oak and Clay build the notes measured; both are listed, with dates.

From notes

Values from Bryce's own notes, kept apart from this measurement and dated as written. Where the live site differs, the note says so.

2026-09-01 Oak and Clay statement (Settle, via Motion) cubic-bezier(0.16, 1, 0.3, 1.35) 0.75s
Measured from source (main @ 3512894), not the browser: the earlier build drove its statement tier from JavaScript, once per element, 0.65s to 1.1s. The live site on 2026-10-17 is the later sky build, on cubic-bezier(0.2, 0.7, 0.1, 1) at 0.9s to 1.3s.
design-taste motion/library/ambient-loop/003-brycerambach-oak-and-clay.md
2026-09-01 Oak and Clay signature (--ease-stamp) cubic-bezier(0.2, 1.4, 0.4, 1) 0.45s
At 0.3s, 0.45s and 0.5s. It became the house signature tier. Live: the overshoot habit survives as cubic-bezier(0.34, 1.5, 0.64, 1) on the nav marker.
design-taste motion/library/ambient-loop/003-brycerambach-oak-and-clay.md
2026-09-01 Oak and Clay ambient loops ease-in-out 21s
14 keyframe sets at 2.6s to 21s, named after behaviour (hare-breath, ear-hello). Live: 12 looping elements, all sky-drift and sky-swell.
design-taste motion/library/ambient-loop/003-brycerambach-oak-and-clay.md
2026-09-01 Oak and Clay reduced motion
Three layers: MotionConfig reducedMotion="user", useReducedMotion in seven components, and a CSS backstop. Live: 121 movement events became 0.
design-taste motion/library/ambient-loop/003-brycerambach-oak-and-clay.md