UX/UI Ecodiseño

Desarrollado por Yel Martínez · Digital Strategist & Technologist 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. WebAssembly + Web Workers Three.js Verlet integration Open Source · MIT Funciona en móvil LUN MAR MIÉ JUE VIE 1 2 3 4 5 8 9 10 11 12 CORE Física Verlet Engine WASM W WebAssembly Rust → .wasm THREAD Web Workers 60fps 3D Three.js Render DATA localStorage Sin backend Demo interactiva 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. tyel-tearable.netlify.app · física en tiempo real Pantalla completa → Atribución · Open Source 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. Atribución completa y visible 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. Trabajo original 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. Calendario funcional completo Navegación por meses, generación correcta de días incluyendo años bisiestos, celda activa para el día actual. JS vanilla Sistema de notas por día Editor inline con texto libre, emojis y código de color. Persiste en localStorage sin ningún backend. localStorage Galería de 12 fondos fotográficos Imágenes intercambiables aplicadas como textura de la tela. El cambio de fondo no reinicia la simulación física. Three.js Motor físico en hilo separado Rust compilado a .wasm, ejecutado en Web Worker. El hilo principal queda libre para UI — 60fps constantes con mallas de alta resolución. WASM + Worker Responsive con dvh height: 100dvh — funciona correctamente en móvil cuando las barras del sistema aparecen o desaparecen. CSS dvh Arquitectura técnica Stack técnico: cómo está construido ENGINE Verlet Integration Algoritmo de física Posición siguiente calculada desde las dos posiciones anteriores, no desde velocidad acumulada. Estabilidad numérica sin coste extra. COMPILE Rust → WebAssembly Motor compilado El motor de física escrito en Rust se compila a .wasm. Rendimiento nativo en el navegador sin plugins ni instalaciones. CONCURR Web Workers Hilo separado postMessage con SharedArrayBuffer cuando está disponible, fallback a copia de buffer. La física es ciega al DOM por diseño. RENDER Three.js Renderizado 3D Canvas Three.js conviviendo con controles HTML sin conflictos de eventos. El aislamiento en Worker resuelve esto por arquitectura. BUNDLE Vite Bundler + deploy Assets precompilados en /tearable/assets/. Deploy en GitHub Pages + Netlify (headers personalizados para iframe embeds). TEAR Desgarro Mecánica core Cuando la distancia entre dos partículas supera el umbral, la restricción se elimina del grafo. Sin animación: solo física honesta. Por qué existe este experimento Un experimento que salió bien 0 dependencias de UI — vanilla JS, Canvas, localStorage 12 fondos fotográficos intercambiables sin reiniciar la física 60 fps mantenidos con la física corriendo en hilo separado MIT licencia — forkeable, adaptable, con atribución 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. Código fuente y licencia 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.

UX/UI Ecodiseño

T-Yel: Calendario Interactivo
Demo Tearable Inspirado en @pushmatrix · Shopify

Sistema de Diseño Vinilo Música

Sistema de diseño del Proyecto Rafael Solaz

Diseño Prototipo Software Sostenibilidad & IA

Plantilla Buyer Persona Eco IA

UX/UI Ecodiseño

T-Yel: Calendario Interactivo Demo Tearable Inspirado en @pushmatrix · Shopify

Sistema de Diseño Vinilo Música

Sistema de diseño del Proyecto Rafael Solaz

Diseño Prototipo Software Sostenibilidad & IA

Plantilla Buyer Persona Eco IA

T-Yel: Calendario Interactivo
Demo Tearable Inspirado en @pushmatrix · Shopify