GravityJS

Physics-based animations that feel like real objects in Earth's gravity

Basic Gravity (default mass=1, elasticity=0.6)

Mass: 1

Different Mass Values

Light
0.5kg

Normal
1kg

Heavy
3kg

Different Elasticity (Bounciness)

Dull
e=0.1

Normal
e=0.6

Bouncy
e=0.95

Friction Effects

Low Friction
μ=0.1

High Friction
μ=0.5

Sticky
μ=0.9

Air Drag (Resistance)

No Drag
c=0.001

Thick Air
c=0.05

Water
c=0.2

🔧 Material Deformation Examples

Pointer-localized deformation, real contour curvature, and trigger control

These examples now live after the Air Drag section and show the richer deformation system:
• collapse pulls material toward the interaction point
• spread pushes material outward from the interaction point
• curvature increases how strongly the actual box contour bends around the contact zone
• trigger switches between click/press and live hover on supported components

Collapse with fixed hotspot attribute

These demo buttons use data-gravity-deformation-zone to pin the deformation hotspot. Remove that attribute and the framework falls back to using the actual click position.

Target: —

Alternate deformation behaviors

Mode: spread · Trigger: click

Mode: collapse · Curvature boosted

Mode: spread · Trigger: hover

Live playground

Tune the settings below and apply them to the playground button to compare collapse vs spread and click vs hover. Click to see the deformation!

Custom target for the controls below

Custom deformation settings

Strength: 1.2

Depth: 0.06

Curvature: 1.0

Mode:

Trigger:

Card Component with Deformation

Cards: click and hover triggers

Cards can now use click-trigger collapse or hover-trigger spread while keeping their lift and shadow behavior.

Click Collapse Card

Click-trigger collapse

Hover Spread Card

Hover-trigger spread

Standard Card
(No Deformation)

Standard hover effect only

Input Component with Deformation

Focus-based deformation for inputs

Inputs keep their focus-based trigger, but they now inherit collapse/spread and contour deformation from the shared deformation engine.

Collapse Input

Click position controls the collapse

Spread + Curvature Input

Focus still triggers it, but the shape now spreads outward

Standard Input

Standard scale effect

Deformable Textarea

Works with textareas too

How to Use

Add the data-gravity attribute to any element to enable gravity physics. Use data attributes to customize physics properties:

data-gravity-mass="1" - Weight (heavier = slower fall)

data-gravity-elasticity="0.6" - Bounciness (0-1)

data-gravity-friction="0.3" - Surface friction (0-1)

data-gravity-air-drag="0.01" - Air resistance

data-gravity-fixed - Element won't move

data-gravity-spring - Enable spring physics

data-gravity-spring-stiffness="150" - Spring stiffness

data-gravity-spring-damping="10" - Spring damping

Material Deformation (Optional)

Material deformation only activates on supported GravityJS component elements. Add data-gravity-deformation together with one of these component attributes:

data-gravity-button - Button-like elements such as <button>, <a>, <div>, or <span>

data-gravity-card - Card-like containers such as <div>, <article>, or <section>

data-gravity-input - Form controls and focusable wrappers such as <input>, <textarea>, <select>, or <div tabindex="0">

Configuration attributes:

data-gravity-deformation - Enable pointer-localized, plate-based contour deformation

data-gravity-deformation-strength="1.2" - Deformation intensity (default: 1.0)

data-gravity-deformation-depth="0.06" - Base transform compression depth (default: 0.06)

data-gravity-deformation-mode="collapse|spread" - Pull inward or spread outward from the interaction point

data-gravity-deformation-trigger="click|hover" - Trigger by press/click or live hover on buttons and cards

data-gravity-deformation-curvature="1.2" - Increase the strength of the plate-driven contour bending response near the contact region

data-gravity-material="rigid|metal|rubber|jelly" - Optional material preset affecting spring feel and plate response

If data-gravity-deformation-zone is omitted, deformation continues to behave exactly as before and depends on where the user clicks, touches, or hovers.

Implementation examples:

<button data-gravity-button data-gravity-deformation>...</button>
<button data-gravity-button data-gravity-deformation data-gravity-deformation-zone="left">...</button>
<div data-gravity-card data-gravity-deformation>...</div>
<input data-gravity-input data-gravity-deformation />
<textarea data-gravity-input data-gravity-deformation></textarea>
<select data-gravity-input data-gravity-deformation>...</select>
<div tabindex="0" data-gravity-input data-gravity-deformation>...</div>

Deformation zones:

Center click: Uniform compression (scaleX = scaleY, no translation)
Edge-X click: Horizontal directional compression with preserved vertical scale
Edge-Y click: Vertical directional compression with preserved horizontal scale
Corner click: Diagonal deformation + translation toward corner

Modes and triggers:

Collapse mode: material compresses toward the pointer.
Spread mode: material expands away from the pointer.
Hover trigger: supported on data-gravity-button and data-gravity-card for live pointer-driven deformation.
Inputs: data-gravity-input elements use focus/click capture rather than live hover, while still using the same deformation engine.

JavaScript API

// Initialize with custom options - realistic Earth-like gravity (~3800 px/s²)
const engine = new GravityEngine({
  gravity: new Vector2(0, 3800),  // px/s² (Earth's 9.8 m/s² at ~386px/m scale)
  airDrag: 0.01,
  timeScale: 1
});

// Add elements by selector
engine.addFromSelector('[data-gravity]');

// Or add individually
const body = engine.addBody({
  element: document.getElementById('myElement'),
  mass: 2,
  elasticity: 0.8,
  friction: 0.3
});

// Control the engine
engine.dropAll();    // Drop all from top
engine.resetAll();   // Reset to original positions
engine.toggle();     // Pause/resume
engine.applyGlobalImpulse(0, -500); // Apply force

// Access individual bodies
const body = engine.getBodyByElement(element);
body.applyImpulse(new Vector2(100, 0));
body.setVelocity(0, 500);