Fire : Inspired by FlamAI

Built in 2026WEBSITEVisit Website

A premium, pixel-perfect landing page recreation paired with a blazing-fast, real-time data visualization dashboard engineered to render 50,000+ data points at 60 FPS.

Tech Stack

Next.jsTechnology

React 18Technology

Web Workers APITechnology

Canvas 2D APITechnology

Tailwind CSSTechnology

Framer MotionTechnology

TypeScriptTechnology

Project Details

A premium, pixel-perfect landing page recreation paired with a blazing-fast, real-time data visualization dashboard engineered to render 50,000+ data points at 60 FPS.

Pixel-Perfect Landing Page Recreation: Went above and beyond the core dashboard requirements by reverse-engineering and recreating the company's native landing page. Painstakingly matched their exact design system, typography, and visual language to ensure the project felt like a native extension of their product.
Immersive User Experience: Utilized Framer Motion and Tailwind CSS to build complex micro-animations, glassmorphic UI elements, and a highly polished, responsive marketing route that immediately wows users before they even reach the application layer.
Enterprise-Grade Dashboard Performance: Designed and developed a high-frequency data dashboard capable of ingesting 100 new data points every 100ms without freezing the browser or compromising the user experience.
Comprehensive Data Visualization: Engineered custom-built, zero-latency visualizations from scratch, including Line Charts, Bar Charts, Scatter Plots, and radial density Heatmaps.
Massive Data Rendering: Built a fully custom, high-speed virtualized data table capable of instantaneously rendering over 50,000+ rows, only mounting ~30 visible DOM nodes at any given moment.
Live Demonstration: Deployed a production-ready build to showcase the seamless integration of a premium marketing site leading into a highly-technical data ingestion stream, all while maintaining a strict 60 FPS visual benchmark.

Technical Overview

Engineered for absolute maximum performance by bypassing the React DOM, leveraging background threads, and executing custom rendering loops to handle extremely high-frequency data ingestion at 60 FPS.

State Bypassing & Custom Game Loop: Bypassed traditional React useState rendering loops for high-frequency data. Engineered a system where data flows directly from a Web Worker into a mutable useRef, which is then painted to the screen via a standalone requestAnimationFrame loop and optimized CanvasRenderingContext2D instructions.
Off-Thread Data Processing: Integrated the Web Workers API to offload array generation, data aggregation, and sliding-window logic strictly off the main thread. This ensures the UI remains buttery smooth and totally unblocked during heavy computational ingestion.
Memory Management & Leak Prevention: Implemented a strict sliding-window technique within the Web Worker to cap the Javascript heap at a maximum of 50,000 data points. This architectural decision prevents memory leaks, keeping memory usage stable at ~30MB even if the application is left running for days.
Zero-Latency Rendering: Passed massive datasets by reference (zero-copy) directly to the Canvas render loops. This completely eliminates the overhead of deeply cloning massive arrays and prevents React from freezing the browser during rapid state mutations.
Concurrent UI Transitions: Leveraged React 18’s useTransition() hook to prioritize UI responsiveness (such as typing in filter inputs or clicking aggregation toggles) over heavy background data-filtering tasks, completely eliminating input lag for the user.