Falling 2D Draggable Pills

A playful “pill pile” where they drop one-by-one into a container, bouncing and colliding with draggable touch-friendly physics.

View Animation Live

Setup Guide

Get the

Falling 2D Draggable Pills

live on your website in just a few clicks

Add External Scripts

Script

Copy

<script src="https://cdn.jsdelivr.net/npm/matter-js@0.20.0/build/matter.min.js"></script>

Copy code

Add custom Javascript to before </body>

Javascript

Copy

<script>
/* =======================================================
  PILL PHYSICS — FRIENDLY/EDITABLE SETTINGS
======================================================= */

/* ---------- Selectors (edit if you rename attributes) ---------- */
const SELECTORS = {
  arena: "[pill-physics]",
  pill:  "[pills]"
};

/* ---------- Drop behavior (most edited) ---------- */
const DROP = {
  staggerMs: 400,     // time between each drop
  spawnAbovePx: 100,  // how far above the arena they spawn (smaller = closer)
  revealLeadMs: 60,   // reveal this many ms before the body is released
  fadeMs: 220         // matches CSS transition duration
};

/* ---------- Arena walls ---------- */
const WALLS = {
  thickness: 80,
  edgePadding: 16
};

/* ---------- Gate (ceiling) behavior ---------- */
const GATE = {
  openExtraPx: 350,     // how high the ceiling starts (keeps it "open")
  closeAfterMs: 900,    // wait after last drop before closing
  closeAnimMs: 500      // how long the ceiling takes to slide down
};

/* ---------- Physics feel ---------- */
const PHYSICS = {
  gravityY: 1,
  pill: {
    restitution: 0.45,
    friction: 0.12,
    frictionAir: 0.02,
    density: 0.002
  },
  ceiling: { // slippery/bouncy so pills don’t hang
    restitution: 0.85,
    friction: 0,
    frictionStatic: 0
  },
  walls: {
    restitution: 0.2,
    friction: 0.2
  }
};

/* ---------- Anti-stick near ceiling ---------- */
const ANTI_STICK = {
  zonePx: 34,        // distance from ceiling underside considered "stuck zone"
  holdMs: 220,       // time in zone before nudging
  nudgeDownVy: 2.6,  // downward velocity nudge
  nudgeSideVx: 0.4   // random sideways to break contact
};

/* ---------- Touch-friendly dragging ---------- */
const DRAG = {
  stiffnessMouse: 0.15,
  dampingMouse:   0.08,
  stiffnessTouch: 0.28,
  dampingTouch:   0.12
};

/* =======================================================
  Implementation
======================================================= */
document.addEventListener("DOMContentLoaded", () => {
  if (!window.Matter) return;

  const arena = document.querySelector(SELECTORS.arena);
  if (!arena) return;

  const pills = Array.from(arena.querySelectorAll(SELECTORS.pill));
  if (!pills.length) return;

  const isTouch =
    ("ontouchstart" in window) ||
    (navigator.maxTouchPoints && navigator.maxTouchPoints > 0);

  // Helpful: keep overscroll contained
  arena.style.overscrollBehavior = "contain";

  // Per-pill reveal helper
  function revealPill(el){
    el.style.opacity = "1";
    el.style.pointerEvents = "auto";
  }

  const {
    Engine, Runner, World, Bodies, Body, Composite,
    Mouse, MouseConstraint, Events
  } = Matter;

  // Engine / world
  const engine = Engine.create();
  const world  = engine.world;
  world.gravity.y = PHYSICS.gravityY;

  const runner = Runner.create();

  function rect(){
    return { w: arena.clientWidth, h: arena.clientHeight };
  }

  // -------------------------------------------------------
  // Walls + movable ceiling gate
  // -------------------------------------------------------
  let ceiling = null, floor = null, leftWall = null, rightWall = null;

  function buildBounds(){
    const { w, h } = rect();
    const t = WALLS.thickness;

    const existing = [];
    if (ceiling) existing.push(ceiling);
    if (floor) existing.push(floor);
    if (leftWall) existing.push(leftWall);
    if (rightWall) existing.push(rightWall);
    if (existing.length) Composite.remove(world, existing);

    const openCeilingY = -(DROP.spawnAbovePx + GATE.openExtraPx);

    ceiling = Bodies.rectangle(w/2, openCeilingY, w + t*2, t, {
      isStatic: true,
      restitution: PHYSICS.ceiling.restitution,
      friction: PHYSICS.ceiling.friction,
      frictionStatic: PHYSICS.ceiling.frictionStatic
    });

    floor = Bodies.rectangle(w/2, h + t/2, w + t*2, t, {
      isStatic: true,
      restitution: PHYSICS.walls.restitution,
      friction: PHYSICS.walls.friction
    });

    leftWall = Bodies.rectangle(-t/2, h/2, t, h + t*2, {
      isStatic: true,
      restitution: PHYSICS.walls.restitution,
      friction: PHYSICS.walls.friction
    });

    rightWall = Bodies.rectangle(w + t/2, h/2, t, h + t*2, {
      isStatic: true,
      restitution: PHYSICS.walls.restitution,
      friction: PHYSICS.walls.friction
    });

    World.add(world, [ceiling, floor, leftWall, rightWall]);
  }

  function closeGate(){
    if (!ceiling) return;

    const { w } = rect();
    const t = WALLS.thickness;

    const startY = ceiling.position.y;
    const endY   = -t/2;

    const start = performance.now();
    function tick(now){
      const p = Math.min(1, (now - start) / GATE.closeAnimMs);
      const y = startY + (endY - startY) * p;
      Body.setPosition(ceiling, { x: w/2, y });
      if (p < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }

  // -------------------------------------------------------
  // Create pill bodies (static until released)
  // -------------------------------------------------------
  const bodies = new Map(); // el -> { body, w, h, stickStart }
  const rand = (min, max) => min + Math.random() * (max - min);

  function createBodiesQueued(){
    const { w } = rect();
    let queueY = -60;

    pills.forEach((el) => {
      const pw = el.offsetWidth;
      const ph = el.offsetHeight;

      const minX = WALLS.edgePadding + pw/2;
      const maxX = w - WALLS.edgePadding - pw/2;
      const x = (maxX > minX) ? rand(minX, maxX) : w/2;

      const body = Bodies.rectangle(x, queueY - ph/2, pw, ph, {
        restitution: PHYSICS.pill.restitution,
        friction: PHYSICS.pill.friction,
        frictionAir: PHYSICS.pill.frictionAir,
        density: PHYSICS.pill.density
      });

      Body.setStatic(body, true);

      bodies.set(el, { body, w: pw, h: ph, stickStart: 0 });
      World.add(world, body);

      queueY -= (ph + 20);
    });
  }

  // If pill content changes size later, this keeps physics in sync
  function replaceBody(el, newW, newH){
    const rec = bodies.get(el);
    if (!rec) return;

    const old = rec.body;
    const pos = { x: old.position.x, y: old.position.y };
    const ang = old.angle;
    const vel = { x: old.velocity.x, y: old.velocity.y };
    const av  = old.angularVelocity;

    Composite.remove(world, old);

    const fresh = Bodies.rectangle(pos.x, pos.y, newW, newH, {
      restitution: old.restitution,
      friction: old.friction,
      frictionAir: old.frictionAir,
      density: old.density
    });

    Body.setAngle(fresh, ang);
    Body.setVelocity(fresh, vel);
    Body.setAngularVelocity(fresh, av);

    rec.body = fresh;
    rec.w = newW;
    rec.h = newH;

    World.add(world, fresh);
  }

  function refreshWorld(){
    buildBounds();
    bodies.forEach((rec, el) => {
      const nw = el.offsetWidth;
      const nh = el.offsetHeight;
      if (Math.abs(nw - rec.w) > 0.5 || Math.abs(nh - rec.h) > 0.5) {
        replaceBody(el, nw, nh);
      }
    });
  }

  // -------------------------------------------------------
  // Render physics -> DOM transforms
  // -------------------------------------------------------
  function renderDOM(){
    bodies.forEach((rec, el) => {
      const b = rec.body;
      const x = b.position.x - rec.w/2;
      const y = b.position.y - rec.h/2;
      el.style.transform = `translate(${x}px, ${y}px) rotate(${b.angle}rad)`;
    });
  }

  // Anti-stick near ceiling
  function antiStick(now){
    if (!ceiling) return;
    const ceilingUnderY = ceiling.position.y + (WALLS.thickness / 2);

    bodies.forEach((rec) => {
      const b = rec.body;
      if (!b || b.isStatic) return;

      const bodyTopY = b.position.y - (rec.h / 2);
      const dist = bodyTopY - ceilingUnderY;
      const inZone = dist < ANTI_STICK.zonePx;

      if (inZone) {
        if (!rec.stickStart) rec.stickStart = now;
        const held = now - rec.stickStart;
        const slow = Math.abs(b.velocity.y) < 0.25;

        if (held > ANTI_STICK.holdMs && slow) {
          Body.setVelocity(b, {
            x: b.velocity.x + (Math.random() - 0.5) * ANTI_STICK.nudgeSideVx,
            y: Math.max(b.velocity.y, ANTI_STICK.nudgeDownVy)
          });
          rec.stickStart = 0;
        }
      } else {
        rec.stickStart = 0;
      }
    });
  }

  Events.on(engine, "afterUpdate", () => {
    renderDOM();
    antiStick(performance.now());
  });

  // -------------------------------------------------------
  // Dragging (mouse + touch)
  // -------------------------------------------------------
  const mouse = Mouse.create(arena);
  const mouseConstraint = MouseConstraint.create(engine, {
    mouse,
    constraint: {
      stiffness: isTouch ? DRAG.stiffnessTouch : DRAG.stiffnessMouse,
      damping:   isTouch ? DRAG.dampingTouch   : DRAG.dampingMouse
    }
  });
  World.add(world, mouseConstraint);

  // Prevent touch scrolling ONLY while dragging a body
  let touchingArena = false;
  arena.addEventListener("pointerdown", () => { touchingArena = true; }, { passive: true });
  window.addEventListener("pointerup",   () => { touchingArena = false; }, { passive: true });

  arena.addEventListener("touchmove", (e) => {
    if (!touchingArena) return;
    const c = mouseConstraint.constraint;
    if (c && c.bodyB) e.preventDefault();
  }, { passive: false });

  // -------------------------------------------------------
  // Drop sequence
  // -------------------------------------------------------
  function dropOneByOneThenClose(){
    const items = pills.slice();

    items.forEach((el, i) => {
      const dropAt   = i * DROP.staggerMs;
      const revealAt = Math.max(0, dropAt - DROP.revealLeadMs);

      setTimeout(() => revealPill(el), revealAt);

      setTimeout(() => {
        const rec = bodies.get(el);
        if (!rec) return;

        const { w } = rect();
        const pw = rec.w;
        const ph = rec.h;

        const minX = WALLS.edgePadding + pw/2;
        const maxX = w - WALLS.edgePadding - pw/2;
        const x = (maxX > minX) ? rand(minX, maxX) : w/2;

        const y = -(DROP.spawnAbovePx + ph/2);

        Body.setPosition(rec.body, { x, y });
        Body.setAngle(rec.body, (Math.random() - 0.5) * 0.35);
        Body.setStatic(rec.body, false);

        // gentler on touch
        const vx = (Math.random() - 0.5) * (isTouch ? 0.7 : 1.0);
        Body.setVelocity(rec.body, { x: vx, y: 0 });
        Body.setAngularVelocity(rec.body, (Math.random() - 0.5) * (isTouch ? 0.035 : 0.05));
      }, dropAt);
    });

    const totalDropTime = (items.length - 1) * DROP.staggerMs;
    setTimeout(() => closeGate(), totalDropTime + GATE.closeAfterMs);
  }

  // -------------------------------------------------------
  // Start when arena is visible + has size
  // -------------------------------------------------------
  function waitForStableSize({ frames = 10, minH = 40 } = {}){
    return new Promise((resolve) => {
      let stable = 0;
      let lw = 0, lh = 0;

      function tick(){
        const { w, h } = rect();
        if (h < minH || w < 40) {
          stable = 0; lw = w; lh = h;
          return requestAnimationFrame(tick);
        }

        const same = Math.abs(w - lw) < 0.5 && Math.abs(h - lh) < 0.5;
        stable = same ? stable + 1 : 0;
        lw = w; lh = h;

        if (stable >= frames) return resolve();
        requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    });
  }

  // Init
  buildBounds();
  createBodiesQueued();
  renderDOM();

  let started = false;
  function start(){
    if (started) return;
    started = true;

    waitForStableSize().then(() => {
      refreshWorld();
      Runner.run(runner, engine);
      dropOneByOneThenClose();
    });
  }

  const io = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        start();
        io.disconnect();
        break;
      }
    }
  }, { threshold: 0.15 });
  io.observe(arena);

  // Resize/orientation changes
  const ro = new ResizeObserver(() => {
    if (!started) return;
    requestAnimationFrame(refreshWorld);
  });
  ro.observe(arena);

  // Debug helpers (optional)
  window.__PILL_PHYSICS__ = { engine, runner, refreshWorld, mouseConstraint, closeGate };
});
</script>

‍

Add custom CSS to inside </head> tag

CSS

Copy

<style>

[pill-physics]{
  position: relative;
  touch-action: pan-y;      /* allow page scrolling on touch devices */
}

/* =======================================================
	PILLS
  - Must be absolute for Matter.js transforms to work on ALL breakpoints.
  - Start hidden; JS reveals each pill right before it falls.
======================================================= */
[pill-physics] [pills]{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;

  will-change: transform;
  transform-origin: center center;

  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  touch-action: none;       /* better dragging */
  opacity: 0;               /* hidden until JS reveals */
  pointer-events: none;     /* JS enables when revealed */
  transition: opacity 220ms ease;
}
</style>

‍

All Done! Your Interaction is now ready to go live

View Animation Live

Mastering the Pill Physics Component

This component leverages Matter.js to transform standard Webflow elements into dynamic, physical objects. Use the guidelines below to calibrate the "drop" feel and ensure your layout remains performant.

Script Customization Options

Adjust these variables within the provided script to change how the physics engine simulates gravity, collisions, and the entry sequence.

Variable	Function	Default	Practical Adjustment Tip
DROP.staggerMs	Delay between each individual pill falling.	400	Lower to 200 for a "heavy rain" effect; increase to 800 for a deliberate reveal.
PHYSICS.gravityY	The strength of downward pull.	1	Set to 0.5 for a "moon-like" floaty feel or 1.5 for rapid, heavy impacts.
PHYSICS.pill.restitution	The bounciness of the pills.	0.45	Value of 0 is a lead thud; 0.9 is extremely bouncy (high energy).
GATE.closeAfterMs	How long to wait before sealing the ceiling.	900	Increase if you have 10+ pills to ensure they all clear the entry zone first.
ANTI_STICK.zonePx	The distance that triggers the "nudge" logic.	34	Increase if large pills are getting wedged against the top boundary.

Webflow Styling Requirements

To ensure Matter.js can calculate dimensions correctly, specific settings must be applied in the Webflow Style Panel for both the Arena and the Pills.

Style Property	Element	Setting	Why it matters
Position	[pill-physics]	Relative	Serves as the coordinate system for all physical bodies.
Height / Min-Height	[pill-physics]	E.g., 600px	The arena must have a defined height or the pills will fall into a zero-pixel void.
Overflow	[pill-physics]	Hidden	Prevents pills from being visible while "queued" above the container.
Position	[pills]	Absolute	Required for the script to move elements freely via XY transforms.
Display	[pills]	Flex / Inline-Block	Ensures the pill wraps tightly around its content for accurate collision sizing.

Critical Usage Rules

Adhering to these technical constraints will prevent the physics engine from glitching or causing layout shifts:

Attribute Accuracy: Ensure the parent container has [pill-physics] and every child intended to drop has [pills]. Spelling is case-sensitive.
No External Transitions: Avoid applying CSS transitions to the transform property on pills. This conflicts with the engine's frame-by-frame updates and causes jitter.
Avoid Top/Left Padding: If the Arena has internal padding, Matter.js may miscalculate the wall boundaries. Use margins on the Arena or wrap it in a spacer div instead.
Font Loading: If your pills contain text, ensure your custom fonts are set to "Display: Swap" to prevent pills from resizing after the physics engine has already measured them.

Pro Tip: For the most realistic interaction, give your pills a border-radius that matches their height. The physics engine uses the bounding box of the element, so rectangular pills behave like blocks, while rounded ones will roll and tumble more naturally.

Install Dependencies

Dependencies

Copy

npm install matter-js
npm install --save-dev @types/matter-js

Copy Figma (Optional)

Copy the Component Code

Create DraggablePills.tsx in your components directory and paste the following code:

Component Code (Next JS 15.2.9)

Copy

/**
 * DraggablePills - Physics-based interactive pill component using Matter.js
 *
 * @example
 * ```tsx
 * // Basic usage
 * <DraggablePills />
 *
 * // Custom pills and config
 * <DraggablePills
 *   pills={["React", "Next.js", "TypeScript"]}
 *   animationConfig={{
 *     staggerMs: 200,
 *     gravityY: 1.5,
 *     bounciness: 0.6,
 *   }}
 * />
 * ```
 *
 * @requires CSS Module: ./DraggablePills.module.css
 * @requires npm: matter-js (dynamically imported)
 */
"use client";

import React, { useEffect, useRef } from "react";
import styles from "./DraggablePills.module.css";

/** Key animation settings that have the most visual impact */
export interface AnimationConfig {
  /** Time between each pill drop in ms @default 400 */
  staggerMs?: number;
  /** Gravity strength (1 = normal, 2 = heavy) @default 1 */
  gravityY?: number;
  /** How bouncy pills are (0 = no bounce, 1 = very bouncy) @default 0.45 */
  bounciness?: number;
  /** Delay before ceiling closes after last drop in ms @default 900 */
  gateCloseDelayMs?: number;
}

export interface DraggablePillsProps {
  /** Array of pill label texts */
  pills?: string[];
  /** Key animation settings */
  animationConfig?: AnimationConfig;
}

const DEFAULT_PILLS = [
  "Contextual Reveal",
  "Micro-Interactions",
  "Layout Preservation",
  "Delayed Sequence",
  "Fluid Motion",
  "State-Based Transitions",
  "Scroll-Driven Motion",
];

export function DraggablePills({
  pills = DEFAULT_PILLS,
  animationConfig,
}: DraggablePillsProps): React.ReactElement {
  const arenaRef = useRef<HTMLDivElement>(null);
  const cleanupRef = useRef<(() => void) | null>(null);

  // Store config in ref to avoid effect dependency issues while keeping values current
  const configRef = useRef(animationConfig);
  configRef.current = animationConfig;

  useEffect(() => {
    if (typeof window === "undefined") return;

    const arena = arenaRef.current;
    if (!arena) return;

    // Handle React Strict Mode double-invocation
    if (cleanupRef.current) {
      cleanupRef.current();
      cleanupRef.current = null;
    }

    let isCleanedUp = false;
    const timeoutIds: ReturnType<typeof setTimeout>[] = [];
    const safeSetTimeout = (fn: () => void, ms: number) => {
      const id = setTimeout(() => {
        if (!isCleanedUp) fn();
      }, ms);
      timeoutIds.push(id);
      return id;
    };

    // Dynamically import Matter.js (client-side only)
    import("matter-js").then((Matter) => {
      if (isCleanedUp || !arenaRef.current) return;

      const userConfig = configRef.current;

      // Merge user config with defaults
      const CONFIG = {
        drop: {
          staggerMs: userConfig?.staggerMs ?? 400,
          spawnAbovePx: 100,
          revealLeadMs: 60,
        },
        walls: {
          thickness: 80,
          edgePadding: 16,
        },
        gate: {
          openExtraPx: 350,
          closeAfterMs: userConfig?.gateCloseDelayMs ?? 900,
          closeAnimMs: 500,
        },
        physics: {
          gravityY: userConfig?.gravityY ?? 1,
          pill: {
            restitution: userConfig?.bounciness ?? 0.45,
            friction: 0.12,
            frictionAir: 0.02,
            density: 0.002,
          },
          ceiling: {
            restitution: 0.85,
            friction: 0,
            frictionStatic: 0,
          },
          walls: {
            restitution: 0.2,
            friction: 0.2,
          },
        },
        antiStick: {
          zonePx: 34,
          holdMs: 220,
          nudgeDownVy: 2.6,
          nudgeSideVx: 0.4,
        },
        drag: {
          stiffnessMouse: 0.15,
          dampingMouse: 0.08,
          stiffnessTouch: 0.28,
          dampingTouch: 0.12,
        },
      };

      const isTouch =
        "ontouchstart" in window ||
        (navigator.maxTouchPoints != null && navigator.maxTouchPoints > 0);

      arena.style.overscrollBehavior = "contain";

      const pillElements = Array.from(
        arena.querySelectorAll<HTMLElement>("[data-pill]"),
      );
      if (pillElements.length === 0) return;

      const {
        Engine,
        Runner,
        World,
        Bodies,
        Body,
        Composite,
        Mouse,
        MouseConstraint,
        Events,
      } = Matter;

      // Create engine and world
      const engine = Engine.create();
      const world = engine.world;
      world.gravity.y = CONFIG.physics.gravityY;
      const runner = Runner.create();

      const getArenaRect = () => ({
        w: arena.clientWidth,
        h: arena.clientHeight,
      });

      // Boundary bodies
      let ceiling: Matter.Body | null = null;
      let floor: Matter.Body | null = null;
      let leftWall: Matter.Body | null = null;
      let rightWall: Matter.Body | null = null;

      const buildBounds = () => {
        const { w, h } = getArenaRect();
        const t = CONFIG.walls.thickness;

        const existing = [ceiling, floor, leftWall, rightWall].filter(
          (body): body is Matter.Body => body !== null,
        );
        if (existing.length > 0) {
          Composite.remove(world, existing);
        }

        const openCeilingY = -(
          CONFIG.drop.spawnAbovePx + CONFIG.gate.openExtraPx
        );

        ceiling = Bodies.rectangle(w / 2, openCeilingY, w + t * 2, t, {
          isStatic: true,
          restitution: CONFIG.physics.ceiling.restitution,
          friction: CONFIG.physics.ceiling.friction,
          frictionStatic: CONFIG.physics.ceiling.frictionStatic,
        });

        floor = Bodies.rectangle(w / 2, h + t / 2, w + t * 2, t, {
          isStatic: true,
          restitution: CONFIG.physics.walls.restitution,
          friction: CONFIG.physics.walls.friction,
        });

        leftWall = Bodies.rectangle(-t / 2, h / 2, t, h + t * 2, {
          isStatic: true,
          restitution: CONFIG.physics.walls.restitution,
          friction: CONFIG.physics.walls.friction,
        });

        rightWall = Bodies.rectangle(w + t / 2, h / 2, t, h + t * 2, {
          isStatic: true,
          restitution: CONFIG.physics.walls.restitution,
          friction: CONFIG.physics.walls.friction,
        });

        World.add(world, [ceiling, floor, leftWall, rightWall]);
      };

      const closeGate = () => {
        if (!ceiling) return;
        const ceilingBody = ceiling; // Capture for closure
        const { w } = getArenaRect();
        const t = CONFIG.walls.thickness;
        const startY = ceilingBody.position.y;
        const endY = -t / 2;
        const startTime = performance.now();

        let animationId: number;
        const tick = (now: number) => {
          if (isCleanedUp) return;
          const progress = Math.min(
            1,
            (now - startTime) / CONFIG.gate.closeAnimMs,
          );
          const y = startY + (endY - startY) * progress;
          Body.setPosition(ceilingBody, { x: w / 2, y });
          if (progress < 1) {
            animationId = requestAnimationFrame(tick);
          }
        };
        animationId = requestAnimationFrame(tick);
      };

      // Pill body records
      interface PillRecord {
        body: Matter.Body;
        w: number;
        h: number;
        stickStart: number;
      }
      const bodies = new Map<HTMLElement, PillRecord>();

      const rand = (min: number, max: number) =>
        min + Math.random() * (max - min);

      const createBodiesQueued = () => {
        const { w } = getArenaRect();
        let queueY = -60;

        for (const el of pillElements) {
          const pw = el.offsetWidth;
          const ph = el.offsetHeight;

          const minX = CONFIG.walls.edgePadding + pw / 2;
          const maxX = w - CONFIG.walls.edgePadding - pw / 2;
          const x = maxX > minX ? rand(minX, maxX) : w / 2;

          const body = Bodies.rectangle(x, queueY - ph / 2, pw, ph, {
            restitution: CONFIG.physics.pill.restitution,
            friction: CONFIG.physics.pill.friction,
            frictionAir: CONFIG.physics.pill.frictionAir,
            density: CONFIG.physics.pill.density,
          });

          Body.setStatic(body, true);
          bodies.set(el, { body, w: pw, h: ph, stickStart: 0 });
          World.add(world, body);

          queueY -= ph + 20;
        }
      };

      const replaceBody = (el: HTMLElement, newW: number, newH: number) => {
        const rec = bodies.get(el);
        if (!rec) return;

        const old = rec.body;
        const pos = { x: old.position.x, y: old.position.y };
        const ang = old.angle;
        const vel = { x: old.velocity.x, y: old.velocity.y };
        const av = old.angularVelocity;

        Composite.remove(world, old);

        const fresh = Bodies.rectangle(pos.x, pos.y, newW, newH, {
          restitution: old.restitution,
          friction: old.friction,
          frictionAir: old.frictionAir,
          density: old.density,
        });

        Body.setAngle(fresh, ang);
        Body.setVelocity(fresh, vel);
        Body.setAngularVelocity(fresh, av);

        rec.body = fresh;
        rec.w = newW;
        rec.h = newH;

        World.add(world, fresh);
      };

      const refreshWorld = () => {
        buildBounds();
        bodies.forEach((rec, el) => {
          const nw = el.offsetWidth;
          const nh = el.offsetHeight;
          if (Math.abs(nw - rec.w) > 0.5 || Math.abs(nh - rec.h) > 0.5) {
            replaceBody(el, nw, nh);
          }
        });
      };

      // Render physics state to DOM
      const renderDOM = () => {
        bodies.forEach((rec, el) => {
          const b = rec.body;
          const x = b.position.x - rec.w / 2;
          const y = b.position.y - rec.h / 2;
          el.style.transform = `translate(${x}px, ${y}px) rotate(${b.angle}rad)`;
        });
      };

      // Prevent pills sticking to ceiling
      const antiStick = (now: number) => {
        if (!ceiling) return;
        const ceilingUnderY = ceiling.position.y + CONFIG.walls.thickness / 2;

        bodies.forEach((rec) => {
          const b = rec.body;
          if (b.isStatic) return;

          const bodyTopY = b.position.y - rec.h / 2;
          const dist = bodyTopY - ceilingUnderY;
          const inZone = dist < CONFIG.antiStick.zonePx;

          if (inZone) {
            if (rec.stickStart === 0) rec.stickStart = now;
            const held = now - rec.stickStart;
            const slow = Math.abs(b.velocity.y) < 0.25;

            if (held > CONFIG.antiStick.holdMs && slow) {
              Body.setVelocity(b, {
                x:
                  b.velocity.x +
                  (Math.random() - 0.5) * CONFIG.antiStick.nudgeSideVx,
                y: Math.max(b.velocity.y, CONFIG.antiStick.nudgeDownVy),
              });
              rec.stickStart = 0;
            }
          } else {
            rec.stickStart = 0;
          }
        });
      };

      Events.on(engine, "afterUpdate", () => {
        renderDOM();
        antiStick(performance.now());
      });

      // Mouse/touch dragging
      const mouse = Mouse.create(arena);
      const mouseConstraint = MouseConstraint.create(engine, {
        mouse,
        constraint: {
          stiffness: isTouch
            ? CONFIG.drag.stiffnessTouch
            : CONFIG.drag.stiffnessMouse,
          damping: isTouch
            ? CONFIG.drag.dampingTouch
            : CONFIG.drag.dampingMouse,
        },
      });
      World.add(world, mouseConstraint);

      // Prevent scroll while dragging
      let touchingArena = false;

      const handlePointerDown = () => {
        touchingArena = true;
      };

      const handlePointerUp = () => {
        touchingArena = false;
      };

      const handleTouchMove = (e: TouchEvent) => {
        if (!touchingArena) return;
        const constraint = mouseConstraint.constraint;
        if (constraint.bodyB) {
          e.preventDefault();
        }
      };

      arena.addEventListener("pointerdown", handlePointerDown, {
        passive: true,
      });
      window.addEventListener("pointerup", handlePointerUp, { passive: true });
      arena.addEventListener("touchmove", handleTouchMove, { passive: false });

      // Drop sequence
      const revealPill = (el: HTMLElement) => {
        el.style.opacity = "1";
        el.style.pointerEvents = "auto";
      };

      const dropOneByOneThenClose = () => {
        pillElements.forEach((el, i) => {
          const dropAt = i * CONFIG.drop.staggerMs;
          const revealAt = Math.max(0, dropAt - CONFIG.drop.revealLeadMs);

          safeSetTimeout(() => revealPill(el), revealAt);

          safeSetTimeout(() => {
            const rec = bodies.get(el);
            if (!rec) return;

            const { w } = getArenaRect();
            const pw = rec.w;
            const ph = rec.h;

            const minX = CONFIG.walls.edgePadding + pw / 2;
            const maxX = w - CONFIG.walls.edgePadding - pw / 2;
            const x = maxX > minX ? rand(minX, maxX) : w / 2;
            const y = -(CONFIG.drop.spawnAbovePx + ph / 2);

            Body.setPosition(rec.body, { x, y });
            Body.setAngle(rec.body, (Math.random() - 0.5) * 0.35);
            Body.setStatic(rec.body, false);

            const vx = (Math.random() - 0.5) * (isTouch ? 0.7 : 1.0);
            Body.setVelocity(rec.body, { x: vx, y: 0 });
            Body.setAngularVelocity(
              rec.body,
              (Math.random() - 0.5) * (isTouch ? 0.035 : 0.05),
            );
          }, dropAt);
        });

        const totalDropTime = (pillElements.length - 1) * CONFIG.drop.staggerMs;
        safeSetTimeout(closeGate, totalDropTime + CONFIG.gate.closeAfterMs);
      };

      // Wait for stable container size before starting
      const waitForStableSize = (frames = 10, minH = 40): Promise<void> => {
        return new Promise((resolve) => {
          let stable = 0;
          let lastW = 0;
          let lastH = 0;

          const tick = () => {
            if (isCleanedUp) return;

            const { w, h } = getArenaRect();
            if (h < minH || w < 40) {
              stable = 0;
              lastW = w;
              lastH = h;
              requestAnimationFrame(tick);
              return;
            }

            const same = Math.abs(w - lastW) < 0.5 && Math.abs(h - lastH) < 0.5;
            stable = same ? stable + 1 : 0;
            lastW = w;
            lastH = h;

            if (stable >= frames) {
              resolve();
              return;
            }
            requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        });
      };

      // Initialize
      buildBounds();
      createBodiesQueued();
      renderDOM();

      let started = false;
      const start = () => {
        if (started || isCleanedUp) return;
        started = true;

        waitForStableSize().then(() => {
          if (isCleanedUp) return;
          refreshWorld();
          Runner.run(runner, engine);
          dropOneByOneThenClose();
        });
      };

      // Start when visible
      const intersectionObserver = new IntersectionObserver(
        (entries) => {
          for (const entry of entries) {
            if (entry.isIntersecting) {
              start();
              intersectionObserver.disconnect();
              break;
            }
          }
        },
        { threshold: 0.15 },
      );
      intersectionObserver.observe(arena);

      // Handle resize
      const resizeObserver = new ResizeObserver(() => {
        if (!started || isCleanedUp) return;
        requestAnimationFrame(refreshWorld);
      });
      resizeObserver.observe(arena);

      // Cleanup function
      const cleanup = () => {
        isCleanedUp = true;

        // Clear all pending timeouts
        for (const id of timeoutIds) {
          clearTimeout(id);
        }

        intersectionObserver.disconnect();
        resizeObserver.disconnect();

        arena.removeEventListener("pointerdown", handlePointerDown);
        window.removeEventListener("pointerup", handlePointerUp);
        arena.removeEventListener("touchmove", handleTouchMove);

        Runner.stop(runner);
        Events.off(engine, "afterUpdate");
        World.clear(world, false);
        Engine.clear(engine);

        // Clear body references
        bodies.clear();
      };

      cleanupRef.current = cleanup;
    });

    // Effect cleanup
    return () => {
      if (cleanupRef.current) {
        cleanupRef.current();
        cleanupRef.current = null;
      }
    };
  }, [pills]);

  return (
    <div className={styles.pageWrapper}>
      <main className={styles.mainWrapper}>
        <section className={styles.sectionAtf}>
          <div
            className={`${styles.paddingGlobal} ${styles.paddingSectionLarge}`}
          >
            <div className={styles.containerLarge}>
              <div className={styles.headingTitle}>
                <h1 className={styles.heroHeading}>Falling Draggable Pills</h1>
                <p className={styles.textSizeRegular}>
                  Scroll down below to see them
                </p>
              </div>
            </div>
          </div>
        </section>

        <section className={styles.sectionResourcePill}>
          <div className={styles.resourceContainer}>
            <div className={`${styles.containerLarge} ${styles.higherZ}`}>
              <div className={styles.resourceWrapper}>
                <div className={styles.paddingGlobal}>
                  <div className={styles.resourceContent}>
                    <div className={styles.subtitleWrapper}>
                      <div className={styles.subtitleDot} />
                      <div>ANIMATION COMPONENTS</div>
                    </div>
                    <h1 className={styles.text64}>Falling Draggable Pills</h1>
                    <div className={styles.resourcePar}>
                      <div className={styles.textSize20}>
                        Keeps interfaces clean while guiding attention at the
                        right moment.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className={styles.resourcePillBox}>
              <div className={styles.resourceHold}>
                <div className={styles.paddingGlobal}>
                  <div className={styles.resourceDome}>
                    <div
                      ref={arenaRef}
                      className={styles.resourcePillWrapper}
                      data-pill-physics
                    >
                      <div className={styles.pillLayer} data-pill-layer>
                        {pills.map((text, index) => (
                          <div
                            key={`${text}-${index}`}
                            className={styles.pillWrap}
                            data-pill-wrap
                          >
                            <button className={styles.resourcePills} data-pill>
                              <div className={styles.resourcePillTop}>
                                <div className={styles.textSize20}>{text}</div>
                              </div>
                            </button>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}

Copy the Styles

Create DraggablePills.module.css in your components directory and paste the following code:

CSS Code

Copy

.sectionAtf {
  position: relative;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 991px) {
  .sectionAtf {
    padding-top: 3rem;
  }
}

.paddingGlobal {
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}

@media screen and (max-width: 991px) {
  .paddingGlobal {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .paddingGlobal {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.paddingSectionLarge {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

@media screen and (max-width: 991px) {
  .paddingSectionLarge {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .paddingSectionLarge {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.containerLarge {
  width: 100%;
  max-width: 80rem;
  margin-right: auto;
  margin-left: auto;
}

.headingTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.heroHeading {
  font-size: 4rem;
  line-height: 1;
  font-weight: 500;
  text-align: center;
}

@media screen and (max-width: 479px) {
  .heroHeading {
    font-size: 2.5rem;
  }
}

.textSizeRegular {
  font-size: 1rem;
}

.sectionResourcePill {
  position: relative;
  overflow: clip;
  width: 100%;
  background-color: #f6f6f6;
}

@media screen and (max-width: 991px) {
  .sectionResourcePill {
    padding-top: 3rem;
  }
}

.resourceContainer {
  display: flex;
  width: 100%;
  min-height: 100dvh;
  padding-top: 3rem;
  padding-bottom: 3rem;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3rem;
}

@media screen and (max-width: 991px) {
  .resourceContainer {
    min-height: 0;
  }
}

.resourceWrapper {
  width: 100%;
}

.resourceContent {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #27272a;
  text-align: center;
}

.subtitleWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.subtitleDot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 100%;
  background-color: #6c4cf1;
}

.text64 {
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 10cqw, 4rem);
  text-wrap: balance;
}

.resourcePar {
  width: 100%;
  max-width: 20rem;
}

.textSize20 {
  font-size: 1.25rem;
}

@media screen and (max-width: 767px) {
  .textSize20 {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 479px) {
  .textSize20 {
    font-size: 1rem;
  }
}

.resourcePillBox {
  position: relative;
  display: flex;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  align-items: center;
}

.resourceHold {
  position: relative;
  width: 100%;
}

.resourceDome {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 30rem;
  margin-right: auto;
  margin-left: auto;
  border-radius: 1.88rem;
  background-color: #dfe0e3;
}

.resourcePillWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.pillLayer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.pillWrap {
  border-radius: 1.88rem;
}

@media screen and (max-width: 991px) {
  .pillWrap {
    display: flex;
  }
}

.resourcePills {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  display: flex;
  padding: 1.25rem;
  flex-direction: column;
  align-items: center;
  border-radius: 1.88rem;
  background-color: white;
  will-change: transform;
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  border: none;
  cursor: grab;
}

.resourcePills:active {
  cursor: grabbing;
}

@media screen and (max-width: 767px) {
  .resourcePills {
    padding: 1rem;
  }
}

.resourcePillTop {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.pageWrapper {
  min-height: 100vh;
}

.mainWrapper {
  position: relative;
}

.higherZ {
  position: relative;
  z-index: 4;
}

Using the Motion Component

Component Code

Copy

import { DraggablePills } from "@/components/DraggablePills";

export default function Page() {
  return (
    <DraggablePills
      pills={[
        "Contextual Revealss",
        "Micro-Interactions",
        "Layout Preservation",
        "Delayed Sequence",
        "Fluid Motion",
        "State-Based Transitions",
        "Scroll-Driven Motion",
      ]}
      animationConfig={{
        staggerMs: 400, // Time between each pill drop (ms)
        gravityY: 1, // Gravity strength (1 = normal, 2 = heavy)
        bounciness: 0.45, // How bouncy (0 = none, 1 = very bouncy)
        gateCloseDelayMs: 900, // Delay before ceiling closes (ms)
      }}
    />
  );
}

All Done! Your Interaction is now ready to go live

View Animation Live

Draggable Pills — Quick Start + Physics Tuning

A physics-powered pill drop component using Matter.js. This guide covers setup, the highest-impact tuning options, and critical implementation rules for Next.js.

Matter.js Physics

Client Component

Touch + Mouse Drag

Intersection Observer

Resize-aware

What this component is doing

Pills are positioned off-screen, then dropped one-by-one into a bounded arena when the section scrolls into view. Matter.js handles realistic gravity, collision, and bounce physics. Users can drag pills with mouse or touch, and the ceiling closes after all pills have dropped to keep them contained.

Physics engine runs client-side only

Matter.js is dynamically imported after mount. The component uses "use client" and guards against SSR with cleanup refs and isCleanedUp flags for Strict Mode safety.

Visibility-triggered animation

An IntersectionObserver starts the drop sequence only when the arena is 15% visible. Pills fade in slightly before their physics body is released.

CSS controls container + pill styling

The arena size, pill appearance, and clipping are handled by the CSS module. Physics positions are applied via inline transform on each pill element.

Quick Start (Next.js)

Add the component file and CSS module to your project. Import and use with default or custom props. The component handles all physics initialization and cleanup automatically.

Requirement	Setting / Example	Why it matters
matter-js	npm install matter-js	Physics engine dependency—dynamically imported so it won't break SSR.
CSS Module	DraggablePills.module.css	Defines arena dimensions, pill styling, and the clipping container. Without proper sizing, pills may be invisible or escape bounds.
Arena height	.resourceDome { height: 30rem; }	The physics simulation needs a defined height. Adjust this in CSS to fit your layout.

Props & Tuning

The component exposes two props: pills for content and animationConfig for the four highest-impact physics settings.

Prop / Config	What it changes	Try this value
pills	Array of label strings rendered as pill buttons	["React", "Next.js", "TypeScript"]
staggerMs	Delay between each pill drop	150 (rapid fire) / 600 (dramatic pacing)
gravityY	How fast pills accelerate downward	0.4 (floaty slow-mo) / 2 (heavy drop)
bounciness	How much pills bounce on collision (restitution)	0.2 (minimal bounce) / 0.8 (super bouncy)
gateCloseDelayMs	Wait time before ceiling closes after last drop	400 (quick seal) / 1500 (let them settle)

Vital Rules for Success

The arena container must have explicit dimensions in CSS—physics bodies are created based on clientWidth and clientHeight at mount time.
Don't add or remove pills dynamically after mount. The physics bodies are created once when the component initializes. Change the pills prop to trigger a full re-initialization.
Touch scrolling is preserved—only blocked when actively dragging a pill. The component uses touch-action: pan-y and selective preventDefault to avoid scroll-jacking.

Pro Tip For a "slow motion" cinematic feel, combine low gravity (gravityY: 0.4) with high bounciness (bounciness: 0.7) and slower stagger (staggerMs: 500). For snappy UI energy, use gravityY: 1.5, bounciness: 0.3, and staggerMs: 150.

Falling 2D Draggable Pills

Setup Guide

All Done! Your Interaction is now ready to go live

Mastering the Pill Physics Component

Script Customization Options

Webflow Styling Requirements

Critical Usage Rules

All Done! Your Interaction is now ready to go live

Draggable Pills — Quick Start + Physics Tuning

What this component is doing

Quick Start (Next.js)

Props & Tuning

Vital Rules for Success

Complex Animations made easy

Related Animation Components

Hero Gallery Transition

Cinematic Hover Smoke Interaction

Encrypted Text Reveal

Rotating Dynamic Text with Layout Adjustment