ui gallery · v1.0
motion & micro-interaction.
the motion library. brand quality lives in the micro-moments — button hover, card float, scroll reveal. each demo is one repeating rule, not a one-off effect.
button hover lift.
hover the primary button — it lifts 1px and gains the card shadow. 240ms with our cubic-bezier ease-out.
primary button
240ms · ease-out
transform: translateY(-1px) + box-shadow: var(--shadow-card)
card hover float.
cards rise 4px, shadow deepens from card → strong, border fades. tinted maroon shadow, never pure black.
hover any card
translateY(-4px) · shadow-strong
card one
hover to lift
card two
shadow deepens
card three
with maroon tint
scroll reveal.
elements fade up 24px on first viewport entry. uses intersection observer · 600ms ease-out · only fires once per element.
she moves different.