ConceptViz

Turn equations into artifacts you can drag.

ConceptViz is a Claude-powered prompt and reference app that transforms technical concepts — physics, math, machine learning, research figures — into interactive React artifacts in the style of 3Blue1Brown and Cleo Abram.

Describe an idea. Get a living explanation.

Live Demo · Quick Start · Gallery · Docs

---

What this is

Three things, shipped together:

• A system prompt (prompts/conceptviz.md) you can paste into any Claude Project and use standalone.
• A modular source (prompts/modules/) the canonical prompt is assembled from — edit small focused files, not a monolith.
• A reference Next.js app that demonstrates the full loop: paste a concept, Claude generates the artifact via the Anthropic API, the result renders in a Sandpack iframe with a one-click iteration panel.

What this is not

• Not a chart library.
• Not a slide deck generator.
• Not a general-purpose UI builder.
• Not comprehensive — each artifact teaches one concept, deeply.

The five principles

Every artifact produced by the ConceptViz prompt honors these:

1. Intuition before notation. Show the idea moving on screen before a single symbol appears.
2. One concept, one artifact. Pick the single load-bearing idea and build the clearest possible window into it.
3. The user is the animator. Every core parameter is exposed as a slider, toggle, or drag handle.
4. Motion is meaning. Animation encodes the mathematics itself — not decoration.
5. The aha moment is the product. Identify the moment of insight first; work backwards from there.

Read the full design principles.

Gallery

The examples/ folder contains a curated v1 set. Each was generated by the prompt and included as evidence.

Example	Domain	What it teaches
Fourier Transform	mathematics	Any periodic signal is a sum of sine waves — drag harmonics, see the shape.
Gradient Descent	machine-learning	A ball rolling downhill. Turn the learning rate up until it explodes.
Bayes' Theorem	data-statistics	Why positive tests for rare diseases usually mean nothing. Dot grid of 1000.
Softmax Temperature	machine-learning	How language models go from precise to unhinged. Drag temperature, watch.

Contributors: see examples/README.md for a list of good-first-contribution examples.

Quick Start

git clone https://github.com/RISHI168/conceptviz.git
cd conceptviz
npm install
cp .env.example .env.local
# Add your ANTHROPIC_API_KEY to .env.local
npm run dev

Open http://localhost:3000. Full setup guide: docs/getting-started.md.

Using the prompt without the app

If you just want the prompt:

1. Copy prompts/conceptviz.md.
2. Paste into a Claude Project's custom instructions at claude.ai.
3. Describe a concept, upload a figure, or paste an equation.

See docs/using-the-prompt.md for details.

Architecture

┌────────────┐  system prompt  ┌────────────────┐
│ Next.js    │─────loaded──────│ prompts/       │
│ API routes │                 │  conceptviz.md │
└─────┬──────┘                 └────────┬───────┘
      │                                 │
      │                         assembled from
      │                                 │
      │                        ┌────────▼───────┐
      │                        │ prompts/       │
      │                        │  modules/      │
      │                        └────────────────┘
      │
      │ POST /api/generate
      │ POST /api/iterate
      ▼
┌─────────────┐     parsed JSX     ┌──────────────┐
│ Anthropic   │────────────────────▶│ Sandpack     │
│ Claude API  │                     │ iframe       │
└─────────────┘                     └──────────────┘

Full architecture: docs/architecture.md.

Project structure

conceptviz/
├── prompts/                     ← The prompt, modular + assembled
│   ├── conceptviz.md            ← Canonical prompt (built artifact)
│   └── modules/                 ← Source modules
├── app/                         ← Next.js 14 App Router
│   ├── page.tsx                 ← Gallery (landing)
│   ├── create/                  ← Workbench (generate + iterate)
│   ├── example/[slug]/          ← Single-example viewer
│   └── api/                     ← Generate and iterate routes
├── components/                  ← React components
├── lib/                         ← Client and server utilities
├── examples/                    ← Gallery content + standalone evidence
├── evals/                       ← Rubric and scorecard
├── docs/                        ← All documentation
└── scripts/                     ← Build and validation scripts

Docs

• Getting started — run it locally in 3 minutes
• Using the prompt — standalone usage without the app
• Design principles — the 3B1B/Cleo influence, deeper rationale
• Architecture — how the app works end-to-end
• Extending — adding new domain playbooks
• Contributing examples — submitting to the gallery
• Prompt engineering notes — why the prompt is structured this way

Contributing

PRs welcome. See CONTRIBUTING.md for the overall flow and CODE_OF_CONDUCT.md for community standards.

The best first contributions are new gallery examples — see docs/contributing-examples.md for the submission process and examples/README.md for a list of concepts we'd love coverage of.

License

MIT. See LICENSE.

Credits

• Built on Claude by Anthropic.
• Rendering via Sandpack by CodeSandbox.
• Pedagogical north stars: Grant Sanderson (3Blue1Brown) and Cleo Abram.