Spotify Clone with Astro View Transitions

Spotify clone with Astro 7 View Transitions

A Spotify-inspired interface using Astro's client router and View Transitions for fluid navigation. The example also uses Tailwind CSS and Svelte.

Local development

Node.js 22.12 or newer and Bun are required.

1
bun install
2
bun run dev

Run the migration checks before submitting changes:

1
bun run check
2
bun run build
3
bun run format:check

Deploy

You can deploy the example using Vercel Template or see a live demo

Video

https://github.com/igorm84/spotify-astro-transitions/assets/16727448/1e34f079-1f17-4ff1-9285-1dc406f0c631

About

View Transitions animate between DOM states. Learn more in these links:

• Astro Documentation: https://docs.astro.build/en/guides/view-transitions/
• MDN Documentation: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

Browser support

Native same-document View Transitions are supported in Chrome and Edge 111+, Firefox 144+, Safari and iOS 18+, and corresponding mobile browsers. MDN marks the feature as Baseline 2025.

This project intentionally configures Astro's client router with fallback="none". Older browsers still navigate, but use full-page navigation without animation.