materialmeasured

Resend

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

A hero that slides and scales up on 1s to 1.5s ease-in-out, spring-timed fades through the Web Animations API, Tailwind's default curve on every hover, and a rainbow border that never stops turning.

Tiers

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

statement

hero visual scaling up and fading in

ease-in-out

Scrub through the curve

The site animates a keyframe animation (open-scale-up-fade); the demo shows the same timing as movement.

Timing: ease-in-out
Duration: 1.5s
Property: open-scale-up-fade
Seen: CSS animation, on load, 1×
On: div.flex.h-full > div.relative.order-1

secondary

hero text sliding up

ease-in-out

Scrub through the curve

The site animates a keyframe animation (hero-text-slide-up-fade); the demo shows the same timing as movement.

Timing: ease-in-out
Duration: 1s
Property: hero-text-slide-up-fade
Seen: CSS animation, on load, 1×
On: div.flex.h-full > div.origin-center-left.order-2

signature

feature panel fading in on a spring (WAAPI)

linear(0 0%, 0.0089 0.9615384615384616%, 0.0315 1.923076923076923%, 0.0628 2.8846153846153846%, 0.0994 3.8461538461538463%, 0.1389 4.8076923076923075%, 0.1797 5.769230769230769%, 0.2206 6.730769230769231%, 0.2611 7.6923076923076925%, 0.3004 8.653846153846153%, 0.3384 9.615384615384615%, 0.3749 10.576923076923077%, 0.4097 11.538461538461538%, 0.4428 12.5%, 0.4742 13.461538461538462%, 0.504 14.423076923076923%, 0.5323 15.384615384615385%, 0.5589 16.346153846153847%, 0.5841 17.307692307692307%, 0.6079 18.269230769230766%, 0.6303 19.230769230769226%, 0.6515 20.192307692307686%, 0.6715 21.153846153846146%, 0.6903 22.115384615384606%, 0.7081 23.076923076923066%, 0.7249 24.038461538461526%, 0.7406 24.99999999999999%, 0.7555 25.961538461538453%, 0.7696 26.923076923076913%, 0.7828 27.884615384615376%, 0.7953 28.84615384615384%, 0.807 29.8076923076923%, 0.8181 30.769230769230763%, 0.8286 31.730769230769226%, 0.8384 32.692307692307686%, 0.8477 33.653846153846146%, 0.8564 34.615384615384606%, 0.8647 35.576923076923066%, 0.8724 36.538461538461526%, 0.8798 37.499999999999986%, 0.8867 38.461538461538446%, 0.8932 39.423076923076906%, 0.8993 40.384615384615365%, 0.9051 41.346153846153825%, 0.9105 42.307692307692285%, 0.9157 43.269230769230745%, 0.9205 44.230769230769205%, 0.9251 45.192307692307665%, 0.9294 46.153846153846125%, 0.9334 47.115384615384585%, 0.9373 48.076923076923045%, 0.9409 49.038461538461505%, 0.9443 49.999999999999964%, 0.9475 50.961538461538424%, 0.9505 51.923076923076884%, 0.9533 52.884615384615344%, 0.956 53.846153846153804%, 0.9585 54.807692307692264%, 0.9609 55.769230769230724%, 0.9632 56.730769230769184%, 0.9653 57.692307692307644%, 0.9673 58.653846153846104%, 0.9691 59.61538461538456%, 0.9709 60.57692307692302%, 0.9726 61.53846153846148%, 0.9742 62.49999999999994%, 0.9756 63.4615384615384%, 0.977 64.42307692307686%, 0.9784 65.38461538461533%, 0.9796 66.3461538461538%, 0.9808 67.30769230769226%, 0.9819 68.26923076923073%, 0.9829 69.2307692307692%, 0.9839 70.19230769230766%, 0.9848 71.15384615384613%, 0.9857 72.1153846153846%, 0.9865 73.07692307692307%, 0.9873 74.03846153846153%, 0.988 75%, 0.9887 75.96153846153847%, 0.9894 76.92307692307693%, 0.99 77.8846153846154%, 0.9905 78.84615384615387%, 0.9911 79.80769230769234%, 0.9916 80.7692307692308%, 0.9921 81.73076923076925%, 0.9925 82.69230769230772%, 0.993 83.65384615384619%, 0.9934 84.61538461538464%, 0.9938 85.5769230769231%, 0.9941 86.53846153846156%, 0.9944 87.50000000000003%, 0.9948 88.46153846153848%, 0.9951 89.42307692307693%, 0.9954 90.3846153846154%, 0.9956 91.34615384615387%, 0.9959 92.30769230769232%, 0.9961 93.26923076923077%, 0.9963 94.23076923076924%, 0.9965 95.19230769230771%, 1 96.15384615384616%, 1 97.11538461538461%, 1 98.07692307692308%, 1 99.03846153846155%, 1 100%)

Scrub through the curve

Click the track or Replay.

Timing: linear(0 0%, 0.0089 0.9615384615384616%, 0.0315 1.923076923076923%, 0.0628 2.8846153846153846%, 0.0994 3.8461538461538463%, 0.1389 4.8076923076923075%, 0.1797 5.769230769230769%, 0.2206 6.730769230769231%, 0.2611 7.6923076923076925%, 0.3004 8.653846153846153%, 0.3384 9.615384615384615%, 0.3749 10.576923076923077%, 0.4097 11.538461538461538%, 0.4428 12.5%, 0.4742 13.461538461538462%, 0.504 14.423076923076923%, 0.5323 15.384615384615385%, 0.5589 16.346153846153847%, 0.5841 17.307692307692307%, 0.6079 18.269230769230766%, 0.6303 19.230769230769226%, 0.6515 20.192307692307686%, 0.6715 21.153846153846146%, 0.6903 22.115384615384606%, 0.7081 23.076923076923066%, 0.7249 24.038461538461526%, 0.7406 24.99999999999999%, 0.7555 25.961538461538453%, 0.7696 26.923076923076913%, 0.7828 27.884615384615376%, 0.7953 28.84615384615384%, 0.807 29.8076923076923%, 0.8181 30.769230769230763%, 0.8286 31.730769230769226%, 0.8384 32.692307692307686%, 0.8477 33.653846153846146%, 0.8564 34.615384615384606%, 0.8647 35.576923076923066%, 0.8724 36.538461538461526%, 0.8798 37.499999999999986%, 0.8867 38.461538461538446%, 0.8932 39.423076923076906%, 0.8993 40.384615384615365%, 0.9051 41.346153846153825%, 0.9105 42.307692307692285%, 0.9157 43.269230769230745%, 0.9205 44.230769230769205%, 0.9251 45.192307692307665%, 0.9294 46.153846153846125%, 0.9334 47.115384615384585%, 0.9373 48.076923076923045%, 0.9409 49.038461538461505%, 0.9443 49.999999999999964%, 0.9475 50.961538461538424%, 0.9505 51.923076923076884%, 0.9533 52.884615384615344%, 0.956 53.846153846153804%, 0.9585 54.807692307692264%, 0.9609 55.769230769230724%, 0.9632 56.730769230769184%, 0.9653 57.692307692307644%, 0.9673 58.653846153846104%, 0.9691 59.61538461538456%, 0.9709 60.57692307692302%, 0.9726 61.53846153846148%, 0.9742 62.49999999999994%, 0.9756 63.4615384615384%, 0.977 64.42307692307686%, 0.9784 65.38461538461533%, 0.9796 66.3461538461538%, 0.9808 67.30769230769226%, 0.9819 68.26923076923073%, 0.9829 69.2307692307692%, 0.9839 70.19230769230766%, 0.9848 71.15384615384613%, 0.9857 72.1153846153846%, 0.9865 73.07692307692307%, 0.9873 74.03846153846153%, 0.988 75%, 0.9887 75.96153846153847%, 0.9894 76.92307692307693%, 0.99 77.8846153846154%, 0.9905 78.84615384615387%, 0.9911 79.80769230769234%, 0.9916 80.7692307692308%, 0.9921 81.73076923076925%, 0.9925 82.69230769230772%, 0.993 83.65384615384619%, 0.9934 84.61538461538464%, 0.9938 85.5769230769231%, 0.9941 86.53846153846156%, 0.9944 87.50000000000003%, 0.9948 88.46153846153848%, 0.9951 89.42307692307693%, 0.9954 90.3846153846154%, 0.9956 91.34615384615387%, 0.9959 92.30769230769232%, 0.9961 93.26923076923077%, 0.9963 94.23076923076924%, 0.9965 95.19230769230771%, 1 96.15384615384616%, 1 97.11538461538461%, 1 98.07692307692308%, 1 99.03846153846155%, 1 100%)
Duration: 1050ms
Property: opacity
Seen: Web Animations API, on load, 5×
On: div.z-1.relative > div

signature

list rows fading in on a spring (WAAPI)

linear(0 0%, 0.0144 1.5625%, 0.0538 3.125%, 0.1123 4.6875%, 0.1848 6.25%, 0.2668 7.8125%, 0.3542 9.375%, 0.4436 10.9375%, 0.5321 12.5%, 0.6174 14.0625%, 0.6977 15.625%, 0.7716 17.1875%, 0.8384 18.75%, 0.8974 20.3125%, 0.9484 21.875%, 0.9915 23.4375%, 1.0269 25%, 1.0551 26.5625%, 1.0765 28.125%, 1.0918 29.6875%, 1.1018 31.25%, 1.1071 32.8125%, 1.1084 34.375%, 1.1065 35.9375%, 1.1019 37.5%, 1.0953 39.0625%, 1.0873 40.625%, 1.0783 42.1875%, 1.0688 43.75%, 1.0591 45.3125%, 1.0495 46.875%, 1.0404 48.4375%, 1.0317 50%, 1.0238 51.5625%, 1.0167 53.125%, 1.0104 54.6875%, 1.005 56.25%, 1.0004 57.8125%, 0.9967 59.375%, 0.9937 60.9375%, 0.9915 62.5%, 0.9899 64.0625%, 0.9889 65.625%, 0.9883 67.1875%, 0.9882 68.75%, 0.9885 70.3125%, 0.989 71.875%, 0.9898 73.4375%, 0.9906 75%, 0.9916 76.5625%, 0.9927 78.125%, 0.9937 79.6875%, 0.9948 81.25%, 0.9957 82.8125%, 0.9967 84.375%, 0.9975 85.9375%, 0.9983 87.5%, 0.999 89.0625%, 0.9995 90.625%, 1 92.1875%, 1.0004 93.75%, 1.0007 95.3125%, 1 96.875%, 1 98.4375%, 1 100%)

Scrub through the curve

Click the track or Replay.

Timing: linear(0 0%, 0.0144 1.5625%, 0.0538 3.125%, 0.1123 4.6875%, 0.1848 6.25%, 0.2668 7.8125%, 0.3542 9.375%, 0.4436 10.9375%, 0.5321 12.5%, 0.6174 14.0625%, 0.6977 15.625%, 0.7716 17.1875%, 0.8384 18.75%, 0.8974 20.3125%, 0.9484 21.875%, 0.9915 23.4375%, 1.0269 25%, 1.0551 26.5625%, 1.0765 28.125%, 1.0918 29.6875%, 1.1018 31.25%, 1.1071 32.8125%, 1.1084 34.375%, 1.1065 35.9375%, 1.1019 37.5%, 1.0953 39.0625%, 1.0873 40.625%, 1.0783 42.1875%, 1.0688 43.75%, 1.0591 45.3125%, 1.0495 46.875%, 1.0404 48.4375%, 1.0317 50%, 1.0238 51.5625%, 1.0167 53.125%, 1.0104 54.6875%, 1.005 56.25%, 1.0004 57.8125%, 0.9967 59.375%, 0.9937 60.9375%, 0.9915 62.5%, 0.9899 64.0625%, 0.9889 65.625%, 0.9883 67.1875%, 0.9882 68.75%, 0.9885 70.3125%, 0.989 71.875%, 0.9898 73.4375%, 0.9906 75%, 0.9916 76.5625%, 0.9927 78.125%, 0.9937 79.6875%, 0.9948 81.25%, 0.9957 82.8125%, 0.9967 84.375%, 0.9975 85.9375%, 0.9983 87.5%, 0.999 89.0625%, 0.9995 90.625%, 1 92.1875%, 1.0004 93.75%, 1.0007 95.3125%, 1 96.875%, 1 98.4375%, 1 100%)
Duration: 650ms
Property: opacity
Seen: Web Animations API, on load, 7×
On: div.flex.flex-col-reverse > div.mb-2.flex

utility

inline badge border colour

cubic-bezier(0.4, 0, 0.2, 1)

Scrub through the curve

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

Timing: cubic-bezier(0.4, 0, 0.2, 1)
Duration: 0.2s
Property: border-top-color
Seen: CSS transition, when the pointer left, 16×
On: span.inline.text-current > span.inline-flex.h-4

exit

chevron settling back (ease-in)

cubic-bezier(0.4, 0, 1, 1)

Scrub through the curve

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

Timing: cubic-bezier(0.4, 0, 1, 1)
Duration: 0.2s
Property: translate
Seen: CSS transition, when the pointer left, 2×
On: button.flex.items-center > svg.opacity-70.transition-transform

ambient

customer logo marquee

linear

Scrub through the curve

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

Timing: linear
Duration: 180s
Property: scroll-x
Seen: CSS animation, on load, 3×
On: div.flex.flex-row > ul.flex.shrink-0

Honest notes

Reduced motion: Not honored
Movement (transform, position, size): 21 events in the normal run, 19 with reduced motion on (90%). All timed CSS and WAAPI motion: 1438, then 1528 (106%). 9 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 5 times.
transition: all: Used
16 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, 537 transitions move things (transform, opacity) and 1832 change surfaces (colour, shadow, background, filter), and 6 elements loop. The glossary's quick test reads that as material.
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.

transition: all has a cost you can count here. Two parts of the rainbow-border link (its ::after and an inner span) compute transition-property: all, and as its 30s rotation changes a colour, each one restarts a scrollbar-color transition: 545 times apiece in one visit. 16 elements compute all in total. A WebGL canvas in the hero isn't measured.

Notes

The hero's statement is ease-in-out at 1.5s, slow at both ends. Not an aggressive ease-out.
The two spring curves are sampled into linear() with 105 and 65 stops.
Reduced motion left 19 of 21 movement events running.