moizuqaili

Play / Lab

Feel the
details.

Real tools I use to tune motion, accessibility and layout. Sound is on, use the speaker icon to mute.

01 · Motion engineering

ζ ratio

0.45

settle

0.63s

overshoot

20%

Spring physics tuner

Real damped spring integration with settle time and overshoot

cubic-bezier(0.16, 1, 0.3, 1)

Easing curve editor

Drag the handles, copy the cubic bezier

02 · Systems and accessibility

Readable?

Body copy at 14px checks the AA rule.

10.89:1

AA text passAA large passAAA text pass

WCAG contrast checker

Relative luminance math, live pass and fail

1.25 major third · 1.333 perfect fourth · 1.618 golden

display 39Aa Product
h1 31Aa Product
h2 25Aa Product
h3 20Aa Product
body 16Aa Product
small 13Aa Product

Modular type scale

Generate a scale from a base size and ratio

Token preview

Token tuner

Live radius, hue and spacing tokens

Layout grid

Columns, gutters and margins

03 · Interaction and feedback

Click the dot as fast as you can.

Fitts law test

Measure your click time live

idle→loading→success→error

Button state machine

Idle, loading, success and error

Spring switch

Squash on press, spring on release

Drag me

Physics card

Drag, fling, snap back

Intensity40

Haptic slider

Stepped ticks with pitch feedback

Counter pop

Pitch rises with every tap

magnet

Magnetic target

Hover to pull