Brightly

Overview

Brightly is a full-viewport productivity marketing hero by SonoJS. Built with Vite, React 19, Tailwind CSS 4, and Syne. Full-bleed looping hero.mp4 with bottom fade to canvas, sunburst brand mark, Product / Customer / Pricing / Resources / Company nav (mobile overlay menu), word-reveal headline Organize your day, master your productivity flow, supporting project-management copy, Get started CTA, and a floating dashboard.svg preview. Demo productivity chrome only - no auth backend. Vite build ready for Cloudflare Workers.

Highlights

1. 01

   Video stage + word reveal

   Full-bleed hero.mp4 with staggered word entrance on headline and subcopy.

2. 02

   Sunburst brand chrome

   Gradient sunburst mark, blur header, and mobile full-screen nav overlay.

3. 03

   Dashboard preview

   Get started CTA plus floating dashboard.svg with soft bottom fade.

4. 04

   Vite and fork-ready

   Vite 8 + React 19 + Tailwind 4 + Syne - npm run build to dist/.

You get

• Full Vite + React 19 source (Brightly)
• App.jsx hero with word reveal, nav, and dashboard stage
• Tailwind CSS 4 via @tailwindcss/vite
• public/assets/hero.mp4 and dashboard.svg
• @fontsource-variable/syne