Family
Expo-out at one second for anything that moves, with a 0.1s to 0.2s floor for fills, shadows and links.
Tiers
Each curve was read from the browser while visiting family.co. The demo is our own element running the same timing.
panels easing on hover (selector is unnamed: div > div)
Click the track or Replay.
- Timing
- cubic-bezier(0.19, 1, 0.22, 1)
- Duration
- 1s
- Property
- transform
- Seen
- CSS transition, on hover, 65×
- On
- div > div
avatar images, resting transition
Click the track or Replay.
- Timing
- cubic-bezier(0.19, 1, 0.22, 1)
- Duration
- 0.22s
- Property
- transform
- Seen
- CSS transition, in computed style at the end, 42×
- On
- span.sc-iGgWBj.dVSjCO > img
avatar image hover
Click the track or Replay.
- Timing
- ease
- Duration
- 0.18s
- Property
- transform
- Seen
- CSS transition, on hover, 1×
- On
- span.sc-iGgWBj.dVSjCO > img
icon fill on hover
The site animates fill; the demo shows the same timing as movement.
- Timing
- ease
- Duration
- 0.1s
- Property
- fill
- Seen
- CSS transition, on hover, 17×
- On
- svg > path
testimonial marquee
The site animates a keyframe animation (hdKGda); the demo shows the same timing as movement.
- Timing
- linear
- Duration
- 120s
- Property
- hdKGda
- Seen
- CSS animation, on load, 4×
- On
- div.kLosTT > div.Testimonials__RowContainer-sc-1rcs3hw-1.Qwkbu
Honest notes
- Reduced motion
- Not honored
Movement (transform, position, size): 350 events in the normal run, 337 with reduced motion on (96%). All timed CSS and WAAPI motion: 599, then 581 (97%). 0 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 1 time.
transition: all- Used
123 elements computed
transition-property: allat the end of the visit. 2 declarations in the CSS the page loaded. - Motion in JavaScript
- None seen
Scripts include Lottie. 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, 270 transitions move things (transform, opacity) and 94 change surfaces (colour, shadow, background, filter), and 46 elements loop. The glossary's quick test reads that as spatial.
- Coverage
- One load, 14 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.
Family's CSS is styled-components injected into the page, so there were no stylesheet files; the inline sheets were read instead. 123 links compute transition: all (0.2s ease-out), from two `a` rules.
Notes
- The 1s curve is cubic-bezier(0.19, 1, 0.22, 1), the common stand-in for expo-out. It's the same curve the house statement tier uses.
- Avatars carry a 0.22s expo-out at rest but switch to a 0.18s ease while hovered, so the way in and the way out differ.
- Selectors are styled-components hashes; the panel selector is literally div > div.
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 statement curve (expo-out)
cubic-bezier(0.19, 1, 0.22, 1)1sOn 56 elements. Live on 2026-10-17: the same, on 56 elements.
design-taste motion/library/reveal-on-enter/004-family-home.md
2026-09-01 utility floor
ease-out0.2sease-out at 0.2s on 105 elements, ease at 0.1s on 49, ease-in-out at 0.1s on 44.
design-taste motion/library/reveal-on-enter/004-family-home.md
2026-09-01 transition: all
120 elements, the most common transition property on the page. Live: 123.
design-taste motion/library/reveal-on-enter/004-family-home.md
2026-09-01 ambient loops
linear120sTwo loops at 120s linear, probably a marquee. Live: the testimonial marquee.
design-taste motion/library/reveal-on-enter/004-family-home.md
2026-09-01 reduced motion
Ignored, zero blocks. Live: still no query in the CSS, and 96% of movement runs with it on.
design-taste motion/library/reveal-on-enter/004-family-home.md