Un calendario con física de tela que se puede desgarrar
Experimento técnico sobre Verlet integration, WebAssembly y Three.js. Basado en el Tearable demo de @pushmatrix (Shopify). La capa de calendario, notas y galería de fondos es trabajo original.
Pruébalo — interactúa con la tela
Arrastra sobre la tela para deformarla. Haz clic rápido para rasgarla. Cambia mes, fondo y añade notas a cada día desde los controles inferiores.
La base: el Tearable de @pushmatrix (Shopify)
El motor de física de tela es el experimento Tearable de @pushmatrix, publicado por un desarrollador de Shopify. Verlet integration, grafo de restricciones de distancia, desgarro por umbral. Física honesta, sin shaders ni animaciones forzadas.
El crédito a @pushmatrix está en el README del repositorio, en los comentarios del código, en el post de LinkedIn y aquí. Así es como se construye sobre trabajo ajeno: fuente visible, diferenciación clara de lo que es nuevo.
Qué aporta T-Yel: la capa de calendario
La física de tela es de @pushmatrix. Todo lo siguiente es trabajo original construido encima, sin frameworks, sin librerías de UI.
Navegación por meses, generación correcta de días incluyendo años bisiestos, celda activa para el día actual.
Editor inline con texto libre, emojis y código de color. Persiste en localStorage sin ningún backend.
Imágenes intercambiables aplicadas como textura de la tela. El cambio de fondo no reinicia la simulación física.
Rust compilado a .wasm, ejecutado en Web Worker. El hilo principal queda libre para UI — 60fps constantes con mallas de alta resolución.
dvh
height: 100dvh — funciona correctamente en móvil cuando las barras del sistema aparecen o desaparecen.
Stack técnico: cómo está construido
Posición siguiente calculada desde las dos posiciones anteriores, no desde velocidad acumulada. Estabilidad numérica sin coste extra.
El motor de física escrito en Rust se compila a .wasm. Rendimiento nativo en el navegador sin plugins ni instalaciones.
postMessage con SharedArrayBuffer cuando está disponible, fallback a copia de buffer. La física es ciega al DOM por diseño.
Canvas Three.js conviviendo con controles HTML sin conflictos de eventos. El aislamiento en Worker resuelve esto por arquitectura.
Assets precompilados en /tearable/assets/. Deploy en GitHub Pages + Netlify (headers personalizados para iframe embeds).
Cuando la distancia entre dos partículas supera el umbral, la restricción se elimina del grafo. Sin animación: solo física honesta.
Un experimento que salió bien
La integración de Verlet es contraintuitiva: no acumulas velocidad, calculas la posición siguiente a partir de las dos anteriores. El error de redondeo se cancela solo. Lo que más trabajo dio fue aislar la física del DOM — el Web Worker resuelve eso por arquitectura, no por parche.
github.com/yelmartinezseo/tyel-tear-test — Licencia MIT. Forkeable, adaptable, aplicable a otro contexto con atribución a @pushmatrix (física) y a Yel Martínez / Greentech (capa de calendario) si usas partes significativas de ella.