taller webexpress

cada plantilla es un solo archivo html con todo dentro, muy comentado. renombrada a index.html, cualquiera se sube a github pages tal cual.

básicos

la web que se explica a sí misma alfabetización: pasa el ratón y cada elemento te dice qué es solo css
cadáver exquisito generador de frases al azar: listas + un botón js mini

galería con ficha técnica retícula de obras + lightbox con el truco :target solo css
archivador de textos deconstruido fichas giradas con filtros por etiqueta js mini
cuaderno local notas sin servidor: localStorage + publicación por commit manual js
dictáfono de notas hablas y la web escribe (web speech api, mejor en chrome) js
poema interactivo palabras que se esconden, tiemblan y confiesan + modo noche solo css
mesa de trabajo moodboard con piezas arrastrables js mini
mesa de trabajo editable la mesa con memoria: añade notas e imágenes, guarda y copia el snapshot js

cartel vivo póster animado: marquesina, tipografía fluida, sello que gira solo css
invitación a un evento tarjeta elegante con animación de llegada y rsvp por mailto solo css
tarjeta de visita tarjeta 3d con dos caras que gira al hacer clic solo css
save the date cuenta atrás en vivo + botón "añadir al calendario" (.ics) js mini

expo horizontal salas en fila, scroll de lado con scroll-snap solo css
expo vertical salas en columna con imán, título que invierte colores, contador css solo css
expo sticky (láminas) las obras se quedan clavadas y el texto pasa por encima solo css
expo túnel bajas en vertical, la sala viaja en horizontal js mini

cuaderno de dibujo pincel: velocidad = tamaño, posición = color p5.js
enjambre de partículas 300 puntitos que te persiguen (y se asustan con el clic) p5.js
escribir con palabras un pincel que suelta las letras de tu frase por el trazo p5.js
espejo mosaico la webcam devuelta en círculos o letras (pide permiso de cámara) p5.js

hydra · visuales en vivo sinte de vídeo con 4 presets y cajita de live coding hydra
tone.js · cajita de música teclas pentatónicas + secuenciador de 8 pasos tone.js
gsap · animación premium título letra a letra, tarjetas al scroll, scrub gsap
css puro · mezclas lámpara de lava, texto difference, galería de filtros solo css
micro-juego estilo bitsy una habitación de texto con gata que habla (el bitsy real: make.bitsy.org) js