Playable Objects

Playable Objects — Physics Pill Footer

Goal

Build a two-screen page whose second screen is a dark footer where 12 white "pill" tags rain down from above the viewport and pile up under real 2D physics (Matter.js). A GSAP ScrollTrigger with once: true boots the physics engine the first time the footer scrolls into view; every pill is a Matter.js rigid body synced to a DOM element via a requestAnimationFrame loop, and a Matter MouseConstraint lets the user grab, drag and fling the pills in real time. Smooth scrolling via Lenis. The centered footer headline reads "Because why list when you can play?".

Tech

Vanilla HTML/CSS/JS with ES module imports. Use gsap (npm) plus the GSAP plugin ScrollTrigger, lenis for smooth scroll, and matter-js for the physics simulation (import Matter from "matter-js"). Register the plugin with gsap.registerPlugin(ScrollTrigger). No canvas rendering — Matter runs headless and you drive the DOM elements yourself.

Layout / HTML

Two stacked full-viewport sections:

<section class="hero">
  <h1>Scroll down to break the laws of web design</h1>
</section>

<section class="footer">
  <div class="object-container">
    <div class="object"><p>Motionprompts</p></div>
    <div class="object"><p>HTML</p></div>
    <div class="object"><p>CSS</p></div>
    <div class="object"><p>JavaScript</p></div>
    <div class="object"><p>GSAP</p></div>
    <div class="object"><p>ScrollTrigger</p></div>
    <div class="object"><p>Lenis</p></div>
    <div class="object"><p>React</p></div>
    <div class="object"><p>Next.js</p></div>
    <div class="object"><p>WebGL</p></div>
    <div class="object"><p>Three.js</p></div>
    <div class="object"><p>Creative Dev</p></div>
  </div>

  <div class="footer-content">
    <h1>Because why list when you can play?</h1>
  </div>
</section>

<script type="module" src="./script.js"></script>

Key classes the JS depends on: .object-container (the physics world bounds) and .object (one per rigid body). There are 12 pills with those exact tech-tag labels.

Styling

Font — Google Fonts DM Sans (import the full variable range, weights 100..1000). body { font-family: "DM Sans", sans-serif; }.

Reset / global

• * { margin: 0; padding: 0; box-sizing: border-box; }
• h1 { font-size: 4rem; font-weight: 500; letter-spacing: -0.04rem; line-height: 1.2; user-select: none; }
• section { position: relative; width: 100vw; height: 100svh; padding: 2rem; overflow: hidden; }
• .hero h1, .footer h1 { width: 45%; text-align: center; }

Hero — display: flex; justify-content: center; align-items: center; background: #fff; color: #0f0f0f;.

Footer — background-color: #0f0f0f; color: #fff; (near-black on white pills is the whole palette).

.footer-content — position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 2rem; display: flex; justify-content: center; align-items: center; pointer-events: none; with .footer-content * { pointer-events: auto; }. It overlays the physics layer but lets pointer events pass through to the pills.

.object-container — position: absolute; top: 0; left: 0; width: 100%; height: 100%;. Fills the footer; this rect defines the physics walls.

.object — position: absolute; width: max-content; font-size: 2rem; font-weight: 500; background-color: #fff; color: #0f0f0f; padding: 1rem 2rem; border-radius: 50px; cursor: grab; user-select: none; pointer-events: auto; z-index: 2; and .object:active { cursor: grabbing; }. The pills start with no left/top set in CSS — JS positions them every frame.

Responsive @media (max-width: 1000px): h1 { font-size: 2rem; }, .hero h1, .footer h1 { width: 100%; }, .object { font-size: 1rem; }.

GSAP + Matter.js effect (be exact)

Wrap everything in DOMContentLoaded.

1. Lenis smooth scroll wiring

const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

2. Config object (exact values)

const config = {
  gravity: { x: 0, y: 1 },
  restitution: 0.5,
  friction: 0.15,
  frictionAir: 0.02,
  density: 0.002,
  wallThickness: 200,
  mouseStiffness: 0.6,
};

Module-scope state: let engine, runner, mouseConstraint, bodies = [], topWall = null; plus a clamp(val, min, max) helper.

3. ScrollTrigger boot (the GSAP part)

Loop over every section; for the one containing .object-container, create:

ScrollTrigger.create({
  trigger: section,
  start: "top bottom",   // fires as soon as the footer's top touches the viewport bottom
  once: true,            // physics initializes exactly once, ever
  onEnter: () => {
    const container = section.querySelector(".object-container");
    if (container && !engine) initPhysics(container);
  },
});

No scrub, no pin, no tween — the ScrollTrigger is purely a lazy-init trigger. (Keep an animateOnScroll = true flag; if false, fall back to initializing on window load instead.)

4. initPhysics(container)

• engine = Matter.Engine.create(); engine.gravity = config.gravity; solver quality cranked up: engine.constraintIterations = 10; engine.positionIterations = 20; engine.velocityIterations = 16; engine.timing.timeScale = 1;.
• Measure containerRect = container.getBoundingClientRect().
• Three static walls (200px thick rectangles, all isStatic: true), centered just outside the container so their inner faces sit exactly on the container edges — note there is no top wall initially so bodies can fall in:
• floor: center (width/2, height + 100), size (width + 400) × 200
• left wall: center (-100, height/2), size 200 × (height + 400)
• right wall: center (width + 100, height/2), size 200 × (height + 400)
• One rectangle body per .object element. For each (with its measured getBoundingClientRect() size):
• startX = Math.random() * (containerRect.width - objRect.width) + objRect.width / 2 (random, fully inside horizontally)
• startY = -500 - index * 200 (staggered spawn heights far above the container → they fall in one after another)
• startRotation = (Math.random() - 0.5) * Math.PI (random tilt ±90°), applied via Matter.Body.setAngle
• body options: restitution: 0.5, friction: 0.15, frictionAir: 0.02, density: 0.002
• push { body, element, width, height } into bodies and add the body to the world.
• Seal the ceiling after 3 seconds: setTimeout(..., 3000) adds a fourth static wall at center (width/2, -100), size (width + 400) × 200, so once everything has fallen in, flung pills can't escape upward.

5. Mouse dragging (MouseConstraint)

• const mouse = Matter.Mouse.create(container); then remove Matter's wheel hijacking so page scroll keeps working:

mouse.element.removeEventListener("mousewheel", mouse.mousewheel); and same for "DOMMouseScroll".

• mouseConstraint = Matter.MouseConstraint.create(engine, { mouse, constraint: { stiffness: 0.6, render: { visible: false } } }); and disable the context menu: mouseConstraint.mouse.element.oncontextmenu = () => false;.
• startdrag event: remember the body's inertia, then Matter.Body.setInertia(body, Infinity) (no spin while held), setVelocity({x:0,y:0}), setAngularVelocity(0).
• enddrag event: restore the original inertia (|| 1) and clear the dragging refs.
• engine beforeUpdate: while a body is dragged, clamp its position so it can't be pulled outside the container (x between width/2 and containerWidth - width/2, same idea for y), and clamp its velocity components to ±20 — this is what makes "flinging" fast but bounded.
• Release the constraint (set mouseConstraint.constraint.bodyB = null; ...pointB = null;) on both container mouseleave and document mouseup, so a pill is never stuck to a pointer that left.
• Add the mouseConstraint to the world; start the sim with runner = Matter.Runner.create(); Matter.Runner.run(runner, engine);.

6. DOM sync loop

A self-scheduling requestAnimationFrame loop maps each physics body onto its element:

const x = clamp(body.position.x - width / 2, 0, containerRect.width - width);
const y = clamp(body.position.y - height / 2, -height * 3, containerRect.height - height);
element.style.left = x + "px";
element.style.top  = y + "px";
element.style.transform = `rotate(${body.angle}rad)`;

Positions are top-left based (left/top), rotation via transform: rotate(...rad). The y clamp floor of -height * 3 lets pills be visible slightly above the container while falling in, but the render never places them outside the box horizontally.

Assets / images

None. The component is pure typography and CSS — no raster images, no SVG, no 3D models.

Behavior notes

• The pills only ever spawn once (once: true + !engine guard); scrolling away and back does not re-drop them.
• Because the spawn heights are staggered (-500 - index * 200) the 12 pills enter the frame sequentially over ~2–3 seconds, bouncing (restitution 0.5) and settling into a pile.
• Wheel/touch scrolling stays functional over the footer because Matter's mouse wheel listeners are explicitly removed; only click-drag is captured.
• Physics + rAF DOM writes are heavy: desktop-oriented, no reduced-motion guard in the original.
• Container bounds are measured once at init; the sim is not rebuilt on resize.