Compare Pick any two measured tiers. Both curves are drawn on one scale, and both demos run together, so you can see which arrives first and which settles longer.
Arc: signature, large button lift on hover (0.15s) Arc: utility, section fading in (WAAPI) (300ms) Arc: utility, icon nudge on hover (0.2s) Arc: utility, large button shadow on hover (0.15s) Arc: ambient, logo marquee (78.5225s) Attio: statement, headline arriving out of a blur (WAAPI) (600ms) Attio: secondary, product panels arriving out of a blur (WAAPI) (600ms) Attio: signature, image scale on hover (0.5s) Attio: utility, nav link colour (0.3s) Attio: utility, menu sliding in (0.15s) Attio: exit, card glow shrinking as the pointer leaves (0.2s) basement.studio: signature, number ticker digits rolling (WAAPI spring) (900ms) basement.studio: signature, link blink on hover (0.3s) basement.studio: utility, project overlay fade (0.2s) basement.studio: utility, hover flicker on link backgrounds (0.06s) basement.studio: ambient, diagonal stripe pattern drifting (6s) basement.studio: ambient, project image pulse (1s) Bryce Rambach: statement, project card lifting out of its berth (1.15s) Bryce Rambach: secondary, section rule drawing across (1.3s) Bryce Rambach: secondary, letters rising on scroll (0.9s) Bryce Rambach: signature, nav marker overshoot (0.6s) Bryce Rambach: utility, external link arrow colour (0.3s) Bryce Rambach: exit, card sinking back into its berth (0.6s) Bryce Rambach: ambient, word glint (1.2s) Cuberto: statement, work card preview drift on hover (1.2s) Cuberto: secondary, title line rising out of its mask (0.8s) Cuberto: signature, round button icon overshoot (0.7s) Cuberto: signature, button fill ripple (0.5s) Cuberto: utility, cursor dot resizing over targets (0.3s) darkroom.engineering: secondary, header sliding away and back (0.35s) darkroom.engineering: signature, link arrow nudge on hover (0.3s) darkroom.engineering: utility, view transition on load (browser default timing) (0.25s) darkroom.engineering: utility, nav link colour (0.15s) Emil Kowalski: utility, email field colour (0.15s) Emil Kowalski: utility, sticky header snapping visible (WAAPI) (50ms) Family: statement, panels easing on hover (selector is unnamed: div > div) (1s) Family: signature, avatar images, resting transition (0.22s) Family: utility, avatar image hover (0.18s) Family: utility, icon fill on hover (0.1s) Family: ambient, testimonial marquee (120s) Linear: statement, headline lines blurring up into place (WAAPI) (1000ms) Linear: secondary, product frame background fading up (WAAPI) (1500ms) Linear: signature, agent conversation turn arriving (WAAPI spring) (300ms) Linear: utility, customer card hover filter (0.16s) Linear: ambient, grid loader dot, stepped (3.2s) Linear: ambient, diagram dots popping in (0.42s) Locomotive: secondary, preloader logo appearing (0.9s) Locomotive: signature, project image widening on hover (0.45s) Locomotive: utility, header shifting on hover (0.2s) Locomotive: exit, project image narrowing as the pointer leaves (0.2s) Locomotive: ambient, featured list flash (2s) Motion: statement, text settling in on a spring (WAAPI) (1750ms) Motion: secondary, collection items arriving on a spring (WAAPI) (600ms) Motion: signature, primary button wipe on hover (0.4s) Motion: utility, conversation turn arriving (WAAPI) (240ms) Motion: utility, play button scale on hover (0.16s) Motion: exit, conversation turn leaving (WAAPI) (160ms) Obys Agency: statement, work images sliding in on load (1.6s) Obys Agency: secondary, loading progress bar (3.5s) Obys Agency: secondary, menu underline (0.8s) Obys Agency: signature, hover spring on menu links (WAAPI) (1600ms) Obys Agency: utility, contact button fill (0.6s) Paco Coursey: statement, page text entering, staggered by 0.12s (0.6s) Paco Coursey: utility, link underline colour (0.24s) Rauno Freiberg: secondary, work frames fading in on load (0.35s) Rauno Freiberg: utility, minimap tracker opacity (0.2s) Raycast: statement, API diagram labels settling into place (2s) Raycast: secondary, API diagram panels sliding apart (1.5s) Raycast: secondary, hero copy fading up on load (1s) Raycast: signature, keyboard key glow (0.4s) Raycast: signature, keyboard key press (0.2s) Raycast: utility, card glow on hover (0.3s) Raycast: utility, star field twinkle (0.25s) Raycast: exit, icon stack swap, leaving (WAAPI) (100ms) Resend: statement, hero visual scaling up and fading in (1.5s) Resend: secondary, hero text sliding up (1s) Resend: signature, feature panel fading in on a spring (WAAPI) (1050ms) Resend: signature, list rows fading in on a spring (WAAPI) (650ms) Resend: utility, inline badge border colour (0.2s) Resend: exit, menu closing (0.35s) Resend: exit, chevron settling back (ease-in) (0.2s) Resend: ambient, customer logo marquee (180s) Sonner: statement, toast arriving and stacking (0.4s) Sonner: secondary, toast moving in the stack, longer variant (0.5s) Sonner: utility, toast fading (0.4s) Sonner: utility, code block copy button appearing (0.2s) Stripe: statement, case study card media drifting on hover (0.8s) Stripe: secondary, diagram strokes moving (0.6s) Stripe: signature, headline words rising (WAAPI) (325ms) Stripe: signature, link arrow sliding (0.3s) Stripe: utility, nav link fade (0.24s) Stripe: utility, globe arc labels (0.15s) Stripe: ambient, product graphic sequence (WAAPI, eased per keyframe) (4480ms) Stripe: ambient, developer systems logos swapping (2s) Vaul: statement, drawer sliding up from the bottom (0.5s) Vaul: secondary, page behind scaling back (0.5s) Vaul: secondary, overlay fading in (0.5s) Vaul: utility, link colour (0.15s) Vaul: exit, drawer sliding back down (0.5s) Vercel: signature, small indicator scaling (resting transition) (0.2s) Vercel: utility, icon chip shadow on hover (0.2s) Vercel: utility, menu item background on hover (0.15s) Vercel: utility, hero canvas fading on scroll (WAAPI) (150ms) Vercel: exit, tooltip leaving (0.1s) Vercel: ambient, logo marquee (40s) Arc: signature, large button lift on hover (0.15s) Arc: utility, section fading in (WAAPI) (300ms) Arc: utility, icon nudge on hover (0.2s) Arc: utility, large button shadow on hover (0.15s) Arc: ambient, logo marquee (78.5225s) Attio: statement, headline arriving out of a blur (WAAPI) (600ms) Attio: secondary, product panels arriving out of a blur (WAAPI) (600ms) Attio: signature, image scale on hover (0.5s) Attio: utility, nav link colour (0.3s) Attio: utility, menu sliding in (0.15s) Attio: exit, card glow shrinking as the pointer leaves (0.2s) basement.studio: signature, number ticker digits rolling (WAAPI spring) (900ms) basement.studio: signature, link blink on hover (0.3s) basement.studio: utility, project overlay fade (0.2s) basement.studio: utility, hover flicker on link backgrounds (0.06s) basement.studio: ambient, diagonal stripe pattern drifting (6s) basement.studio: ambient, project image pulse (1s) Bryce Rambach: statement, project card lifting out of its berth (1.15s) Bryce Rambach: secondary, section rule drawing across (1.3s) Bryce Rambach: secondary, letters rising on scroll (0.9s) Bryce Rambach: signature, nav marker overshoot (0.6s) Bryce Rambach: utility, external link arrow colour (0.3s) Bryce Rambach: exit, card sinking back into its berth (0.6s) Bryce Rambach: ambient, word glint (1.2s) Cuberto: statement, work card preview drift on hover (1.2s) Cuberto: secondary, title line rising out of its mask (0.8s) Cuberto: signature, round button icon overshoot (0.7s) Cuberto: signature, button fill ripple (0.5s) Cuberto: utility, cursor dot resizing over targets (0.3s) darkroom.engineering: secondary, header sliding away and back (0.35s) darkroom.engineering: signature, link arrow nudge on hover (0.3s) darkroom.engineering: utility, view transition on load (browser default timing) (0.25s) darkroom.engineering: utility, nav link colour (0.15s) Emil Kowalski: utility, email field colour (0.15s) Emil Kowalski: utility, sticky header snapping visible (WAAPI) (50ms) Family: statement, panels easing on hover (selector is unnamed: div > div) (1s) Family: signature, avatar images, resting transition (0.22s) Family: utility, avatar image hover (0.18s) Family: utility, icon fill on hover (0.1s) Family: ambient, testimonial marquee (120s) Linear: statement, headline lines blurring up into place (WAAPI) (1000ms) Linear: secondary, product frame background fading up (WAAPI) (1500ms) Linear: signature, agent conversation turn arriving (WAAPI spring) (300ms) Linear: utility, customer card hover filter (0.16s) Linear: ambient, grid loader dot, stepped (3.2s) Linear: ambient, diagram dots popping in (0.42s) Locomotive: secondary, preloader logo appearing (0.9s) Locomotive: signature, project image widening on hover (0.45s) Locomotive: utility, header shifting on hover (0.2s) Locomotive: exit, project image narrowing as the pointer leaves (0.2s) Locomotive: ambient, featured list flash (2s) Motion: statement, text settling in on a spring (WAAPI) (1750ms) Motion: secondary, collection items arriving on a spring (WAAPI) (600ms) Motion: signature, primary button wipe on hover (0.4s) Motion: utility, conversation turn arriving (WAAPI) (240ms) Motion: utility, play button scale on hover (0.16s) Motion: exit, conversation turn leaving (WAAPI) (160ms) Obys Agency: statement, work images sliding in on load (1.6s) Obys Agency: secondary, loading progress bar (3.5s) Obys Agency: secondary, menu underline (0.8s) Obys Agency: signature, hover spring on menu links (WAAPI) (1600ms) Obys Agency: utility, contact button fill (0.6s) Paco Coursey: statement, page text entering, staggered by 0.12s (0.6s) Paco Coursey: utility, link underline colour (0.24s) Rauno Freiberg: secondary, work frames fading in on load (0.35s) Rauno Freiberg: utility, minimap tracker opacity (0.2s) Raycast: statement, API diagram labels settling into place (2s) Raycast: secondary, API diagram panels sliding apart (1.5s) Raycast: secondary, hero copy fading up on load (1s) Raycast: signature, keyboard key glow (0.4s) Raycast: signature, keyboard key press (0.2s) Raycast: utility, card glow on hover (0.3s) Raycast: utility, star field twinkle (0.25s) Raycast: exit, icon stack swap, leaving (WAAPI) (100ms) Resend: statement, hero visual scaling up and fading in (1.5s) Resend: secondary, hero text sliding up (1s) Resend: signature, feature panel fading in on a spring (WAAPI) (1050ms) Resend: signature, list rows fading in on a spring (WAAPI) (650ms) Resend: utility, inline badge border colour (0.2s) Resend: exit, menu closing (0.35s) Resend: exit, chevron settling back (ease-in) (0.2s) Resend: ambient, customer logo marquee (180s) Sonner: statement, toast arriving and stacking (0.4s) Sonner: secondary, toast moving in the stack, longer variant (0.5s) Sonner: utility, toast fading (0.4s) Sonner: utility, code block copy button appearing (0.2s) Stripe: statement, case study card media drifting on hover (0.8s) Stripe: secondary, diagram strokes moving (0.6s) Stripe: signature, headline words rising (WAAPI) (325ms) Stripe: signature, link arrow sliding (0.3s) Stripe: utility, nav link fade (0.24s) Stripe: utility, globe arc labels (0.15s) Stripe: ambient, product graphic sequence (WAAPI, eased per keyframe) (4480ms) Stripe: ambient, developer systems logos swapping (2s) Vaul: statement, drawer sliding up from the bottom (0.5s) Vaul: secondary, page behind scaling back (0.5s) Vaul: secondary, overlay fading in (0.5s) Vaul: utility, link colour (0.15s) Vaul: exit, drawer sliding back down (0.5s) Vercel: signature, small indicator scaling (resting transition) (0.2s) Vercel: utility, icon chip shadow on hover (0.2s) Vercel: utility, menu item background on hover (0.15s) Vercel: utility, hero canvas fading on scroll (WAAPI) (150ms) Vercel: exit, tooltip leaving (0.1s) Vercel: ambient, logo marquee (40s)
Time runs left to right on each curve's own duration; progress bottom to top. Dashed lines mark 0 and 1 when a curve overshoots.
Timing
Duration
At 25% of the time Copy transition
Timing
Duration
At 25% of the time Copy transition
Play both Slow-mo 10% Scrub both curves
Both play on a shared clock, so the shorter one finishes first.