GR Cup Frontend
Sorteo Publico - Experiencia Cinematica
Frontend publico para el sorteo del GR Cup 2026. Combina una landing con animaciones de scroll frame-by-frame (313 frames desplegados progresivamente), un compositor de video Remotion + HyperFrames y un sistema completo de compra de tickets con Stripe. Construido con React 18, Vite, TypeScript, Tailwind CSS, Three.js, html5-qrcode y jsPDF. Accesible, responsive y preparado para soportar miles de usuarios concurrentes.
Tecnologías utilizadas
Front-end
Tailwind CSS
Responsive DesignDevOps
VPSHerramientas
JotaiFuncionalidades principales
Composicion cinematica con scroll frames
313 frames de un trofeo dibujado a mano desplegados segun el progreso de scroll. Compositor Remotion + HyperFrames que da al sorteo un look de trailer.
Animacion frame-by-frame con FrameAnimator
Preload inteligente de frames, sincronizacion con scroll progress, transiciones suaves entre estados del trofeo.
Detalle de tickets y numeros del sorteo
Listado completo de numeros asignados, comprados y disponibles con busqueda y filtros por participante.
Checkout con Stripe y validacion
Seleccion de cantidad, formulario de datos, validacion con Zod, redireccion a Stripe Checkout y webhook de confirmacion.
Pasarela de pago integrada
Stripe Checkout, soporte para tarjeta, Apple Pay y Google Pay. Comprobante enviado por email y recordatorio en el perfil.
Pantalla de exito con QR del ticket
Codigo QR unico por compra, botones de compartir en redes sociales, descarga de PDF con todos los numeros asignados.
Inscripcion publica al sorteo
Formulario accesible con prefill, validacion de email y telefono, y resumen de compra antes de pagar.
Horarios publicos de la competicion
Calendario por dia, plataforma y categoria. Datos en vivo del backend con cache y revalidacion periodica.
Como llegar al evento
Mapa, direccion, transporte y enlaces a Google Maps / Waze con un solo tap.
Bases legales del concurso
Texto legal completo: bases, requisitos de participacion, fechas, premios, fiscalidad y contacto del organizador.
Galería de imágenes