Skip to content
VercelLogotypeVercelLogotype
LoginSign Up

Spotify Clone with Astro View Transitions

Spotify clone built with Astro View Transitions integration for fluid navigation + TailwindCSS + Svelte.

DeployView Demo

Spotify clone with View Transitions from Astro 3.0

Clone of Spotify with Astro View Transitions is an experimental feature for fluid navigation, this example uses TailwindCSS and Svelte.

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 Transition is a experimental mechanism to transition 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

Known issues

Firefox and iOS Browsers

Unfortunately those browsers aren't compatible yet, see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility

GitHub
Ownerigorm84
Repositoryspotify-astro-transitions
Use Cases
Starter
Stack
Astro
Svelte
Tailwind

Related Templates

Astroship

Starter template for startups, marketing websites & blogs built with Astro and TailwindCSS.
Astroship thumbnail

Welcome to Astro

The official 'Getting Started' template for Astro.
Welcome to Astro thumbnail

Astro Blog

An ultra-minimal personal site & blog built with Astro.
Astro Blog thumbnail

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • eveNew
  • ConnectNew

Core Platform

  • CI/CD
  • Content Delivery
  • Fluid Compute
  • Observability

Security

  • Platform Security
  • WAF
  • Bot Management
  • Bot ID

Tools

  • Vercel DropNew
  • Vercel Agent
  • Vercel PluginNew
  • Agent Skills
  • Next.js
  • Domains
  • v0

Frameworks

  • eveNew
  • Nuxt
  • SvelteKit
  • Nitro
  • Turborepo
  • Tanstack Start
  • FastAPI
  • xmcp
  • All frameworks

SDKs

  • Vercel SDK
  • Workflow SDKNew
  • Flags SDK
  • Chat SDKNew
  • Queues SDKNew
  • Streamdown

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
  • Platform Engineers
  • Design Engineers

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Articles
  • Community

Explore

  • Customers
  • Marketplace
  • Templates
  • Partner Finder
  • Vercel + AWS

Company

  • About
  • Careers
  • Press
  • Events
  • Startups
  • Shipped on Vercel
  • Open Source Program
  • Enterprise
  • Pricing
  • Help

Legal & Trust

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DPA
  • Acceptable Use Policy
  • Legal (all documents)
  • Trust Center
  • Status

Social

  • GitHub
  • X
  • LinkedIn
  • YouTube
  • Instagram
  • VercelVercel
Agent Stack
  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD
Tools
  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Learn
  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base
Build
  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
Explore
  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
EnterprisePricing
Contact
Log InSign Up
Dashboard

Products

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve

Core Platform

  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD

Tools

  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Resources

Learn

  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce

Explore

  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
Enterprise
Pricing
Sign UpLog In
Contact
DeployView Demo

Loading status…

Select a display theme: