Animated Concept Coach
“Pick a concept, watch it animate — live in class.”
Illustrative team — open seats are real invitations.
- Build mode
- assemble on blocks
- Built on
- @k12vls/math-demonstrators
- Output
- interactive web (projector/board)
The brief
What it is, and why a teacher says yes
The pain point
Some concepts — regrouping, equivalent fractions, the unit circle — are far easier to show moving than to draw on a whiteboard. But building a clean animation per concept is out of reach for a teacher mid-lesson; they reach for “let me show you why we carry the one” and have only a marker and a static board.
What it does
Teacher picks a concept → the app projects the matching animated virtual-manipulative (base-10 regrouping, fraction bars, number lines, unit circle, and more) → teacher steps through it live in front of the class.
Why it's adoptable
It serves a live teaching moment a teacher already reaches for, needs no student accounts, and a single demonstrator drops in with one import. Nothing to assign, nothing to log in to — one screen, projected.
What the teacher receives — a synthetic example
27 + 15
ones combine 7 + 5 = 12 → ten slides up ↑
No login · no data leaves this screen.
Illustrative mockup. All example data is synthetic — no real student data.
The graduation signal
“Built” doesn't count — real, repeated use does. Here's the ladder.
- 1
Pilot
A teacher reaches for it the first time a concept is hard to draw and projects it live (teacher-side; students never touch it).
- 2
Active use
The same teacher reaches for it a second and third time — a different unit, a different concept — i.e. it became a reflex at “show, don't tell” moments (teacher-side).
- 3
Sustained MAU
Sustained teacher-side MAU during instruction across multiple lessons and units, not a one-time demo; the students reached are not “incidental” but the impact, estimated from classes served since they never log in (teacher-side).
For the AI Builder
How you build it
The honest build path — what it builds on, the rough assembly, the data flow, and the gaps the blocks don't give you for free.
Blocks it builds on
- @k12vls/math-demonstrators — a published-internally package of animated virtual manipulatives with per-demonstrator subpath exports. Twenty-three demonstrators ship today: area-model, attribute-comparer, base10, clock-face, coin-counter, comparison-balance, counting-objects-collector, discount-calculator, equation-balance, fraction-bars, fraction-equivalence, fraction-operations, integer-number-line, number-bonds, number-line-hopper, pythagorean-visualizer, recipe-scaler, shape-sorter, teen-number-builder, ten-frame-filler, ticket-splitter, unit-circle, and volume-builder.
- @k12vls/math-demonstrators/engine — the shared playback engine each demonstrator renders through (step / play controls). You drive demonstrators through this, not by hand-rolling animation.
- @k12vls/math-demonstrators/registry — the catalog you read to populate the concept picker, so the menu stays in sync with what actually ships.
- Per-demonstrator subpaths keep bundles small — but mind how you read the registry. Importing @k12vls/math-demonstrators/fraction-bars pulls in that demonstrator — it does not drag in the other 22. The catch: the shipped /registry itself imports and registers every demonstrator, so eagerly importing the registry into your projected page pulls the whole catalog and defeats the point. Use the registry as a build-time/label source — read it to know the names and subpaths — but build the picker so the actual demonstrator loads via its own subpath import (lazy/dynamic where the framework allows), so the projected page only ever holds the one concept on screen.
Rough assembly
- 1List — read @k12vls/math-demonstrators/registry for the concept picker's labels + subpaths (treat it as a name/label source, not something to ship eagerly — it imports the full catalog; see the bundle caveat).
- 2Pick — teacher selects a concept; the app imports that one demonstrator's subpath.
- 3Render — mount the demonstrator through @k12vls/math-demonstrators/engine in a large projector-friendly area.
- 4Step — surface the engine's playback controls (next/previous step, play/pause, restart, speed) so the teacher walks the class through it live; the engine drives the staging, you don't re-implement it.
- 5(No accounts, no network calls, no student data — see the contract caveat; the only thing the block writes locally is a sound/music on-off preference.)
The data flow
Caveats — the honest gaps
Scope boundaries
This is a live projection tool, not a student app: it deliberately does not save sessions, track which concepts were shown, or give students their own logins to drive demonstrators. The moment you add a “save my session,” account, or any per-student surface, it stops being a thin block-embed and starts touching data — leaving Tier 1.
For the AI Champion
Taking it to a teacher
The adoption kit — the pitch, the pain it lands on, the objections you'll hear, and what a real pilot looks like.
The 30-second pitch
“You know when you're at the board saying “let me show you why we carry the one” — and you're stuck drawing it? Pick the concept here and it projects a clean animation you step through live. Base-10 regrouping, fraction bars, the unit circle, more. Nothing to assign, no logins — you just put it on the board.”
The pain it lands on
The mid-lesson moment a teacher already reaches for — wanting to show a concept moving and having only a marker and a static whiteboard.
Objections → responses
“Is this one more thing to set up before class?”
No. You open it, pick the concept, and it's on the board. No student accounts, no assigning.
“Is it just a video I can't control?”
No — you step through it live, at your pace, while you talk. You're driving it, not playing a clip.
“Where does my students' data go?”
Nowhere. Students never log in or touch it. It's a projected animation with no accounts, no tracking, and no data leaving the room.
What a pilot looks like
The teacher uses it the first time a concept is hard to draw. The real signal is the second and third time — a different unit, a different concept — i.e. it became a reflex when they hit a “show, don't tell” moment. Sustained use across lessons, not a single demo.
The bar
Safeguarding & the pilot gate
The minimum conditions before any classroom use, and the data posture that keeps the solution honest.
Pilot gate
- Sponsoring adult
- A classroom teacher (or the sponsoring adult at a school, after-school program, or community setting) — the sponsoring-teacher gate applies program-wide.
- Minimum version
- A working concept picker populated from the registry, at least the demonstrators a real teacher would reach for rendering through the shared engine with step/play controls, projector-friendly — not a single hard-coded demo.
- Pilot setting
- A live class period during instruction, projected on the board at the mid-lesson “show, don't tell” moment.
- Success evidence
- The teacher reaches for it the first time a concept is hard to draw and projects it live — the Pilot rung of the Graduation signal.
- Stop condition
- The deployed page makes any network call, or anyone proposes adding analytics / “save session” / accounts — pause, because that breaks the inherited no-data contract that keeps it Tier 1.
Safeguarding
Lowest loadData touched
No student data — the teacher-selected concept loads a demonstrator that renders and steps locally; no student login, no PII, no uploads, no completed work, no telemetry, no network I/O. No student data is persisted anywhere. The only thing written is two device-local UI preferences — sound/music on-off — to localStorage (keys math-demonstrator-sound-enabled / -music-enabled); that's a benign local toggle, not student data or PII, and it never leaves the machine, so it doesn't move the rating. This holds because the embedded block ships an explicit no-student-data contract, inherited directly rather than re-argued per app.
Checklist
- Sponsoring teacher ✓ (required program-wide).
- Data-handling review n/a (no student data).
- Consent n/a (no student PII).
- Supervision = ordinary teacher-led classroom use (a single demonstrator drives it, not students).
One thing to verify
That the consumer app you built genuinely added nothing the block didn't — no analytics snippet, no “save session,” no account. Confirm the deployed page makes no network calls during use, so the inherited no-data claim holds in practice.
What would change the load
The Lowest profile holds only as long as the app stays a thin block-embed. Two distinct lines to keep straight: (a) any telemetry/analytics breaks the no-telemetry starter contract even before it touches student data — don't add it; (b) what actually raises the safeguarding load is tying anything to a student/class/roster — student logins, student-driven demonstrator sessions saved per child, work captured and shared, per-class usage history, or personalized feedback. Each of those puts student data in play and pushes this above Lowest. The current no-student-data profile is inherited from the block's contract; it holds until one of those is added, at which point this leaves Tier 1.
Want to build Animated Concept Coach?
Tell us this starter caught your eye — or browse the others first.