jjietay/kaleidoscope

Kaleidoscope

Kaleidoscope makes a narrated video that teaches one topic. Each part of the video has its own animation style.

Claude writes the script, the storyboard and the scenes from what your conversation and your project already show. The engine speaks the script on your own computer, times each word and draws every frame with code. It uses no video model. Six reviewer agents then check the video in two rounds before it renders.

In Claude Code, in the conversation where the topic came up, ask:

Make a video on I2C for the BNO085, and tell its history as a 1920s newsreel.
A 1920s newspaper in a dark film gate. The headline reads: Machine learns by sending errors back. A white grease-pencil ring circles it.
Fig. 1The newsreel style, end frame. A paper spins in, and a grease pencil rings the headline. The story is Rumelhart, Hinton and Williams, Nature 323, 1986.

How a video is made

Claude plans and builds. The engine speaks, times and draws. The reviewers send fixes back to Claude.

→ SKILL.md

Pipeline figure. Panel a, plan and build: the main session writes script.md, storyboard.md and scenes.js; Chatterbox speaks; Whisper times each word; headless Chrome draws the frames; make check tests them. Panel b, review and render: six reviewer agents read a review pack, a compiler merges their reports, and after round 2 make final renders the MP4.
Fig. 2(a) Plan and build, from your topic to checked frames. (b) Review and render, two rounds of six agents with the high budget. Select the figure to see it at full size.
  1. script.md
    storyboard.md
    scenes.jsClaude writes
    One part for each idea, one style for each part, one scene for each part. Claude checks every fact before it writes the script.
  2. Chatterbox or KokorovoiceSpeaks the script. Chatterbox runs best on a GPU. Kokoro is small and fast on a CPU.
  3. Whisperword timingGives each word and each [#cue] a time in seconds. If a sentence does not match the script, the engine speaks it again.
  4. headless ChromeframesDraws each frame from the timeline with canvas, Three.js or Manim.
  5. make checkautomatic checksTests overlap, the safe area, text size and pacing. Claude also looks at every changed part, frame by frame.
  6. 6 reviewer agentsone or two roundsRead the review pack and send one fix list back. Claude fixes the scenes and builds again.
  7. make finalrenderChrome draws on the GPU and NVENC encodes, or the CPU does both when there is no GPU. The mix puts the music and the sound effects under the voice. verify checks the duration, the loudness and black frames. The result is an MP4 with soft subtitles and 48 kHz sound.

Frames from the gallery project

→ styles/library/

Every style draws with the same shared code in styles/library/. Each picture below is the end frame of one scene, with one module of that code. Select a picture to see it at full size.

Common parts: six faces, an arrow, two leader lines and a tick, each with its function name
common.jsEvery style uses these headers, labels, arrows and faces.
Flat props: a drone, barrels, a folder of tiles, a tank, cards and a GPU box, some with faces
flat.jsThe tank, the drone, the files and the boxes have faces.
Shape morph on navy: pink blobs join into one bar, then split into chunks
morph.jsShapes join into one bar or split into chunks.
Isometric buildings: one closed, one with the roof lifted to show pink blocks inside
iso.jsA roof lifts to show what happens inside a building.
Hand-drawn ink jars, a folder, a pencil, a stamp and ink faces
boil.jsThe ink lines change shape slightly 12 times a second, like a hand-drawn cartoon.
Paper cut-out shapes, a receipt, cards and two paper people, one holding a stop sign
paper.jsCard shapes have rough edges, and arms turn on split pins.
Pixel art: a shelf, a crate, a GPU, two small workers and a dialogue box
pixel.jsA 320 × 180 pixel canvas, scaled 6 times, shows typed dialogue.
Toy 3D: a soft tank, an axis gizmo, file cubes, a cart and a server tower
toy3d.jsSoft Three.js objects drop, land and cast a contact shadow.

Checked before render

Each reviewer starts cold, reads only the review pack and writes its report to a file.

→ agents/

Before the reviewers start, Claude reads contact sheets like this one. Then six agents check the video. A seventh agent joins their reports into one short fix list. Claude fixes the scenes and builds again. With the high budget, a second round checks the fixes.

A contact sheet: eight frames from the gallery project in a grid, each labelled with its scene name and time
Fig. 3The top of the gallery project's first contact sheet, made with make sheet gallery. Each frame shows its scene and its time.
  • video-factcheckEvery fact, number and formula, worked out again.
  • video-learnerA first-time viewer answers a quiz and says where it got lost.
  • video-alignmentThe picture shows what the voice says, at that moment.
  • video-overlapNo text or drawing covers another.
  • video-physicsMotion: jumps, pops, easing and weight.
  • video-overallLayout, legibility, colour meaning and pacing.
  • video-compilerJoins the six reports into one short fix list.

Music and sound effects made from code

The music plays about 13 dB under the voice and ducks gently when the voice speaks. The sound effects sit 7 to 12 dB under the voice.

→ SOUND.md

The engine makes its background music in engine/music.mjs and its sound effects in engine/sfx.mjs. It uses no samples, no AI models and no recordings, so there is no licence to clear. The same input always gives the same file. These are 30 s previews of the two approved tracks and of the sound effects.

  • current72 BPM · C Am F G

    A calm pad and a slow arpeggio, with no beat. This is the default track, and it suits any video.

  • lofi76 BPM · swing

    A lo-fi study beat: electric piano, bass, soft drums and vinyl hiss. Use it for a calm video that needs more energy.

  • sound effects12 sounds · engine/sfx.mjs

    Pop, click, tick, whoosh, swish, thud, stamp, paper, marker, pencil, chime and typing. A scene adds a sound at a cue with s.sfx('stamp', '#slam'). This demo plays all 12 over the music.

The 29 styles

Claude picks a style for each part from the type of idea in it. Two parts in a row never use the same style.

→ styles/README.md

Maths and diagrams 7

  • math-manimThe 3Blue1Brown look, drawn by Manim. The plane moves and formulas morph.
  • signal-graphNodes and edges. Pulses travel along the edges, and edge width shows weight.
  • pixel-gridA zoomed-in pixel grid with values. A kernel window slides over it.
  • single-lineOne line draws everything at a steady speed and never lifts.
  • shape-morphNo cuts. Each idea grows out of the previous shape.
  • whiteboardaDry-erase marker on a glossy board, written stroke by stroke.
  • blueprintaWhite lines on Prussian blue, drawn in drafting order with dimensions.

Characters and stories 7

  • flat-vectorFlat shapes with overshoot entrances. A growing shape changes the scene.
  • line-boilHand-drawn ink that boils, animated on twos. Faces act.
  • paper-cutoutCard layers with cut edges, stop motion and a parallax camera.
  • pixel-artA 320 × 180 canvas, a fixed palette, dithering and typed dialogue.
  • midcentury-toona1950s flat colour off a broken ink line. A presenter's hands do each step.
  • watercolourdBrush strokes paint themselves in, and washes bleed past the ink.
  • risographdTwo or three inks that multiply, with halftone dots and offset plates.

3D and space 6

  • isometricA miniature world of three-tone blocks. Roofs lift off to show the inside.
  • iso-infographicaA floating board with a route, label pins and counts that add up to a total.
  • toy-3dSoft pastel Three.js objects that land with weight and a contact shadow.
  • teardownaA real product in Three.js from its CAD files. Its layers lift apart.
  • desktop-flythroughaApps as paper cards on a sunlit desk. Voxel toys hop between them.
  • transit-mapaA metro map on paper. Lines grow from pen tips, and interchanges fall into place.

Data and evidence 9

  • data-storydOne chart per screen, drawn mark by mark by a pencil.
  • data-physicalaNumbers built as stacks of metal, acrylic and brass on a wooden base.
  • briefing-boardaAn enamel board with photos and magnets. One red stamp gives the verdict.
  • telestratoraFootage or a photo, frozen and drawn on with rings and marker arrows.
  • swiss-typeA 12-column grid, kinetic type, hard snaps and one signal colour.
  • dark-keynoteNear-black, one giant number and slow light sweeps.
  • hud-terminalMonospace on a character grid. Numbers roll and brackets lock on.
  • film-crtOne era of film or tape, with grain, gate weave and chroma shift.
  • newsreelaA 1920s newsreel in a silver film gate, with place cards, an iris and wipes.

a We adapted this style from Lemo-Opuscar by LemoLab (MIT). d We took details for this style from Lemo-Opuscar.

Install

One command checks your computer, asks 5 questions, shows the plan and installs only what you choose. A GPU is not necessary.

→ INSTALL.md

npx kaleidoscope-video

Later, /setup-kaleidoscope in Claude Code changes the token budget of the review:

  • high2 rounds, 6 reviewers, Opus for the hard checks.
  • medium1 round, 6 reviewers on Sonnet, the fact check on Opus.
  • low1 round, 2 reviewers on Sonnet.

INSTALL.md has the manual setup. Then ask for a video in the conversation where the topic came up:

  • Make a video explaining how the EKF fuses wheel odometry and the IMU.
  • Make a video on I2C for the BNO085, and tell its history as a 1920s newsreel.