Animation & Motion

Motion tokens, micro-feedback, skeleton, View Transitions — Polished interactions.

Card entrance

Cards use @starting-style for opacity + translateY on first paint.

Animated card

This card animates in when the page loads.

Another card

Cards share the same entrance animation.

Button press states

chirpui-btn — hover lift, active press. Respects prefers-reduced-motion.

Modal entrance

Modal panel scales in with @starting-style.

Animated modal

Opens with scale + fade. Native <dialog>.

Dropdown entrance

Dropdown menu animates opacity + translateY when opened.

Open dropdown
Home Animation UI

Skeleton loading

Shimmer placeholder. Respects prefers-reduced-motion.

htmx swap with View Transitions

Click to swap content. Uses hx-swap="innerHTML transition:true".

Modals use view-transition-name: none to avoid duplicate-name errors when multiple dialogs exist.

Click to load content (View Transition)

Reveal on scroll

Content animates in when scrolled into view. Uses Alpine Intersect (x-intersect.once).

Revealed card 1

Scroll down to see this card animate in.

Revealed card 2

Each block reveals when it enters the viewport.

Revealed card 3

Uses reveal_on_scroll from chirpui.

Form error shake

Fields with .chirpui-field--error get a subtle shake.