Bits

Card to Page Transition

A card-to-page transition that smoothly morphs an image on a card into a full page for a seamless, shared-element experience.

Luxury Seaside Villa with Infinity Pool & Ocean Views

January 15, 2024 • 5 min read

Wake up to the sound of waves in this stunning 4-bedroom villa. Featuring an infinity pool, sun terrace, and open-concept living spaces, it's designed for pure relaxation. Just steps from pristine beaches and fine dining.

About this component

Click the card to watch the image and text morph into a full article page. It uses Astro's View Transitions with shared transition:name values, so the browser animates matching elements between routes for a seamless, native-feeling navigation.

When to use

Blog or article cards expanding into full posts
Product grids opening into detail pages
Gallery thumbnails morphing into lightbox or detail views
Any card-to-detail navigation that benefits from spatial continuity

Explore more bits

Warp Overlay Interactive OTP Avatar Stack