Emil Kowalski
A writing homepage that barely moves: Tailwind's default 0.15s colour transition on the email field, and a header that snaps in with a 50ms WAAPI hold. The motion is elsewhere.
The homepage is nearly still on load, scroll and hover. Emil's motion lives in his articles, his course and his libraries (Sonner and Vaul have their own entries), none of which this one-load visit opened.
Tiers
Each curve was read from the browser while visiting emilkowal.ski. The demo is our own element running the same timing.
email field colour
The site animates color; the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.4, 0, 0.2, 1)
- Duration
- 0.15s
- Property
- color
- Seen
- CSS transition, in computed style at the end, 1×
- On
- form.mt-6.flex > input#email
sticky header snapping visible (WAAPI)
Click the track or Replay.
- Timing
- linear(0 0%, 1 25%, 1 50%, 1 75%, 1 100%)
- Duration
- 50ms
- Property
- opacity
- Seen
- Web Animations API, on load, 1×
- On
- div.sticky.left-0
Honest notes
- Reduced motion
- Nothing measured moves
Movement (transform, position, size): 0 events in the normal run, 0 with reduced motion on. All timed CSS and WAAPI motion: 1, then 1 (100%). 3 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 1 time.
transition: all- Not seen
0 elements computed
transition-property: allat the end of the visit. 0 declarations in the CSS the page loaded. - Motion in JavaScript
- Yes
Scripts include Framer Motion / Motion. 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
- material
At rest, 0 transitions move things (transform, opacity) and 6 change surfaces (colour, shadow, background, filter). The glossary's quick test reads that as material.
- Coverage
- One load, 6 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.
Notes
- The header's linear() curve reaches 1 at 25% and holds, so the 50ms fade is really a 12.5ms one.
- One more WAAPI animation had duration auto, which usually means a scroll-driven timeline. It has no fixed duration, so it isn't a tier.
- Posture is a light call from very little evidence: the site is about material motion more than it shows any.