# Physics Word Pile
> Display-type chips that fall, collide, tumble and stack under a real rigid body solver, with drag-and-fling throwing.
Canonical: https://gsapvault.com/effects/physics-word-pile
Live demo: https://gsapvault.com/demos/physics-word-pile/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | Core GSAP only |
| Techniques | physics, collision, draggable, momentum, pointer-effects, micro-interaction |
| Uses Lenis | No |
## Overview
A gravity playground for typography. Words drop into the frame as physical objects, knock each other sideways, tumble and settle into a pile that never lands the same way twice.
Grab any word and it dangles from the exact point you caught it. Fling it and it leaves at the speed of your pointer, squashes against whatever it hits, flashes, and sends a shockwave out from the contact point.
The whole simulation is hand-written on top of GSAP's ticker: no physics library, no WebGL, no canvas. The words stay real HTML you can select, translate and style.
## Features
- Impulse-based rigid body solver with restitution, friction and rotational inertia, written from scratch with no physics library
- Drag any word with a mouse-joint grab that pins to the point you caught it, so chips dangle and swing naturally
- Throw velocity is inherited from the pointer, so a hard flick genuinely fires a word across the stage
- Impact feedback on three channels: squash-and-stretch along the chip, a colour flash, and a shockwave ring scaled by collision impulse
- Fixed 120Hz timestep with an accumulator, so stacking stays stable at any frame rate and on any machine
- Collision shapes are built from each chip's rendered size, so the physics tracks fluid type as it reflows
- Bounds come from the container's padding box, so the walls and floor are positioned entirely in CSS
- Full keyboard support: every word is a button that can be focused and kicked with Enter or Space
## Use Cases
- Hero sections that want a headline visitors can play with rather than read past
- 404, coming-soon and maintenance pages where a toy earns the wait
- Agency and portfolio landing pages needing one memorable interaction above the fold
- Product launches and campaign microsites built around a short, throwable tagline
- Event and conference sites where speaker names or session titles become the objects
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## How It Works
Every chip is approximated as a chain of circles laid along its long axis, which is exactly a capsule and matches a pill-shaped element's real silhouette. That turns collision detection into circle-versus-circle and circle-versus-wall tests, and skips the polygon clipping an SAT solver would need.
Each fixed 1/120s step integrates gravity, gathers contacts, and then runs several passes of sequential impulses over them. Each pass resolves normal restitution and clamped Coulomb friction at the contact point, with torque taken from the offset between the contact and the body's centre; a positional pass then pushes remaining overlap apart without feeding energy back into the stack.
Grabbing applies an impulse at the grab point rather than the centre, which is what makes a held word swing. Rendering is three GSAP quickSetters per body, and the impact squash is tweened on an inner element so the per-frame transform never clobbers it.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add before the closing `` tag:**
```html
```
No GSAP plugins are needed.
**3. Add the markup to your ``:**
```html
```
**4. Optional shake button, anywhere on the page:**
```html
```
### Options
Set on the `[data-word-physics]` container.
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-gravity` | Any number (px/s²) | `2600` | Downward acceleration. Lower feels floaty and moon-like; higher feels dense |
| `data-bounce` | `0` to `1` | `0.28` | Restitution. Above about `0.5` the pile stops settling and keeps jostling |
| `data-friction` | `0` to `1` | `0.42` | Coulomb friction. Low values make words slide off each other rather than stack |
| `data-settle` | Any number, `0` disables | `9` | Strength of the righting torque that turns a slowing word back toward horizontal |
| `data-shockwave` | `true`, `false` | `true` | Whether impacts emit expanding rings |
#### About `data-settle`
Left purely to the physics, a long pill will happily balance on one end against a wall. It is defensible physically and useless for typography: the word ends up unreadable and often clipped out of the frame. `data-settle` adds a damped spring toward the nearest horizontal, faded in as a word slows down, so words rock flat and stay legible. A word still travelling is never touched by it, so throws are unaffected.
Set `data-settle="0"` for pure physics, or raise it above `9` if you want words to lie down faster.
### Accessibility
- **Reduced motion**: under `prefers-reduced-motion: reduce` no simulation runs at all and no listeners are attached. The chips are left in normal document flow as a static, fully legible word group.
- **No JavaScript**: identical to the above. Nothing is hidden by CSS that only JavaScript reveals.
- **Keyboard**: every word is a real `