# FlowTrace

> FlowTrace is an interactive 3D visualization of what really happens after every click, keystroke, scroll and form submit on a website.

FlowTrace makes the invisible web visible. Every interaction lights up a real-time map of the full web stack: browser, DOM, JS runtime, DNS, TLS, CDN, gateway, server, cache, queue, database, response and render. The flows are simulated locally in the browser across four viewing modes (technical, simple, cinematic, plus speed and low-performance options), so you can watch your data travel through the machinery of the web in real time. It runs as a client-side React app and requires no real backend to explore.

## Key Pages

- [Home](https://flowtracelab.com/): The live experience. Trigger clicks, typing, toggles, sliders, submits, errors and cache hits, and watch packets travel across the data-flow map, timeline, server visualizer, database vault and 3D internet tunnel.
- [How it works](https://flowtracelab.com/how-it-works): Follow a request through the full web stack, from browser and DNS to server, database and render, across four viewing modes.
- [Use cases](https://flowtracelab.com/use-cases): Ways to use FlowTrace to understand the web stack, teach how requests travel, and run live demos of click, form, login, search, save, error and cache flows.
- [Examples](https://flowtracelab.com/examples): Example flows showing how clicks, form submits, sign-ins, searches, saves, errors and cache hits travel through the web stack.
- [Cookie Trace](https://flowtracelab.com/cookie-trace): A 60 second interactive experience. Click Accept All and watch the invisible trackers wake up one by one to see who you really let in.
- [About](https://flowtracelab.com/about): What FlowTrace is, the project background and who built it.
- [FAQ](https://flowtracelab.com/faq): Common questions about what FlowTrace is, whether it watches real traffic, supported languages, and how to get in touch.
- [Privacy](https://flowtracelab.com/privacy): How FlowTrace handles data, the in-browser simulation, the cookie consent banner, and the contact and newsletter forms.

## Notes

- All flows are simulated locally. No real backend is required to use the visualization.
- Available in English and Polish.
- Respects prefers-reduced-motion, and a low-performance toggle simplifies the 3D scene for lower-end devices.

## Contact / Links
- Email: contact@polprog.pl
- Publisher: POLPROG (https://polprog.pl/)
- Sitemap: https://flowtracelab.com/sitemap.xml