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.