Eclipse

Overview

Eclipse is a full-page interactive sci-fi universe experience by SonoJS (demo brand: ECLIPSE — The Last Frontier). Zero-build static HTML with local Tailwind, Three.js, GSAP ScrollTrigger, and runtime.js. Seven scroll chapters from The Awakening through Beyond the Veil: cinema backdrops, WebGL universe canvas, planet drag / shuttle boost toys, Field Archive lightbox (12 fragments), faction chooser (Wayfarers / Vesper Accord / Keepers), sound and reduce-motion toggles, and chapter index. Serve with a static server so assets load. Demo world chrome only - no account backend. Host on Cloudflare Workers.

Highlights

1. 01

   Seven chapter scroll

   Awakening → Beyond the Veil with cinema layers, vignette, and chapter nav.

2. 02

   WebGL universe toys

   Three.js canvas with drag-the-planet and boost-engines shuttle play.

3. 03

   Archive + factions

   Field Archive of 12 fragments and Wayfarers / Vesper / Keepers chooser.

4. 04

   Zero-build static

   index.html + js/runtime.js + vendor (three/gsap/tailwind) + assets/ - serve locally.

You get

• index.html (ECLIPSE — The Last Frontier)
• js/runtime.js
• vendor/three.min.js, gsap.min.js, ScrollTrigger.min.js, tailwind.js
• Chapter + archive WebP art set
• fonts/ attributions

Run locally

From the unzipped project folder:

npx --yes serve .