Bookshop View Transitions con Vite + React

Este post documenta el desarrollo de una demo de tienda de libros centrada en navegación fluida entre listado y detalle usando View Transitions API.

Contexto y objetivo

Quería validar una UX tipo “editorial ecommerce” donde el cambio de pantalla no rompiera continuidad visual.
Objetivo: transición suave entre Home y detalle, sin montar una infraestructura de animación compleja.

Problema que resolvía

En interfaces con cards de producto, el salto “seco” de ruta suele romper percepción de calidad.
La meta era mantener sensación de continuidad al navegar entre páginas, con coste técnico razonable y buen rendimiento.

Decisiones técnicas

1) Vite + React para iteración rápida

Elegido para reducir fricción en desarrollo y asegurar build liviano.

2) React Router para navegación clara

Rutas simples Home/Detail, sin sobrearquitectura.

3) Tailwind para velocidad visual

Permite ajustar jerarquía tipográfica, espaciado y estados UI rápido sin pelear CSS global.

4) View Transitions nativo

Apuesta por API del navegador para transiciones de página con menor complejidad que soluciones custom con timeline completo.

Implementación (resumen)

• Estructura principal: listado de libros + vista detalle.
• UI de card y ficha pensada para continuidad visual.
• Comportamiento responsive en mobile, tablet, desktop y pantallas grandes.
• Dataset mock con metadata de tienda:
  • rating
  • stock
  • formato
  • envío
  • ISBN
  • páginas

Tradeoffs reales

• Ventaja: integración más simple y elegante en navegación.
• Coste: compatibilidad y comportamiento puede variar según navegador/escenario.
• Decisión: priorizar experiencia moderna y mantener fallback funcional sin romper navegación.

Qué funcionó bien

• Fluidez percibida al pasar de card a detalle.
• Mejor lectura visual del contenido en ambos contextos.
• Base sólida para escalar a catálogo más complejo.

Qué ajustaría en siguiente iteración

• Mejorar accesibilidad de foco/teclado en transiciones.
• Añadir pruebas visuales/e2e para garantizar consistencia.
• Afinar microinteracciones y estados de carga en rutas.

Capturas

Demo

https://bookshop-view-transitions-vite.vercel.app/

Scripts

npm install
npm run dev
npm run build
npm run preview
npm run lint