Components

Interactive visualization components for mathematical education

Design Philosophy
All components are designed to be pure and deterministic based on their props. State management is handled by the parent component, making these easy to compose and test.

2D Canvas

Interactive Vector

Animated Paths

3D Visualizations

Animated 3D Vector

Matrix Transformation

Interactive Plane

Shaders

Shader Editor

Output

Available Uniforms

vec2 u_resolutionfloat u_timevec2 u_mouse

Live Shader

UV Coordinates

Function Plot

Gradients

Linear gradient

Rainbow

Grayscale ramp

Mathematics

LaTeX Rendering

Inline math: The quadratic formula is x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
∇×E⃗=−∂B⃗∂t\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}

Differential Equations

Slope Field

Click to add initial conditions

Phase Portrait

Solution Curve

y′=y,y(0)=1y' = y, \quad y(0) = 1

Timeline Scrubber

t0.0s

y(t) = e^(-0.3t) cos(2t) = 1.000

Parameter Panel

mm1.00
cc0.50
kk4.00
Natural freq: 2.00 rad/sDamping ratio: 0.13

Pathfinding

PathfindingGrid with BFS

SE
Pathfinding visualization grid. Start position at column 1, row 1. End position at column 10, row 8.Use arrow keys to navigate, Enter or Space to toggle cells.
Start
End
Wall
Visited
Frontier
Path

Click cells to toggle walls. Drag start/end to move them.

UI Components

Buttons

Sliders

Callouts

Info
This is an informational callout for general notes.
Tip
Pro tip: Use keyboard shortcuts for faster navigation.
Warning
Be careful with this operation, it cannot be undone.
Key Concept
Vectors are the building blocks of linear algebra.