C22
Galería con arrastre e inercia
Arrastras y la galería sigue moviéndose con física real. El efecto que engancha en las webs de estudio.
Faro Digital · Barcelona
Ocho efectos web y dos plantillas completas, cada uno en su propia página: sin build, sin dependencias, sin librerías externas. Todos han pasado por webs reales en producción.
Cada demo es un solo index.html. En todas: el texto sigue siendo texto
—seleccionable, indexable, accesible— y sin WebGL o con prefers-reduced-motion
siempre queda una versión digna.
C22
Arrastras y la galería sigue moviéndose con física real. El efecto que engancha en las webs de estudio.
C23
Un shader WebGL de fondo y el mensaje viviendo en HTML encima — no dentro del canvas, donde nadie lo leería.
C25
La sección se queda quieta y el contenido avanza dentro al hacer scroll. Se integra en un proyecto sin rehacerlo.
C26
Bajas con la rueda y el contenido avanza en horizontal, sin secuestrar el scroll del navegador.
C27
Tres ilustraciones que se mueven, hechas con SVG del DOM y CSS. Cero JavaScript, peso mínimo.
C28
El vídeo se ve solo dentro de las letras del titular. Doce líneas de CSS, cero JavaScript — y el titular sigue siendo un <h2> que Ctrl+F encuentra.
C29
Un shader que vive sobre una sola imagen, no sobre la página. Sin WebGL o en móvil, queda la imagen intacta con su alt.
C30
Una escena 3D dentro de un recuadro, no en el fondo de la pantalla. WebGL puro en ~190 líneas: sin Three.js, sin los 150 KB que tenía asignados.
Dos puntos de partida completos, no fragmentos: estructura, medición y accesibilidad ya resueltas.
Nivel 1
El punto de partida de cualquier web: estructura semántica, rendimiento y medición desde el primer día. Cubre a la mayoría de proyectos.
Nivel 2
Revelado de texto por líneas, scroll suave, botones magnéticos, cinta infinita y transiciones de página. Movimiento que comunica, no que decora.