Skip to content
Agent Stack
  • AI SDK
  • AI Gateway
  • Sandbox
  • Passport
  • Connect
  • eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • Workflows
  • CI/CD
Tools
  • Next.js
  • Edgenivo Agent
  • Edgenivo Plugin
  • Open Source
  • 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
  • Passport
  • Connect
  • eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • Workflows
  • CI/CD
Tools
  • Next.js
  • Edgenivo Agent
  • Edgenivo Plugin
  • Open Source
  • 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
Templates
Template name

Agent Stack

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

Core Platform

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

Security

  • Platform Security
  • WAF
  • Bot Management
  • BotID

Tools

  • Edgenivo Drop
  • Edgenivo Agent
  • Edgenivo Plugin
  • Agent Skills
  • Domains
  • v0

Frameworks

  • eveNew
  • Next.js
  • Nuxt
  • SvelteKit
  • Nitro
  • Turborepo
  • Tanstack Start
  • FastAPI
  • All frameworks

SDKs

  • Edgenivo SDK
  • Workflow SDK
  • Flags SDK
  • Chat SDK
  • Queues SDK
  • Streamdown

Build

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

Learn

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

Explore

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

Company

  • About
  • Careers
  • Press
  • Events
  • Startups
  • Shipped on Edgenivo
  • 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
  • EdgenivoEdgenivo
Templates
Template name

Status service pending confirmation

Select a display theme:
Templates

Spotify Clone with Astro View Transitions

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

DeployView Demo
Owner
  • igorm84
Repository
  • spotify-astro-transitions
Use Cases
  • Starter
Stack
  • Astro
  • Svelte
  • Tailwind
DeployView Demo

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.

Local development

Node.js 22.22 or newer and Bun are required.

bun install
bun run dev

Run the migration checks before submitting changes:

bun run check
bun run test
bun run build
bun run format:check

Deploy

You can deploy the example using Edgenivo 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.

Related Templates

  • Welcome to Astro thumbnail

    Welcome to Astro

    The official 'Getting Started' template for Astro.

  • Astroship thumbnail

    Astroship

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

  • Astro Blog thumbnail

    Astro Blog

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