Componentes de WebGL Shaders

Componentes de WebGL Shaders listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.

• Kaleidoscope — Un caleidoscopio en canvas 2D: dibuja un patrón fuente animado (blobs con gradientes radiales que se mueven con senos, en modo aditivo) dentro de una cuña angular y lo espeja/repite radialmente en N segmentos (rotación + reflexión en las cuñas impares) para lograr simetría exacta de caleidoscopio, girando lentamente en bucle continuo. El puntero rota y desplaza el patrón fuente. rAF + DPR, limpieza al desmontar. Respeta prefers-reduced-motion mostrando un fotograma simétrico estático. Solo React + Canvas 2D, sin dependencias.
• WaterRipple — Simulación de ondas de agua en canvas 2D: un campo de altura con dos buffers propaga la ecuación de onda discreta con amortiguación y refracta un gradiente vivo, desplazando los píxeles según la pendiente y realzando las crestas con brillo especular. El puntero crea ondas que se expanden y se reflejan en los bordes; sin puntero, gotas periódicas animan el bucle. Respeta prefers-reduced-motion con una onda estática suave. Solo React + Canvas 2D, sin dependencias.