MorganHacks 2026 Hackathon Project An interactive, data-driven web experience that separates nuclear fact from fiction — built to change minds, one fission reaction at a time.
Nuclear power is one of the most misunderstood energy sources on the planet. NuclearTruth is an interactive educational dashboard that lets users explore the inside of a nuclear reactor, compare real-time CO₂ emissions across energy sources, and bust the most persistent myths about nuclear energy — all in a sleek, dark-mode UI.
The current state of the project is a fully functional 2D React mockup featuring an animated SVG reactor, live grid comparisons, myth-busting cards, and real emissions data. The roadmap extends this into an immersive 3D experience using Three.js and React Three Fiber.
- A cross-section SVG diagram of a Pressurized Water Reactor (PWR)
- "Split Reactor Open" button animates the vessel apart to reveal its internals
- Click individual components — fuel rods, control rods, pressurized coolant, and the reactor core — to get accurate, plain-language explanations of how each part works
- Side-by-side emissions bar chart comparing Coal, Gas, Oil, Solar, Wind, and Nuclear
- Pulls live grid carbon intensity data from the ElectricityMaps API
- Switch between regions (France, Germany, USA, Sweden) to see how nuclear share directly correlates with lower CO₂/kWh
- Simulated live readouts: core temperature, pressure, power output, and uptime
- Pulsing live indicator showing the currently selected grid region
- Four of the most common nuclear myths, each backed by a science-based rebuttal
- Click a myth to reveal the fact with a smooth expand animation
- Topics include: explosion risk, nuclear waste scale, safety statistics, and Chernobyl
- At-a-glance stats: Nuclear CO₂/kWh (12 g vs. coal's 820 g), deaths per TWh (0.03 — the safest of any energy source), per-capita waste (10 g/year — the size of a golf ball)
| Tool | Purpose |
|---|---|
| React | Component architecture (ReactorSVG, MythCard, StatCard) |
| Plain CSS-in-JS | Dark-mode styling with inline styles and keyframe animations |
| SVG Animation | CSS transform: translateX split-reactor reveal |
| Tool | Purpose |
|---|---|
| Three.js | 3D reactor vessel, fuel rods, control rods, coolant channels |
| React Three Fiber | JSX-based 3D scene composition; <Reactor />, <FuelRod />, <ControlPanel /> components |
| Drei | Orbit controls, environment lighting, text labels |
| GSAP | Smooth animation for control rod insertion depth, power needle, neutron particles |
| @react-spring/three | Physics-based spring animations for interactive reactor components |
| p5.js | 2D animated neutron chain reaction diagrams overlaid on the 3D scene |
| ElectricityMaps API | Live CO₂/kWh data by region for real-time comparisons |
| Tailwind CSS | HUD overlays, fact cards, legend panels |
| Framer Motion | Animated slide-in fact panels and myth/fact reveal cards |
- Node.js ≥ 18
- npm or yarn
This project requires an ElectricityMaps API token for live CO₂/kWh grid data.
- Copy the example env file:
cp .env.example .env.local
- Open
.env.localand fill in your token:Get a free token at https://www.electricitymaps.com/free-tier-api.ELECTRICITYMAPS_TOKEN=your_token_here
Note: Without the token the app will still load, but live CO₂ data will not be fetched.
git clone https://github.com/Farfyio/nuclear_truth.git
cd nuclear_truth
npm install
npm run devThen open http://localhost:5173 in your browser.
NuclearTruth.jsx is a self-contained React component. Drop it into any Vite or Create React App project:
import NuclearTruth from './NuclearTruth';
export default function App() {
return <NuclearTruth />;
}The component uses Google Fonts (DM Sans and DM Mono) loaded via @import in the embedded <style> tag — no extra setup needed.
nuclear_truth/
├── NuclearTruth.jsx # Main self-contained React component (2D mockup)
└── README.md
| Data | Source |
|---|---|
| CO₂ intensity by region | ElectricityMaps API |
| Deaths per TWh statistics | Our World in Data — Energy Safety |
| Nuclear waste volume | U.S. Nuclear Energy Institute |
| Reactor physics | U.S. Nuclear Regulatory Commission (NRC) |
The goal of NuclearTruth is not to be a Wikipedia article — it's to make the physics and the data visceral. When you can watch control rods drop into a reactor core and see CO₂ numbers update in real time, the argument makes itself.
Nuclear energy produces 12 g of CO₂ per kWh. Coal produces 820 g. Every reactor you understand is one more person who knows the difference.
Built at MorganHacks 2026:
| Name | Role | |
|---|---|---|
| Charles | News/Live Data Page | Charles' LinkedIn |
| Tahj | Compare Page | Tahj's LinkedIn |
| Faris | Reactor & Home Page | Faris' LinkedIn |
| Maxwell | About Page | Maxwell's LinkedIn |
MIT