Because staring at truth tables is so 1960s.
A ridiculously over-engineered logic gate simulator that makes Boolean algebra look way cooler than it has any right to be.> Because staring at truth tables is so 1960s.A stunning, modern web application for building and simulating digital logic circuits with a beautiful cyberpunk aesthetic.
LogSim is a web-based digital logic circuit simulator that lets you drag, drop, and connect logic gates like you're building with LEGO blocks, except the blocks glow neon colors and make you feel like a hacker from a sci-fi movie.A ridiculously over-engineered logic gate simulator that makes Boolean algebra look way cooler than it has any right to be.
Built with Next.js 14, TypeScript, and an unhealthy amount of Framer Motion animations.
Interactive Circuit Building
-
Drag gates onto the canvas without your mouse fighting you
-
Click to connect wires (they actually show up where you put them)LogSim is a web-based digital logic circuit simulator that lets you drag, drop, and connect logic gates like you're building with LEGO blocks, except the blocks glow neon colors and make you feel like a hacker from a sci-fi movie.## Features
-
Delete gates by selecting them and hitting Delete (revolutionary, I know)
-
Gates snap precisely where you drop them (took way longer to get right than it should have)
The GatesBuilt with Next.js 14, TypeScript, and an unhealthy amount of Framer Motion animations.### Core Functionality
-
AND, OR, NOT, NAND, NOR, XOR, XNOR
-
Plus INPUT and OUTPUT gates because circuits need those- Interactive Canvas - Drag-and-drop gates with smooth animations
-
Each gate has its own color scheme because why not
Real-Time Simulation
-
Watch signals propagate through your circuit- Real-Time Simulation - Watch signals propagate with animated pulses
-
Wires glow green when active, pink when inactive
-
Gray when they're just hanging out doing nothingInteractive Circuit Building- Input Switches - Toggle between 0 (red) and 1 (green/glowing)
-
Simulation speed you can actually adjust
-
Drag gates onto the canvas without your mouse fighting you- Output LEDs - Light up based on circuit logic
Pre-Built Examples
- Click to connect wires (they actually show up where you put them)- Truth Table Modals - Hover over gates to see truth tables
Because nobody wants to build a 4-bit ripple carry adder from scratch on their first try:
-
Half Adder (the gateway drug)- Delete gates by selecting them and hitting Delete (revolutionary, I know)- Pre-built Examples - Half Adder, Full Adder, 4-bit Ripple Carry Adder, 2-to-1 MUX, Basic ALU
-
Full Adder (now we're talking)
-
2-to-1 Multiplexer (gets interesting)- Gates snap precisely where you drop them (took way longer to get right than it should have)
-
Basic ALU (showing off a bit)
-
2-Bit Ripple Carry Adder (okay fine, we're showing off a lot)### Available Logic Gates
Tutorial System****The Gates- AND, OR, NOT - Basic gates
A 7-step walkthrough that teaches you the basics without treating you like you've never seen a computer before.- AND, OR, NOT, NAND, NOR, XOR, XNOR- NAND, NOR - Universal gates
Truth Tables- Plus INPUT and OUTPUT gates because circuits need those- XOR, XNOR - Exclusive gates
Click any gate to see its truth table. Yes, even the ones you definitely already know.- Each gate has its own color scheme because why not- Each gate has distinct, beautiful icons with glow effects when active
You'll need Node.js installed. If you don't have it, go get it. We'll wait.Real-Time Simulation### UI/UX Design
# Clone this bad boy
git clone <your-repo-url>- Wires glow green when active, pink when inactive- **Glassmorphism** - Beautiful frosted glass effect cards
cd maamnumberdedo
- Gray when they're just hanging out doing nothing- **Smooth Animations** - Powered by Framer Motion
# Install dependencies (using yarn because it's better, fight me)
yarn install- Simulation speed you can actually adjust- **Glowing Wires** - Animated signal flow visualization
# Fire it up- **Micro-interactions** - Satisfying hover effects and transitions
yarn dev
```**Pre-Built Examples**- **Gradient Backgrounds** - Purple-blue-pink vibes everywhere
Open [http://localhost:3000](http://localhost:3000) and prepare to be moderately impressed.Because nobody wants to build a 4-bit ripple carry adder from scratch on their first try:
## How to Use It- Half Adder (the gateway drug)### Educational Features
1. **Start on the landing page** - It's pretty, we spent time on it- Full Adder (now we're talking)- **Learn Mode** - Detailed descriptions for each gate
2. **Click "Start Building"** - Takes you to the simulator
3. **Check the tutorial** - Or don't, your funeral- 2-to-1 Multiplexer (gets interesting)- **Tutorial Overlay** - Interactive first-time user guide
4. **Drag gates from the palette** - Left side, can't miss it
5. **Click output dots to start wiring** - They're the glowing circles- Basic ALU (showing off a bit)- **Truth Tables** - Complete truth tables for all gates
6. **Click input dots to complete the wire** - Boom, connected
7. **Toggle INPUT gates** - Click them to switch between 0 and 1- 2-Bit Ripple Carry Adder (okay fine, we're showing off a lot)- **Quick Tips** - Helpful hints in the info panel
8. **Watch the magic happen** - Signals flow, circuits compute
9. **Delete stuff** - Select a gate, hit Delete
10. **Try the examples** - Load button in the toolbar
**Tutorial System**### Controls & Features
## Tech Stack
A 7-step walkthrough that teaches you the basics without treating you like you've never seen a computer before.- **Keyboard Shortcuts** - Delete, Undo, Redo (Ctrl+Z/Y)
Because apparently listing your dependencies is a thing now:
- **Simulation Controls** - Play/Pause, Reset, Speed adjustment
- **Next.js 14.2.5** - React framework that makes routing not painful
- **TypeScript** - JavaScript but your IDE actually helps you**Truth Tables**- **Save/Load** - Export circuits as JSON
- **Framer Motion 11.3.19** - Makes things move smoothly
- **Tailwind CSS 3.4.1** - Utility classes go brrrrClick any gate to see its truth table. Yes, even the ones you definitely already know.- **Export** - Save circuit as PNG image
- **Lucide React** - Icons that don't look like they're from 2005
- **Info Panel** - Gate count, connections, active signals
## Project Structure
## Getting Started
app/## Getting Started
├── page.tsx # Landing page with gradient backgrounds
├── layout.tsx # Root layout (metadata lives here)You'll need Node.js installed. If you don't have it, go get it. We'll wait.
├── globals.css # CSS that actually matters
└── simulator/### Prerequisites
└── page.tsx # Where the magic happens
components/
├── Canvas.tsx # The main circuit editor# Clone this bad boy- npm or yarn
├── GatePalette.tsx # Drag gates from here
├── Toolbar.tsx # Buttons that do thingsgit clone <your-repo-url>
├── InfoPanel.tsx # Circuit info sidebar
├── TruthTableModal.tsx # Pop-up truth tablescd maamnumberdedo### Installation
└── TutorialOverlay.tsx # Hand-holding for beginners
lib/
├── gateLogic.ts # The actual Boolean logic# Install dependencies (using yarn because it's better, fight me)1. **Install dependencies**
└── exampleCircuits.ts # Pre-built circuits
yarn install ```bash
types/
└── circuit.ts # TypeScript types for everything npm install
yarn dev
We spent an embarrassing amount of time getting the drag-and-drop to feel right. Here's what makes it work:
- `dragMomentum={false}` - No physics simulation
- `dragElastic={0}` - No rubber-banding ```bash
- `dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}` - Smooth but responsive
- Pixel-perfect positioning with `Math.round()` - Gates stay where you put themOpen [http://localhost:3000](http://localhost:3000) and prepare to be moderately impressed. npm run dev
- Transform reset after drag - No accumulated offset bugs
Because honesty is refreshing:
- Open your browser
-
Can't save circuits yet (working on it)
-
Can't export to image yet (also working on it)1. Start on the landing page - It's pretty, we spent time on it Navigate to http://localhost:3000
-
No undo/redo yet (definitely working on it)
-
The delete button sometimes feels judgmental2. Click "Start Building" - Takes you to the simulator
-
Wire routing could be smarter
-
Mobile experience exists but isn't amazing3. Check the tutorial - Or don't, your funeral### Build for Production
Good question. Originally started as a learning project for digital logic. Then we discovered Framer Motion. Then we discovered Tailwind animations. Then we discovered neon gradients. Things escalated.5. Click output dots to start wiring - They're the glowing circles```bash
Now it's a fully-functional circuit simulator with more visual polish than some production apps.6. Click input dots to complete the wire - Boom, connectednpm run build
Found a bug? Wire not connecting? Gate doing weird things? Open an issue.8. Watch the magic happen - Signals flow, circuits compute```
Want to add a feature? Pull requests welcome. Just keep the code clean and the comments sarcastic.9. Delete stuff - Select a gate, hit Delete
MIT License - Do whatever you want with this. Build the next great circuit simulator. Use it to teach students. Use it to procrastinate. We won't judge.
-
Boolean algebra for being surprisingly visual2. Place Components - Add INPUT switches and OUTPUT LEDs
-
The Next.js team for making React development bearable
-
Framer Motion for making everything look 10x betterBecause apparently listing your dependencies is a thing now:3. Connect Wires - Click output points and drag to input points
-
Coffee for making this possible
-
Stack Overflow for... you know4. Toggle Inputs - Click INPUT gates to switch between 0 and 1
---- Next.js 14.2.5 - React framework that makes routing not painful5. Watch Magic - See signals propagate through your circuit in real-time!
Built with questionable life choices and an excessive amount of CSS animations.- TypeScript - JavaScript but your IDE actually helps you6. Learn - Enable Learn Mode for detailed gate descriptions
If this helped you understand logic gates even a tiny bit, we've succeeded.- Framer Motion 11.3.19 - Makes things move smoothly7. View Truth Tables - Click the info icon on any gate
If you just came here for the pretty colors, that's cool too.- Tailwind CSS 3.4.1 - Utility classes go brrrr
- Lucide React - Icons that don't look like they're from 2005## Pre-built Circuits
Adds two 1-bit numbers (A, B) producing Sum and Carry outputs using XOR and AND gates.
app/### Full Adder
├── page.tsx # Landing page with gradient backgroundsAdds three 1-bit numbers (A, B, Carry-in) producing Sum and Carry-out.
├── layout.tsx # Root layout (metadata lives here)
├── globals.css # CSS that actually matters### 4-bit Ripple Carry Adder
└── simulator/Cascaded full adders that add two 4-bit binary numbers.
└── page.tsx # Where the magic happens
### 2-to-1 Multiplexer
components/Selects one of two inputs based on a select signal using AND, OR, NOT gates.
├── Canvas.tsx # The main circuit editor
├── GatePalette.tsx # Drag gates from here### Basic 1-bit ALU
├── Toolbar.tsx # Buttons that do thingsPerforms AND, OR, or ADD operations based on control signals.
├── InfoPanel.tsx # Circuit info sidebar
├── TruthTableModal.tsx # Pop-up truth tables## 🛠️ Tech Stack
└── TutorialOverlay.tsx # Hand-holding for beginners
- **Framework**: Next.js 14+ (App Router)
lib/- **Language**: TypeScript
├── gateLogic.ts # The actual Boolean logic- **Styling**: Tailwind CSS
└── exampleCircuits.ts # Pre-built circuits- **Animations**: Framer Motion
- **Icons**: Lucide React
types/- **Confetti**: canvas-confetti
└── circuit.ts # TypeScript types for everything- **Export**: html2canvas
We spent an embarrassing amount of time getting the drag-and-drop to feel right. Here's what makes it work:├── app/
│ ├── layout.tsx # Root layout with fonts
- `dragMomentum={false}` - No physics simulation│ ├── page.tsx # Landing page
- `dragElastic={0}` - No rubber-banding│ ├── simulator/
- `dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}` - Smooth but responsive│ │ └── page.tsx # Main simulator page
- Pixel-perfect positioning with `Math.round()` - Gates stay where you put them│ └── globals.css # Global styles
- Transform reset after drag - No accumulated offset bugs├── components/
│ ├── Canvas.tsx # Interactive circuit canvas
## Known Issues│ ├── GatePalette.tsx # Gate selection sidebar
│ ├── Toolbar.tsx # Top control buttons
Because honesty is refreshing:│ ├── InfoPanel.tsx # Circuit statistics
│ ├── TruthTableModal.tsx # Truth table display
- Can't save circuits yet (working on it)│ └── TutorialOverlay.tsx # First-time tutorial
- Can't export to image yet (also working on it)├── lib/
- No undo/redo yet (definitely working on it)│ ├── gateLogic.ts # Gate evaluation logic
- The delete button sometimes feels judgmental│ └── exampleCircuits.ts # Pre-built templates
- Wire routing could be smarter└── types/
- Mobile experience exists but isn't amazing └── circuit.ts # TypeScript types
Good question. Originally started as a learning project for digital logic. Then we discovered Framer Motion. Then we discovered Tailwind animations. Then we discovered neon gradients. Things escalated.
- Cyberpunk Meets Education - Stunning visuals that make learning fun
Now it's a fully-functional circuit simulator with more visual polish than some production apps.- Apple-level Polish - Every interaction feels buttery smooth
- Neon Accents - Electric blue, pink, purple, and green highlights
- Micro-interactions - Satisfying feedback for every action
Found a bug? Wire not connecting? Gate doing weird things? Open an issue.- Responsive - Works beautifully on desktop and tablets
Want to add a feature? Pull requests welcome. Just keep the code clean and the comments sarcastic.## ⌨Keyboard Shortcuts
Ctrl+Z- Undo (coming soon)
MIT License - Do whatever you want with this. Build the next great circuit simulator. Use it to teach students. Use it to procrastinate. We won't judge.- Ctrl+Y - Redo (coming soon)
-
Boolean algebra for being surprisingly visualPerfect for:
-
The Next.js team for making React development bearable- Computer Science students learning digital logic
-
Framer Motion for making everything look 10x better- Electronics enthusiasts exploring Boolean algebra
-
Coffee for making this possible- Teachers demonstrating circuit concepts
-
Stack Overflow for... you know- Anyone curious about how computers work at the gate level
---## Contributing
Built with questionable life choices and an excessive amount of CSS animations.Contributions are welcome! Feel free to:
- Report bugs
If this helped you understand logic gates even a tiny bit, we've succeeded.- Suggest new features
- Submit pull requests
If you just came here for the pretty colors, that's cool too.- Improve documentation
MIT License - feel free to use this for learning and teaching!
Built with love and attention to detail. Designed to make learning digital logic as beautiful and engaging as possible.
Start building circuits at http://localhost:3000