Mossline

Overview

Mossline is a scroll-storytelling marketing hero for a climate / earth-sensing brand by SonoJS. Built as a single HTML page with local CSS, fonts, WebP plates, and a fly-in MP4. A sticky stage (~640vh story) drives camera motion, mist, floating rocks, HUD telemetry, and the headline Measure the Living Planet. Progress bar, SCROLL TO EXPLORE hint, and glass product cards (field sensors, living species baselines) continue the narrative. Demo UI only - no backend. Open index.html or host the folder statically on Cloudflare Workers.

Highlights

1. 01

   Scroll-scrubbed stage

   Sticky full-viewport camera stage over a long story scroll - video fly-in, mist, and rock layers.

2. 02

   Climate brand chrome

   Mossline wordmark, lime chips, HUD crosshair, and Measure the Living Planet headline.

3. 03

   Sensor story cards

   Glass cards for field sensors and living-species baselines continue after the hero stage.

4. 04

   Zero-build static

   One index.html plus local fonts, WebP plates, and flyin.mp4 - deploy anywhere static.

You get

• index.html (complete scroll story + HUD UI)
• assets/fonts (Inter Tight + JetBrains Mono)
• assets/img (hero still/cutout, island, rocks, sensor)
• assets/video/flyin.mp4
• Fog, rock bob, progress bar, and explore hint motion