Derivanto is a private calculus-learning app I built as a gift for my wife.
I did not want to make a generic course. I wanted to build a small world where calculus felt close, visual, and personal. Toñelo, our bear, became the companion through that world: present in the scenes, the pacing, and the small moments between ideas.
DerivantoOpen the live app
The Shape
The app walks from limits to the fundamental theorem in eight short chapters: Zeno's paradox, slope, derivatives, families of functions, integrals, the theorem itself, real-world examples, and a quiet closing chapter. Each one has a short opener, interactive scenes, exercises, Toñelo lines written for that moment, and a summary of what just clicked.
The math is real: notation, limits, tangent lines, Riemann sums, antiderivatives, and the fundamental theorem are all there. The tone is the difference. It is meant to feel like a conversation, not a textbook.
The Build
The app is built with React, TypeScript, Vite, and Tailwind CSS. Chapters are modular and lazy-loaded, and progress is stored locally with Zustand.
Most of the math visuals are custom: coordinate planes, curves, tangent lines, draggable points, sliders, area fills, Riemann sums, and formula chips. The formula editor uses mathjs, equations render with KaTeX, and the whole app works in Spanish and English through Paraglide.
Some ideas needed more than SVG and canvas, so I added Three.js / React Three Fiber scenes for surface slicing, Riemann prisms, and an orbital sandbox.
The Interesting Part
The hardest constraint was tone. A technical tutorial can explain calculus. A gift has to make the person feel invited into it.
That shaped the engineering too. Every string goes through i18n, the language can change mid-chapter without losing state, and exercises do not grade the user. They reveal the idea and let the person keep going.
It sits somewhere between education software, interactive essay, and personal gift.