materialmeasured

Raycast

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

Keys that press and glow on a quint-out curve, diagrams that settle over two seconds on quart-out, and a dense floor of 0.25s to 0.3s ease fades underneath.

Tiers

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

statement

API diagram labels settling into place

cubic-bezier(0.165, 0.84, 0.44, 1)

Scrub through the curve

Click the track or Replay.

Timing: cubic-bezier(0.165, 0.84, 0.44, 1)
Duration: 2s
Property: transform
Seen: CSS transition, while scrolling, 1×
On: svg > g.ApiFig1-module__Ijg2gW__selectedItem.ApiFig1-module__Ijg2gW__label

secondary

API diagram panels sliding apart

cubic-bezier(0.165, 0.84, 0.44, 1)

Scrub through the curve

Click the track or Replay.

Timing: cubic-bezier(0.165, 0.84, 0.44, 1)
Duration: 1.5s
Property: transform
Seen: CSS transition, while scrolling, 1×
On: svg > g.ApiFig1-module__Ijg2gW__top.ApiFig1-module__Ijg2gW__topActive

secondary

hero copy fading up on load

ease

Scrub through the curve

The site animates a keyframe animation (page-module__H3BVAa__fade-in-up); the demo shows the same timing as movement.

Timing: ease
Duration: 1s
Property: page-module__H3BVAa__fade-in-up
Seen: CSS animation, on load, 1×
On: div.page-module__H3BVAa__hero > div.page-module__H3BVAa__heroText.page-module__H3BVAa__fadeInUp

signature

keyboard key glow

cubic-bezier(0.23, 1, 0.32, 1)

Scrub through the curve

Click the track or Replay.

Timing: cubic-bezier(0.23, 1, 0.32, 1)
Duration: 0.4s
Property: opacity
Seen: CSS transition, when the pointer left, 4×
On: div.index-module__h8MSgW__keyboardRow > div.index-module__h8MSgW__key

signature

keyboard key press

cubic-bezier(0.23, 1, 0.32, 1)

Scrub through the curve

Click the track or Replay.

Timing: cubic-bezier(0.23, 1, 0.32, 1)
Duration: 0.2s
Property: transform
Seen: CSS transition, on hover, 3×
On: div > div.index-module__h8MSgW__key.index-module__h8MSgW__pressed

utility

card glow on hover

ease

Scrub through the curve

Click the track or Replay.

Timing: ease
Duration: 0.3s
Property: opacity
Seen: CSS transition, on hover, 3×
On: a.index-module__pFn2Lq__link > div.index-module__pFn2Lq__card::after

utility

star field twinkle

ease

Scrub through the curve

Click the track or Replay.

Timing: ease
Duration: 0.25s
Property: opacity
Seen: CSS transition, on hover, 79×
On: div.index-module__utU0aa__top > div.index-module__utU0aa__star::after

exit

icon stack swap, leaving (WAAPI)

ease-out

Scrub through the curve

Click the track or Replay.

Timing: ease-out
Duration: 100ms
Property: opacity
Seen: Web Animations API, when the pointer left, 2×
On: span.styles-module__lSQKOG__iconStack > span.styles-module__lSQKOG__iconStackItem

Honest notes

Reduced motion: Not honored
Movement (transform, position, size): 84 events in the normal run, 80 with reduced motion on (95%). All timed CSS and WAAPI motion: 1153, then 1248 (108%). 12 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 1 time.
transition: all: Used
149 elements computed transition-property: all at the end of the visit. 0 declarations in the CSS the page loaded.
Motion in JavaScript: Yes
Scripts include Framer Motion / Motion, three.js. Motion run on requestAnimationFrame isn't readable from styles, so it isn't in the tiers.
Canvas: Motion lives in canvas
A WebGL canvas covers at least a quarter of the viewport. What it draws is out of scope here.
Posture: material
At rest, 905 transitions move things (transform, opacity) and 831 change surfaces (colour, shadow, background, filter), and 5 elements loop. The glossary's quick test reads that as spatial. The entry says otherwise because the tell counts what sits at rest, not what moved during the visit.
Coverage: One load, 30 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.

The hero is a WebGL canvas; its motion isn't in these numbers. 149 elements compute transition-property: all at the end of the visit: unnamed divs (69), API diagram SVG paths (44) and nav links (31) among them.

Notes

The two long curves are the usual cubic-bezier stand-ins for quart-out (0.165, 0.84, 0.44, 1) and quint-out (0.23, 1, 0.32, 1).
The star field's 0.25s ease fades fired 949 times in one visit, out of 1,153 timed motion events in total.
The icon stack swap runs through the Web Animations API, not CSS, at 100ms leaving and 240ms arriving.

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 (quint-out) cubic-bezier(0.23, 1, 0.32, 1) 0.4s
On 81 elements, the long tier of 90 at 0.4s and above. Live on 2026-10-17: the same curve at 0.4s on the keyboard keys. The live statement here is the 2s quart-out on the API diagrams, which the note didn't list.
design-taste motion/library/micro-feedback/002-raycast-home.md
2026-09-01 utility floor ease 0.3s
Plain ease at 0.3s on 49 elements and 0.2s on 34. Live: still there.
design-taste motion/library/micro-feedback/002-raycast-home.md
2026-09-01 reduced motion
Honoured: two prefers-reduced-motion blocks across 12 stylesheets. Live on 2026-10-17: 12 queries across 31 stylesheets, but 80 of 84 movement events still ran with reduced motion on. The note counted blocks; this run measured motion. They disagree.
design-taste motion/library/micro-feedback/002-raycast-home.md