Footer

Playable Objects

by Vanguardia · motionprompts.dev

A dark footer where tech-tag pills drop in from above and pile up under Matter.js physics (gravity, restitution, friction, staggered spawn heights). A ScrollTrigger with once:true fires the physics engine the first time the footer scrolls into view, Lenis drives smooth scrolling, and a Matter MouseConstraint lets you grab and fling each pill in real time.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.2–1.6s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: physics
Complexity: 3/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, lenis, matter-js

Matter.js pills drop from off-screen and pile up under gravity {x:0,y:1} with restitution 0.5 / friction 0.15 / frictionAir 0.02 / density 0.002; the ceiling wall is only added 3s in so they can fall through; a MouseConstraint (stiffness 0.6) makes each pill grab-and-fling, with inertia frozen and velocity clamped to ±20 while dragging

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev15,889 charsCustomize

# 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 build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.