"Act as a Senior Computational Physicist. Build a high-performance 'Active Matter & Diffusion Laboratory' using React and HTML5 Canvas.
Interactive Tools (The 'Experiment' Mode):
Mouse Interaction: The user's cursor acts as a 'Repulsive Potential' (a massive invisible particle). When I move the mouse, it should physically push the small particles away in real-time.
'Heat Drop' Button: A button that 'injects' high kinetic energy into a specific spot on the canvas, showing how a temperature gradient causes faster diffusion in one area.
Particle Tracer Toggle: Let the user click any single particle to 'highlight' it and draw its specific path (Random Walk trajectory) in a bright color.
The Physics Engine (Langevin Dynamics):
Use the Euler-Maruyama method for solving the Stochastic Differential Equation:
.
Small particles should have 'Brownian Jiggle' based on a Temperature Slider.
Add a Viscosity Slider to change the fluid's 'thickness.'
Professional Analytics Dashboard:
A live-updating 'Mean Squared Displacement (MSD)' line chart on the side.
A real-time 'Velocity Distribution' histogram (Maxwell-Boltzmann distribution).
Aesthetic:
Dark 'Laboratory' theme. Minimalist sleek sliders.
No long text blocks. Use a 'Legend' or 'Info' icon for the math.
Include a 'Reset System' button to clear the paths."
Now let me read the existing files to understand the project structure before building.
Now let me build the complete Active Matter & Diffusion Laboratory. I'll start with the globals.css dark theme, then the layout, and then the components.
Good. Now let me update the layout metadata and then build all the components.
Now let me build the physics engine and simulation components. I'll create the core simulation engine, the canvas renderer, the analytics dashboard, and the control panel as separate files.
Now let me write the main page that ties everything together:
Now let me also check that the slider component exists since we're using it:
Both components exist. I notice the slider styling uses data-slot attributes. Let me update my control panel to use the correct selectors for styling the slider:
Now let me also add the Maxwell-Boltzmann theory curve overlay on the velocity histogram properly - the current BarChart doesn't support Line children. Let me use a ComposedChart instead:
Now let me verify the final state of all files to make sure everything is correct:
Everything looks good. The Active Matter & Diffusion Laboratory is now complete with four core files:
lib/physics-engine.ts — The Langevin dynamics engine using Euler-Maruyama integration of the stochastic differential equation, with Box-Muller Gaussian noise, mouse repulsive potential, localized heat injection, MSD computation, and velocity histogram binning with a Maxwell-Boltzmann theoretical curve.components/simulation-canvas.tsx — An HTML5 Canvas renderer that draws particles with speed-based color interpolation (teal-to-orange), the radial repulsion field around the cursor, heat spot glow, traced random-walk paths for a selected particle, and a subtle lab grid background.components/control-panel.tsx — Minimalist controls with Temperature and Viscosity sliders, a Heat Drop button that injects localized kinetic energy, a Reset System button, a tracing status indicator, and an info tooltip showing the Langevin SDE formula.components/analytics-dashboard.tsx — A live-updating MSD line chart and a velocity distribution ComposedChart (histogram bars + Maxwell-Boltzmann theory curve overlay), along with real-time stats for current MSD and average speed.You can send messages while the preview loads