Gravity Lab
An interface experiment: its own documentation falls, collides and piles up, with gravity you control using two knobs.
What it's for
- It shows that an interface can respond to the body and not just the eyes: text becomes matter with weight, collides and piles up.
- It's a presentation tool for specific moments, like project covers or demos. It isn't for pages meant to be read straight through, which is why it starts off.
- It proves that what gets designed also gets built: the idea, the physics and the control were solved in the same place.
How we built it
- Each letter of the headings and each word of the paragraphs is its own piece. Screen readers read the full text.
- Physics comes from Matter.js 0.19.0, loaded from cdnjs with a pinned version and integrity hash, only when the effect is switched on. Every piece with the data-physics attribute is a rigid body at its real size; the lines too.
- Pieces never move in the layout: only transform. Switching the effect off or pressing Reset puts everything back. The box edges are the walls.
- Two classic radio knobs control gravity and angle. The more gravity, the heavier they feel: the knob follows the finger less and each notch vibrates harder on a phone (Android; iOS doesn't support vibration). The Spin switch decides whether pieces rotate on impact or stack flat.
- If the device asks for less motion, the effect is turned off. The knobs work with a keyboard.
How to implement it
- Wrap the block in GravityLab: it creates the box and the control bar.
- Mark what should fall with data-physics. For text, use Letters or Words; removing the attribute leaves the element out of the effect.
- Tune the feel in the constants of GravityLab (bounce, friction, density and gravity scale) and Knob (resistance and vibration).
- Each piece is a body: with very long texts, apply it to a title or a paragraph only.
Gravity
Angle