AI Visualizer

Stakeholders who fund, approve, or rely on large language products often have no mental model of what happens between typing a prompt and reading an answer. Traditional explanations lean on neural network diagrams, tensors, and training jargon that assume years of ML literacy. For a show-and-tell with executives, educators, or policy audiences, that vocabulary creates distance instead of clarity.

The gap is not a lack of curiosity. It is a lack of a narrative: a step-by-step story that respects the complexity of the system without requiring the viewer to decode academic notation first.

AI Visualizer is a scroll-driven, animated documentary in the browser. It is a single-page Next.js 14 App Router experience that advances through phases of the pipeline as the user scrolls: input, tokenization, model inference at a conceptual level, and response generation. Framer Motion ties motion to scroll position so each stage earns attention in sequence rather than overwhelming the screen at once.

The design rule is explicit: no assumed knowledge of machine learning. Copy and visuals explain behavior in plain language. Where graphs or flows help, the stack can layer React Flow or D3.js for node-based diagrams that read as flowcharts, not research figures. The target setting is live presentation to non-engineers, so pacing, legibility, and large-type layouts take priority over density.

The app is implemented with TypeScript and Tailwind CSS for layout and responsive typography. Framer Motion handles scroll-linked and staged animations so sections reveal, emphasize, and hand off to the next step in sync with user scrolling. The App Router keeps the experience as one cohesive route with modular sections.

Optional diagram integrations (React Flow or D3.js) render simplified pipeline and attention-style visuals without exposing raw weight matrices or loss curves. Portfolio imagery lives under public/images/projects/ai-visualizer, supporting case study figures alongside the in-app narrative.