Page Gravity
Turn gravity on: elements fall, bounce and stack; grab and throw them; reset flies everything home.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Tiny AABB physics: elements stack on the floor and on each other, can be dragged and thrown with your pointer's velocity, and restore() animates them back with a stagger.
Installation
$ npm i @guetix/page-gravity
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { pageGravity } from "@guetix/page-gravity";
const g = pageGravity({ selector: "[data-gravity]" });
document.querySelector("#chaos")!.addEventListener("click", () => g.start());
// g.reset() — everything flies back into placeUsage
example.tsx
import { PageGravity } from "@/components/guetix/page-gravity";
// Mark elements with data-gravity, then drop the toggle in the same container:
<section className="relative">
<h1 data-gravity>Hello</h1>
<button data-gravity>Click</button>
<PageGravity />
</section>Easter eggs (pair with Easter Eggs)404 pagesPortfolio stunts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| selector | string | "[data-gravity]" | Elements that fall. |
| gravity | number | 2200 | px/s². |
| bounce | number | 0.35 | 0–1. |
| scoped | boolean | true | React: limit to the parent element. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Elements keep their DOM order and semantics; reset() restores inline styles exactly.