Componentes de Physics Effects

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

• ClothWave — Tela/bandera simulada con integración de Verlet: una rejilla de puntos unidos por restricciones de distancia (relajación iterativa), fijada por la fila superior, que ondea por gravedad y un viento senoidal variable en el tiempo. El puntero empuja los puntos cercanos. Se dibuja como malla de líneas o como quads rellenos con un gradiente de dos colores y sombreado de pliegues. Canvas 2D con rAF, DPR y ResizeObserver; respeta prefers-reduced-motion (tela colgando estática).
• GravityText — Un titular (por defecto 'UI UX LIBRARY') cuyas letras son cuerpos físicos en un canvas 2D. Ciclo en bucle: la palabra se muestra formada, se sueltan y caen con gravedad rotando y apilándose/rebotando abajo, y luego se re-ensamblan volviendo a su sitio con easing. El puntero empuja las letras cercanas. Física propia (gravedad, suelo, paredes, colisión entre letras) sin dependencias externas. Respeta prefers-reduced-motion mostrando la palabra estática formada.
• BounceIcons — Una fila de fichas circulares de colores vivos, cada una con un glifo dibujado dentro (estrella, corazón, rayo, cruz, anillo), que se dejan caer en cascada y rebotan con gravedad y restitución hasta asentarse en el suelo; tras un breve reposo se re-sueltan en bucle infinito. Física propia (integración por tiempo, colisión elástica con pérdida de energía) sobre Canvas 2D con rAF y DPR. Configurable: número de fichas, gravedad, elasticidad del rebote, paleta y tamaño. Respeta prefers-reduced-motion mostrando la fila estática ya asentada. Solo React, sin dependencias.
• FallingTags — Etiquetas/pastillas con palabras que caen desde arriba con gravedad, rotan, chocan entre sí y se apilan en el suelo como cuerpos rígidos (física de cápsulas resuelta con impulsos y fricción sobre Canvas 2D). Al asentarse todas, tras una pausa se re-sueltan desde arriba en bucle infinito. El puntero empuja las etiquetas al pasar o clicar cerca. Colores vivos sobre fondo oscuro con texto legible dentro de cada pastilla. rAF con DPR y ResizeObserver, limpieza al desmontar. Respeta prefers-reduced-motion mostrando las etiquetas apiladas estáticas. Solo React + Canvas, sin dependencias.
• GravityBalls — Círculos de colores que caen por gravedad, rebotan contra las paredes y colisionan entre sí sobre Canvas 2D hasta apilarse. Se pueden arrastrar y lanzar con el puntero; el bucle se reanima solo. Física propia, sin librerías.