Web App

Code Playground

Herramienta de aprendizaje personal que documenta y demuestra efectos de animación web. Cada ejemplo incluye un demo interactivo y el código fuente comentado.

Next.js

GSAP

TypeScript

Ver demo ↗Ver código →

El problema

Necesitaba una referencia personal de efectos de animación que pudiera consultar y compartir con clientes para mostrar capacidades.

La solución

Sidebar navegable por tecnología, demos en vivo y syntax highlighting del código. Arquitectura que permite agregar ejemplos en minutos.

Arquitectura técnica

Next.js App Router con rutas por ejemplo

react-syntax-highlighter para mostrar código

GSAP instalado globalmente

Componente ExampleLayout reutilizable

Desafíos y soluciones

ScrollTrigger en iframes

Los ejemplos de scroll dentro del ExampleLayout requerían soluciones alternativas al no tener scroll real.

Syntax highlighting

Configurar react-syntax-highlighter con TypeScript y el tema correcto para ambos modos.

Stack utilizado

Next.js

GSAP

TypeScript

Ver demo en vivo ↗GitHub → Ver todos los proyectos