ANIMATIX WALKTHROUGH · LINEAR ALGEBRA KINEMATICS

A Matrix Is a Machine

3 interactive transformations
WebGPU 60 FPS vector engine
Reactive always-loop formulas
Zero video buffering

Rather than a box of numbers with multiplication rules, a matrix is a geometric function on space itself: it transforms every point in the plane at once. Watch shear, rotation, and determinant collapse through zero in live WebGPU vectors.

Fig 00 // The Complete 3-Stage Transformation

pkg-slim · 1.6MB 60 FPS WEBGPU

Complete Suite · Reactive Linear Operators

Three Transformations of Space

A single matrix transforms the infinite plane: shear slides points while preserving area, rotation turns the basis vectors, and shrinking determinant flattens space before flipping it.

scene.amx ↗

Engine: Reactive Always Block Basis: î = (1, 0), ĵ = (0, 1) Area Scale: det(M)

Fig 01 // Area-Preserving Shear: det = 1.0

pkg-slim · 1.6MB 60 FPS WEBGPU

01 · Area Invariance

Shear: Every Point Slides, Area Stays Constant

As k sweeps, (x, y) ↦ (x + ky, y). Horizontal lines stay still, vertical lines lean, and the unit square deforms into a parallelogram with unchanged base and height.

shear.amx ↗

Determinant: det = 1.0 (Exact) Invariant Line: x-axis (y = 0)

Fig 02 // 2×2 Rigid Rotation Matrix

pkg-slim · 1.6MB 60 FPS WEBGPU

02 · Coordinate Geometry

Rotation: Read the Columns to Find Basis Vectors

Columns of the matrix literally reveal where the basis vectors land: first column is î = (cos θ, sin θ), second column is ĵ = (-sin θ, cos θ).

rotation.amx ↗

Columns: [cos θ, -sin θ; sin θ, cos θ] Isometry: Rigid Distance Preserving

Fig 03 // Determinant Zero-Crossing & Plane Flip

pkg-slim · 1.6MB 60 FPS WEBGPU

03 · Dimensional Collapse

When Determinant Crosses Zero: The Flip

As coefficient d passes through zero, 2D space flattens into a 1D line (det = 0, non-invertible), then emerges on the other side mirror-flipped with negative orientation.

collapse.amx ↗

Singularity: det = 0 Singular Matrix Orientation: Negative Det = Reflected Plane

How this page works

Every figure is compiled live in your browser over WebGPU using Animatix declarative .amx scripts. Zero pre-rendered video files, zero runtime allocations.