Gravity

Overview

Gravity is a scroll-cinema digital studio landing by SonoJS (demo brand: Gravity). Zero-build static HTML with local CSS, vendored Three.js, and vanilla JS. Loader calibrates a gravity field into hero Less noise. More gravity.; scroll chapters drop spheres with Verlet collision physics, reassemble into form with cursor ripples, then release weightless into the lens. Studio Controls panel swaps hero palettes (Royal Blue, Rose Blush, Volt Lime, Arctic Sky). Works / Services / Team / Story nav and collaborate footer. Demo studio chrome only - no CRM backend. Run with npx serve . or host statically on Cloudflare Workers.

Highlights

1. 01

   Verlet gravity field

   Real-time 3D sphere collisions - mass, momentum, restitution - as you scroll.

2. 02

   Chaos → form → release

   Drop, reassemble with cursor ripples, then weightless fly-through into the lens.

3. 03

   Studio Controls

   Four live hero palettes (Royal Blue, Rose, Volt Lime, Arctic) mid-scroll.

4. 04

   Zero-build static

   npx serve . - index.html, css/, js/main.js, vendored Three.js.

You get

• index.html + css/styles.css + js/main.js (Gravity studio)
• vendor/three/three.module.js (import map)
• vendor/fonts (local woff2 + fonts.css)
• Studio Controls palette UI

Run locally

From the unzipped project folder:

npx serve .