main quev page (Github version).
Featherless or OpenRouter API can be used. (github version) *NOTE : on the deployed page you do not need your own API
project banner

Quev AI Professor

Learning doesn't have to be just text.

An AI tutor that doesn't reply with a wall of paragraphs — it stands at a chalkboard, speaks, gestures, writes and draws your answer.

Inspiration

Ask any AI study tool to explain refraction and you get six paragraphs. The student reads it, nods, and understands nothing — because the thing they actually needed was a diagram, a pointing finger, and someone saying it out loud.

Real teaching isn't a text response. It's a performance. A teacher talks, pauses, draws on the board, points at the drawing, and checks you're following. Every AI tutor we tried had skipped that part entirely.

Reading is not the same as understanding. We wanted to build the difference.

What it does

Quev AI Professor is a web app where an animated professor teaches you.

You ask a question in plain words. Instead of returning prose, the AI returns a structured teaching plan — a small JSON score describing what the professor should say, which gestures to make, what to write on the chalkboard, what to sketch, and when each of those should happen. A stage director in the browser reads that score and performs it: speech synthesis for the voice, GSAP for the body, live SVG stroke animation for the chalk.

The result is a lesson, not an answer.


🎓 An actual professor	A rigged SVG character with a head, torso, arms, pupils, brows, tassel and mouth — driven by 10 named gestures and 5 facial expressions
🗣️ Speaks while it teaches	Text-to-speech tuned to a lower, more deliberate lecturing voice, with the mouth synced to the audio
✏️ Writes and draws live	Text appears on the chalkboard stroke by stroke, plus a library of 18 hand-built chalk sketches — atom, DNA, rocket, tree, lightbulb, cloud, heart, moon and more
⏱️ Choreographed, not sequential	Steps carry absolute timestamps, so the professor can point while speaking — like a real lesson, not a queue of animations
🖼️ Pulls in visual references	Relevant Wikipedia imagery appears alongside the board

How it works

        Student question
               │
               ▼
     ┌───────────────────┐
     │  Featherless API  │   DeepSeek-V3 · strict JSON mode
     │  (server-side)    │   the key never reaches the browser
     └───────────────────┘
               │
               ▼
      JSON teaching plan
               │
               ▼
   ┌────────────────────────┐
   │   AI Stage Director    │   parse · sanitise · clamp · schedule
   └────────────────────────┘
               │
               ▼
   ┌────────────────────────┐
   │    Professor Engine    │   GSAP timelines over a rigged SVG
   └────────────────────────┘
               │
               ▼
      A performed lesson

Custom Characters

You can also change the character SVG with other own custom characters with same id for parts and joints to use that as your AI tutor's look. Some custom characters are in the github repo : https://github.com/devsonal/Quev-AI-Professor/tree/master/Quev-tutor/other_professorSVGs

The API response is the lesson

This is the core idea of the project. The model is never asked for an explanation — it's asked for a score:

{
  "say": "Gravity is what keeps a planet in orbit.",
  "expression": "thinking",
  "steps": [
    { "do": "write", "board": "Gravity:\nF = G·m₁·m₂/r²", "wipe": true, "at": 0, "hold": 1.2 },
    { "draw": "apple", "at": 2 },
    { "do": "point", "at": 2.4 },
    { "do": "explain", "say": "The heavier the objects, the stronger the pull.", "at": 3,
      "tweak": { "headTilt": -8, "look": { "x": -0.5, "y": -0.2 }, "smile": 1.2 } }
  ]
}

Each field maps to something physical:

say → the spoken line, and the only thing rendered into the chat log. The JSON itself never leaks into the conversation.
expression → neutral · happy · surprised · thinking · angry
do → one of 10 named gestures: wave nod shake point write think explain talk lookAround celebrate
board → text written on the chalkboard, stroke by stroke
draw → a chalk sketch, either from the built-in library or as custom SVG path data
at → absolute seconds on a shared timeline, which is what turns a list of steps into choreography
tweak → small hand-tuned accents on top of a gesture

The model never touches the character

The one rule the whole architecture is built around: the AI gets a vocabulary, not the controls. It never receives raw SVG, CSS, selectors or transforms. It can only request named gestures plus a tweak object whose every value is clamped to a documented range:

Control	Range	Meaning
`headTilt`	−18 to 18	Head rotation in degrees
`lean`	−8 to 8	Gentle torso rotation
`leftArm`	−20 to 170	Left arm pose
`rightArm`	−20 to 175	Right arm pose
`bounce`	−36 to 0	Small upward body movement
`look.x`, `look.y`	−1 to 1	Pupil direction
`smile`	0.65 to 1.45	Smile intensity (skipped while speech owns the mouth)

Out-of-range values are clamped. Unknown gestures are dropped. Every tweak returns to neutral after its hold, and the full rig resets to idle after each performance. A plan can be complete nonsense and the professor still looks composed.

Three layers

1. The Professor Engine — the character rig.

The SVG artwork is mapped to named parts (root, head, torso, armLeft, armRight, pupilLeft, pupilRight, browLeft, browRight, mouthOpen, mouthSmile, tassel, writeLine), each with its own pivot point so the head rotates around the neck and the arms around the shoulders rather than around a bounding box.

On top of that sit:

A neutral pose every gesture resets to, so poses never accumulate drift across a long lesson
A gesture library of premade GSAP timelines, plus a register() hook to add new ones
A part-ownership map — the director knows wave uses the left arm and head, point uses the right arm and head, lookAround uses the pupils — so two gestures that would fight over the same limb never run in parallel. wave + nod is fine; point + write is not, and gets serialised
An ambient idle loop — breathing, blinking, a swaying tassel — so the professor is never a frozen image between questions
Expression control driven through the brows, eyes and mouth
Mouth sync, where speak(true/false) drives the open/smile mouth shapes against the live speech
Chalk rendering, where board text and sketches are animated by running SVG path dash offsets, so writing appears at a human speed instead of popping into existence

2. The AI Stage Director — the bridge between language and motion.

It builds the system prompt, keeps a short rolling chat memory for follow-ups, calls the model, and turns the reply into a performance. The parts that make it survive contact with a real LLM:

Strict JSON mode on the request, so the model physically can't ramble
A forgiving parser that strips markdown fences and extracts the outermost JSON object from whatever comes back
A one-shot repair prompt — a malformed reply is fed straight back with "fix this to strict JSON only" before anything is shown to the student
A timeline resolver that reads the at values and decides what runs sequentially, what runs in parallel, and what has to be serialised because of a part conflict
A live status counter, so a cold model reads as "warming up, 6s" rather than a frozen page
An offline brain that takes over if the AI is unreachable, so the demo never dies mid-lesson
A hard stop that kills speech, gestures and timers instantly and resets the pose

3. The inference layer — Featherless AI running DeepSeek-V3, called server-side.

The first version ran entirely in the browser and asked each student to paste their own API key and pick a provider and a model. That's fine for a developer demo and useless for the person we actually built this for — a student who wants to understand refraction. Moving the call server-side removed the key from the client, deleted the settings panel, and turned a three-step setup into opening a URL.

Why DeepSeek-V3

The director needs a model that emits clean JSON fast. We benchmarked the real director prompt against the Featherless catalogue:

DeepSeek-V3-0324 — the pick. Best teaching plans, actually reaches for the drawing commands when a concept calls for one, honours strict JSON mode, ~3–8s.
Reasoning models (R1, V3.2-Speciale) — rejected. They spend 10–30s emitting thinking tokens before the first useful character. On stage that reads as a broken page.
Qwen3-30B-A3B — fastest overall (~2.4s warm) but weaker plans. Kept as a fallback for when the primary model is cold or busy.

Featherless gives flat-rate access to open-source models through one OpenAI-compatible API, so the whole thing runs without touching a GPU.

Tech stack

Layer	Technology
Animation	GSAP 3.12 — timelines, per-part pivots, parallel choreography
Character	Hand-rigged SVG, animated stroke-by-stroke for chalk
Frontend	Vanilla JavaScript — no framework, no build step, no bundler
AI	Featherless AI API → DeepSeek-V3-0324 (fallbacks: DeepSeek-V3.2, Qwen3-30B-A3B)
Speech	Web Speech API (`speechSynthesis`), voice-tuned and mouth-synced
References	Wikipedia API for related imagery
Markup	HTML, CSS

One CDN script for GSAP. That's the entire front-end dependency list.

Challenges we ran into

LLMs are unreliable choreographers. Early versions let the model return free-form instructions, and it invented gestures that didn't exist, set arms to 400°, and produced doodles that looked like nothing. The fix was to make the instruction set closed: named gestures only, every numeric value clamped, a curated drawing library, and a full rig reset after each performance.

Models ramble instead of returning JSON. Solved in three layers — strict JSON mode on the request, a parser that digs the object out of whatever comes back, and a repair prompt as the last line of defence.

Chrome loads TTS voices asynchronously. The classic silent failure: the mouth moves and nothing is heard, because getVoices() returns an empty array on the first call. We warm the voice list at startup and re-resolve when it populates.

Slow models look like crashes. A cold serverless model can take twelve seconds, and silence reads as a bug. A visible counter that explains the model is warming up fixed more of the experience than shaving two seconds would have.

Parallel gestures fight over limbs. Two timelines animating the same arm produce a twitching mess. The part-ownership map was the answer — the director checks for conflicts before it runs anything in parallel.

What we learned

Constraining an LLM is more valuable than empowering it. The professor became reliable the moment we took away its freedom and gave it a vocabulary instead.
Latency is a design problem, not just an engineering one.
Asking a user for an API key is asking them not to use your product.
A JSON schema is a surprisingly good interface between "thinking" and "performing." Swap the model, swap the character, swap the renderer — the contract holds.

The team


Aqshai	Character & Animation Engine	Professor rig, gesture system, chalk rendering, visual experience
Sonal	Frontend & API	Frontend development, API integration, stage director, user experience
Dithurshan	Design & Testing	Visual design, testing, refining the learning experience