Drag, tap, filter and flip, effects that respond to real input. Drag the divider below to see an old site become a new one.
Made to be touched.
It animates open/closed by height with a smooth curve, and closes any other open item automatically, one thing in focus at a time.
Yes, it is a native <details> element enhanced with motion, so it works with the keyboard and screen readers even if scripting fails.
Always. With reduced-motion on, it opens instantly with no height animation.
Smooth open/close, auto-closes the others. Try it. .faq-item.
Filter the tiles, the remaining ones glide to their new positions instead of snapping. FLIP.animate().
The governor reads reduced-motion, Save-Data, memory, CPU cores, low-power and battery, then tags the page full, lite or off. Ambient loops and heavy effects switch off automatically on constrained devices.
Capability-aware tiering so the site is ambitious on capable devices and calm on constrained ones.
Drag, touch or arrow-key the divider, the native range input gives free accessibility. .md-compare.
Native scroll-snap with auto-injected arrows & dots, optional autoplay. .md-carousel.
We sketch layout & brand first.
Then the site is built, page by page.
Finally it goes live on managed hosting.
A pill glides under the active tab; panels crossfade. Full ARIA + arrow keys. .md-tabs.
Yes, pure interpolate-size, no JS height maths. This panel tweens open and closed.
The accordion whose height:auto actually animates. details.md-acc.
Dialogs & popovers rise in (and back out) with a fade. .md-pop on <dialog>.
Every effect here earns its place, calm, precise, and tuned to your brand, because motion should carry the message, never bury it.
Applied with restraint, tuned to your brand, and kind to every device, because motion should serve the message.