Andréa GourionInteractive scientific content
ENFR
Contact

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
2026
Status
Public preview · active development
Discipline
Linear algebra · public bilingual learning product

Grab the u and v endpoints

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 θ12 cos(55°) = 6.88

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

u · v = ‖u‖ × signed projection
= 4 × 1.72 = 6.88
u = (4, 0)Tv = (1.72, 2.46)T

Acute angle · positive projection · positive dot product

Fig. 01 · The angle determines the sign of the dot product.The Kinetic Kernel · public chapter
What I produced
  • 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 · Constraints

What the project had to respect.

  • Keep mathematics and interaction synchronised
  • Support English and French content
  • Make complex interactive content responsive
What was produced
  • A bilingual chapter and editorial model
  • A reusable dot-product and projection interaction
  • Definitions, references, examples and exercises in one product

03 · How it was built

How I built the content.

  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.

05 · Work and scope

What this work shows.

Materials produced

  • Public working application
  • Product design and web development
  • Public chapter and interactive component shown

Scope of this presentation

The public chapter lets you explore the content and try the interactions I designed and developed.

The presentation concerns the product and its interactions, without a study of their effect on learning.

Open the public chapter

Visible results

  • A working public chapter
  • Interactive components that can be reused
  • A bilingual learning experience that can be updated
Limits and status

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

06 · Relevance for your organisation

What this approach makes possible.

I can design and develop a scientific interaction within a teaching sequence led by your team. Instructors approve the content; together we define the languages, integration environment and documentation. Future changes to the code require the technical skills agreed for the project.

Is your team preparing similar content?

Explore the eight-week pilot Ask me a question

07 · 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.