Gravity Lab

Un experimento de interfaz: su propia documentación cae, choca y se apila con gravedad que se maneja con dos perillas.

Para qué sirve

Muestra que una interfaz puede responder al cuerpo y no solo a los ojos: el texto se vuelve materia con peso, choca y se apila.
Es un recurso de presentación para momentos puntuales, como portadas de proyecto o demostraciones. No sirve para páginas que se leen de corrido, por eso nace apagado.
Prueba que lo que se diseña también se construye: la idea, la física y el control se resolvieron en el mismo lugar.

Cada letra de los títulos y cada palabra de los párrafos es una pieza independiente. Los lectores de pantalla leen el texto completo.
La física la hace Matter.js 0.19.0, cargado desde cdnjs con versión fija y firma de integridad, y solo cuando se enciende el efecto. Cada pieza con el atributo data-physics es un cuerpo rígido con su tamaño real; las líneas también.
Las piezas no cambian de lugar en el diseño: solo se mueven con transform. Al apagar el efecto o pulsar Restablecer, todo vuelve a su sitio. Los bordes de la caja son las paredes.
Dos perillas de radio clásico controlan la gravedad y el ángulo. Cuanta más gravedad, más pesan: la perilla sigue menos al dedo y cada muesca vibra más fuerte en el teléfono (Android; iOS no soporta vibración). El interruptor Giro decide si las piezas rotan al chocar o se apilan planas.
Si el dispositivo pide menos movimiento, el efecto queda desactivado. Las perillas funcionan con teclado.

Envolver el bloque en GravityLab: crea la caja y la barra de controles.
Marcar con data-physics lo que debe caer. Para texto, usar Letters o Words; quitar el atributo deja el elemento fuera del efecto.
Ajustar la sensación en las constantes de GravityLab (rebote, fricción, densidad y escala de la gravedad) y de Knob (resistencia y vibración).
Cada pieza es un cuerpo: con textos muy largos conviene aplicarlo solo a un título o a un párrafo.

Gravedad0.00

Ángulo0°