Collapse

Field notes

A studio home page with one button it asks you not to press. Press it and every word, card and link falls to the floor in a heap you can grab and throw, until one click flies it all back into place. Real DOM moved by Matter.js, no canvas.

• Pointer interaction
• Light theme
• Portfolio

Collapse is the one-screen home page of Oddfall, a fictional design studio in Lisbon: a nav, a big headline that promises "websites that hold together", three work cards, a short line about the studio and two buttons. One of them pulses orange and says "Don't press." Pressing it blasts every piece of the page away from the button, and they tumble to the bottom of the screen and pile up. Any piece can be picked up and thrown, links still open when clicked, and an "Okay, fine. Rebuild" pill (or Esc) flies everything home.

Until someone moves the mouse, touches the page or presses a key, it plays its own 10-second tour: a cursor presses the button, grabs the word "together.", flings it across the room and rebuilds the page. The studio name, copy, work and button labels live in one file. On phones the nav, the third card and the lede step aside so the page still fits one screen, and anyone who prefers reduced motion gets a quick fade to a pile that stays still until they drag it.

How it's built

• The page is ordinary HTML. Every element marked data-piece gets one Matter.js rigid body sized from its box, and each frame writes only a translate and rotate from its home position, so layout, text selection, links and screen readers are left alone. The boxes are measured after the fonts load, and hidden elements get no body.
• The demo tour is a pure function of time. The sim runs at a fixed 120 Hz step from the press, replays from the press whenever time goes backwards, and gets its spin from a seeded random generator, so the recorder can visit any frame and frame 0 matches frame 10 pixel for pixel.
• The throw is scripted on the same steps: at 4.2 s a soft spring grabs the accent word, drags it along a path, and lets go at 5.2 s while it is still moving fast, so the word flies on its own momentum.
• The rebuild eases every piece from where it lies to home with a small overshoot, staggered by 35 ms or less so the last one lands by 9.6 s. A piece at home gets no transform at all, since even a zero one renders a pixel differently.
• Less than 6 px of movement between press and release is a click, anything more is a drag, and the browser's own link drag-and-drop is blocked so it can't steal the pointer mid-throw.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

collapse-studio/
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ config.ts
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ Ghost.tsx
   │  └─ Page.tsx
   └─ lib/
      ├─ dom.ts
      ├─ loop.ts
      ├─ motion.ts
      ├─ physics.ts
      ├─ sim.ts
      ├─ time.ts
      └─ timeline.ts

Recut it

• Rename the studio and rewrite the copysrc/config.ts → STUDIO / HEADLINE / ACCENT / LEDE
• Swap the worksrc/config.ts → CARDS
• Relabel the buttonssrc/config.ts → PRESS_LABEL / REBUILD_LABEL / CTA
• Change the colours and fontssrc/index.css + index.html → @theme / Google Fonts link
• Make the fall heavier or bounciersrc/lib/physics.ts → gravity.y / restitution / blast()
• Retime the demo toursrc/lib/timeline.ts → PRESS / GRAB / RELEASE / REBUILD / HOME_BY