Circuit Lab

Learn electricity on a 3D workbench — right in your browser.

Build the circuits from NCERT Class 8–10 Electricity on an illustrated bench: close the key, watch the needles swing and the charges flow, and read real values from a real circuit solver. Seven lessons, from Ohm's law to a street light that switches itself on at dusk. No plugin, no backend.

Features · Quick start · Shortcuts · How it works · Project structure · Roadmap

The hero image follows your GitHub theme — light or dark.

✦ Demo

✦ At a glance

✦ Features

Lessons

• 1 · Ohm's law — 1 to 4 cells, a colour-banded resistor (10 / 15 / 22 / 47 Ω), ammeter in series, voltmeter across. Record readings; the V–I graph is a straight line whose slope is R.
• 2 · Series vs parallel — two 6 V, 3 W torch bulbs. Rewire live, unscrew either bulb, compare two ammeters (going in, coming back).
• 3 · LED + resistor — board, breadboard, LED and a resistor picker. Under ~75 Ω the LED burns out.
• 4 · A switch — hold the push button to close the gap; an open switch has the full 5 V across it. Push (momentary) or toggle.
• 5 · Measuring current — carry the ammeter to three places in one loop and read the same 0.20 A. Then the two classic mistakes: across the bulb, and wrong way round.
• 6 · Brightness vs resistance — turn a 1 kΩ potentiometer and watch the LED dim along a live 1/R curve.
• 7 · Light sensor — LDR voltage divider into A0, a sketch with a limit, a serial monitor, and a desk lamp you dim until the street light switches itself on.

Learn

• Predict first — every lesson asks for a guess before you run it, then explains the answer.
• Steps that point — each step rings the parts it talks about on the bench.
• Goals — a short checklist per lesson; completed lessons are saved in the browser.
• Live circuit diagram — NCERT symbols, drawn from the same values; live wires animate.
• Sketch tab — board lessons show their Arduino-style sketch and light each line as it "runs".

Simulation — real values, not fakes

• Modified nodal analysis over a netlist: cells, resistors, ammeters, switches, bulbs, LEDs.
• LEDs are piecewise: off below Vf, Vf + 10 Ω above it, re-solved until no LED changes state.
• Bulb glow follows electrical power (P = I²R) against its rating; LED brightness follows current.

See

• Procedural parts — microcontroller board, breadboard with instanced holes, LEDs, resistors with real colour bands, push button, potentiometer, LDR, buzzer, cells, ammeter, voltmeter, bulbs, plug key, desk lamp. All built in code.
• Inked look — cel shading plus a screen-space edge pass for outlines, an orthographic bench camera, soft shadows on the cream page.
• Callouts — cards tied to parts by leader lines; select a part and they fold into pills.
• Moving charges — dots ride the wires to show conventional current, faster for more current.

Use anywhere

• Fold-away panels, light & dark themes, PNG snapshot, phone layout.
• Keyboard pan and turn, reduced motion respected, fallback message without WebGL.

✦ Quick start

Requires Node.js 18+ and npm.

git clone https://github.com/ImliStack/Circuit-Lab.git
cd Circuit-Lab
npm install
npm run dev        # → http://localhost:5182

Everything is generated in the browser — there are no models or data files to download.

Script	What it does
npm run dev	Dev server with hot reload on port 5182
npm run build	Static production build into dist/
npm run preview	Serve dist/ locally on port 5182

✦ Using the lab

Pick a lesson on the left. The parts drop onto the bench, the wires draw themselves and the callouts arrive. Read the steps on the right, answer the Predict question, then press Run (or Upload & run / Power on) in Try it yourself. Change the controls while it runs — the meters, the glow and the diagram follow at once. Finish the goals to mark the lesson done.

Click any part on the bench, its callout, its quick-pick card along the top or its row under On this bench. The camera eases in, the callouts fold into pills, a dashed ring marks the part, and the panel shows what it does, its circuit symbol and its live numbers. Zoom to it gets closer; Back to the lesson or Esc returns.

• Push button (lesson 4) — hold it on the bench with the mouse, or hold the big button in the panel.
• Ammeter (lesson 5) — choose a position and it is lifted to the new gap and re-wired.
• Potentiometer (lesson 6) — the Knob slider turns the knob on the bench.
• Desk lamp (lesson 7) — Room light dims the lamp and the whole bench with it.
• Bulbs (lesson 2) — unscrew and screw them back in from the panel.

Live readings at the top of the panel show the lesson's three key values; they flash when they change. The circuit diagram is drawn with NCERT symbols and the same values. Lesson 1 records a readings table and plots V against I; lesson 5 records the current at each position.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗