Leela (लीला)

Leela (लीला) is an open-source reactive animation engine designed for one purpose: making interactive explanations.

The name means “play” or “divine game” in Sanskrit, the idea that reality itself is a playful unfolding. Leela is a tool for building small interactive worlds that help people understand complex systems through direct manipulation.

The Problem

The best explanations are interactive. When Bret Victor showed you could drag a variable and watch a rocket trajectory update in real-time, he demonstrated something fundamental: understanding deepens when you can play with a system.

But building these interactive explanations is hard. You need animation infrastructure, reactive state management, smooth interpolation, responsive layout, accessible interactions, and you need all of it to work together. Most authors give up and use static diagrams or pre-rendered videos.

Leela aims to lower this barrier.

What Leela Does

Leela provides a reactive animation runtime where:

• Values are reactive: Change one variable and everything that depends on it updates automatically, with smooth interpolation.
• Animations are declarative: Describe what should happen, not how to tween it frame by frame.
• Interactions are first-class: Drag, scrub, hover, focus, all interaction types produce reactive values that drive the animation graph.
• Layout is constraint-based: Elements position themselves relative to each other through constraints, not absolute coordinates.

Use Cases

• DataFolks interactive modules: The chapters in the garden will use Leela to let readers trace a packet through a network, scrub through a UPI transaction timeline, or drag a slider to see how encryption strength affects vulnerability.
• Technical blog posts: Any author who wants to add interactive diagrams to their writing.
• Educational tools: Teachers building explorable explanations for their students.
• Game UI prototyping: Rapid iteration on reactive interfaces.

Architecture Decisions

• Framework-agnostic: Leela is a runtime, not a React/Svelte/Vue library. It renders to Canvas or SVG and can be embedded in any web framework via a thin adapter.
• Declarative graph: The animation state is a directed acyclic graph of reactive values. Changes propagate automatically.
• No timeline: Leela doesn’t use a timeline-based animation model. Animations are responses to state changes, not scripted sequences. This makes interactivity natural rather than bolted on.
• Lightweight: Target bundle size under 15KB gzipped for the core runtime.

Status

Architecture and spec phase. The reactive value graph is designed. Building the first proof-of-concept renderer.

The DataFolks chapters in the garden will be the first real-world test of the engine.