# Words Have Weight

Words Have Weight is an interactive kinetic typography study made with Codex for [Barsky Labs](https://barskylabs.world/).

The experiment asks: what if words could embody gravity in the same way they carry emotional weight? Visitors enter a sentence and watch its individual letters behave as physical material. Falling objects, spraying cream from a can, science-fiction light speed, and Newton’s apple provide the four starting points.

## The experience

The stage is black, with white Helvetica Neue typography. A floating glass input panel holds the sentence field and four motion controls. The default sentence is “Words have weight.” Visitors can enter up to 140 characters, apply their sentence with Enter or the submit button, switch modes, pause, and replay.

### Gravity

Individual letters release in a varied order, fall, rotate, collide, and settle. The viewport bottom and the rounded input panel are physical obstacles, allowing letters to stack above the panel and fall beside it. Glyph-shaped colliders approximate the visible letter ink rather than treating the sentence as a single object.

### Whizz

A continuous stream of letters shoots upward from the input panel, strikes the ceiling, and folds back into coils. The movement borrows from cream or cheese spraying from a pressurized can.

### Warp

A phrase rests inside the dark center of a cone of letters. During acceleration, its letters separate and move toward their nearest tunnel edge. Individual letters follow straight outward paths, grow through perspective, and stretch as speed builds. The final letters catch up without overtaking the letters ahead of them.

During deceleration, the complete phrase appears very small at the center and grows back to its original size. Warp loops continuously, with no fall-out phase. Its lettering extends through the viewport edges.

### Struck

The sentence begins fitted to the input field’s width. An oversized period drops over its center and scatters individual letters. The letters then respond to gravity and collisions with the viewport and input panel. This is a typographic impact study, rather than a water simulation.

## Loops and motion preferences

Gravity, Whizz, and Struck settle, hold briefly, then lift slightly before collapsing offscreen and restarting. Warp keeps its own acceleration, cruise, deceleration, and center-word return cycle.

The page respects `prefers-reduced-motion` by starting paused. Pressing Play explicitly starts the motion. Space toggles playback and R replays when focus is outside the text input, interactive controls, and About pane.

## Implementation

This is a standalone static web experiment using HTML, CSS, JavaScript modules, and Canvas 2D. Matter.js is vendored locally for rigid-body letter physics. Whizz and Warp use custom animation code. No build step or package installation is required to serve the project.

- `index.html`: page structure, controls, About bio, and links.
- `style.css`: typography, responsive layout, and glass surfaces.
- `app.js`: input, mode selection, playback, and animation coordination.
- `gravity.js`, `fountain.js`, `warp.js`, `splash.js`: the four studies.
- `collapse.js`: the shared physical exit used by the falling modes.
- `vendor/`: the locally bundled physics engine and its license.

This document describes the artwork and its current behavior. The interactive page is the primary experience; this Markdown version provides readable context for people and agents.