Andréa GourionEngineering Learning Systems
ENFR
Discuss a pilot

Interactive product · Bilingual system · Live chapter

The Kinetic Kernel · Linear algebra made manipulable

Make the dot product visible as angle, projection and signed magnitude.

Role
Creator, learning-experience designer and developer
Period
2024–present
Status
Public preview · active development
Fig. 01Interactive demo · dot product
Dot product of two vectors and projectionVectors u and v form a 55-degree angle. Their dot product is 6.88.uv55°projection
u⋅v=∥u∥ ∥v∥cos⁡θ\boldsymbol{u}\cdot\boldsymbol{v}=\lVert\boldsymbol{u}\rVert\,\lVert\boldsymbol{v}\rVert\cos\theta12cos⁡ ⁣(55∘)=6.8812\cos\!\left(55^{\circ}\right)=6.88

NoteThe dot product is the length of u multiplied by the signed projection of v onto u.

u⋅v=∥u∥×projection=4×1.72=6.88\begin{aligned}\boldsymbol{u}\cdot\boldsymbol{v}&=\lVert\boldsymbol{u}\rVert\times\text{projection}\\&=4\times1.72=6.88\end{aligned}
u=(40)\boldsymbol{u}=\begin{pmatrix}4\\0\end{pmatrix}v=(1.722.46)\boldsymbol{v}=\begin{pmatrix}1.72\\2.46\end{pmatrix}

Acute angle · positive projection · positive dot product

The angle determines the sign of the dot product.The Kinetic Kernel · public chapter
What I built
  • A bilingual chapter and editorial model
  • A reusable dot-product and projection interaction
  • Definitions, references, examples and exercises in one product
Open the live chapter ↗
Selected technologyReactViteKaTeXSVG

01 · Context + problem

The design challenge

I built The Kinetic Kernel because many rigorous linear-algebra objects remain difficult to inspect when the page stays entirely symbolic.

I did not want a visualization placed beside a textbook as a separate experience. I wanted formal content and manipulation to share one reading path.

02 · Approach

I build the system, not only the asset.

  1. 01

    I design chapter sections as reusable content and interaction patterns.

  2. 02

    I show algebraic and geometric representations of the same state.

  3. 03

    I build French and English as equivalent product paths.

04 · Observable outcome

What this project makes observable.

  • A working public chapter
  • A reusable component architecture
  • A bilingual, maintainable learning experience
Limits and status

I present the project as a functioning product and evolving platform. I do not claim adoption figures or measured learning outcomes.

05 · Technical approach

Technical approach

Selected technologyReactViteKaTeXSVG
01

Reusable interactive modules

The product is organized as a library of content patterns and mathematical interactions, loaded as each chapter needs them.

React · Vite

Why it mattersNew concepts can reuse the same application structure without rebuilding every interaction from scratch.

02

Shared graph infrastructure

Two- and three-dimensional interactions share coordinate, projection, pointer and vector-rendering primitives.

React · SVG · Canvas

Why it mattersGestures and visual conventions stay consistent as the library expands.

03

Notation separated from geometry

Formal expressions are rendered independently from the SVG objects learners manipulate.

KaTeX · SVG

Why it mattersMathematical readability and interactive behavior can evolve without turning either layer into a fixed image.

04

Equivalent bilingual paths

Language resources are structured separately from the components that present and manipulate the mathematics.

i18next · React

Why it mattersFrench and English can share the same interaction model while keeping substantive content in each language.

06 · Transfer

What I can transfer to another institution.

With this architecture, I demonstrate how a course-specific prototype can combine formal content, interaction, bilingual delivery and maintainable components.

Discuss a pilot