Skip to content
Aristeia
Motion & InteractionHeraclestool

Easing Comparator

Six curves, one scrubbable timeline — see the same motion under different laws instead of arguing about feel.

Built here · no external address

Heracles: Foundational labour. Difficult, necessary technique.

Exhibit case

The study, running. Replay it or drag the timeline by hand.

Arming the exhibit…

Why it matters

Easing debates are usually taste. A comparator makes them measurement: the same scrubber, six functions, a plotted path.

Key techniques

  • Shared useTimeline state driving every curve.
  • SVG polyline sampled from the active function.
  • Roving tabindex across curve chips.

What to steal

The transferable part.

One t, many interpreters. Keep progress in one place; swap only the mapping.

What not to copy

Context-specific or costly.

Do not ship six competing easings in production UI. Pick one house curve and cite it.

Inclusion rationale

The chamber instrument for Hermes — motion that teaches itself.

Technical register

Performance

SVG path rebuilds only when the curve identity changes, not every frame.

Mobile

Range input and large chips; no hover-only affordances.

Accessibility

Reduced motion jumps to t=1. Curve list is a listbox with aria-selected.

Study next

Related entries

HermesWeighted EasingA staggered reveal with its timeline exposed as a scrubbable value, so stagger stops being a feeling and becomes a number.HermesContinuity SwapOne persistent marker interpolated between two authored positions, with a cut mode beside it that shows exactly what continuity buys.HephaestusThe Instanced ForgeFour thousand ingots drawn in a single call, with the draw-call figure published next to the frame time so the cost of the scene is stated rather than implied.HephaestusThe Struck IngotAn object with no vertices — a signed distance field marched per pixel, with the step budget exposed so the exact moment quality is bought back is visible.