Overview
Emberline Fire Hero is a complete first screen for a SaaS analytics product. A navigation bar with dropdown menus, a two-line headline, a one-line description and two calls to action sit above a revenue dashboard that rises out of a burning eclipse, cut off at the fold so the page invites the next scroll. The fire is a live WebGL shader, not a video. It burns along the rim of the eclipse, flares toward the pointer when it rides the edge, and falls back to a static gradient when WebGL is unavailable. Reduced-motion users get a single still frame. The buttons carry a quiet hover motion: a letter roll, a soft press on the primary and a circle fill on the secondary. The dashboard works, too: a sidebar, KPI cards, an ember forecast card with a switch, a line chart you can switch between revenue, ad spend and profit by week or month, an event heat map and a data sources list. It ships as one self-contained HTML file with no libraries and no build step. Colors, radii and type sizes live in CSS variables at the top of the file, the chart reads from one small data object, and it holds up from 380 px phones to wide desktops.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
