██████╗ ██████╗ ███████╗ █████╗ ██╗ ██╗██╗███╗ ██╗ ██████╗ ██████╗ █████╗ ██████╗
██╔══██╗██╔══██╗██╔════╝██╔══██╗██║ ██╔╝██║████╗ ██║██╔════╝ ██╔══██╗██╔══██╗██╔══██╗
██████╔╝██████╔╝█████╗ ███████║█████╔╝ ██║██╔██╗ ██║██║ ███╗ ██████╔╝███████║██║ ██║
██╔══██╗██╔══██╗██╔══╝ ██╔══██║██╔═██╗ ██║██║╚██╗██║██║ ██║ ██╔══██╗██╔══██║██║ ██║
██████╔╝██║ ██║███████╗██║ ██║██║ ██╗██║██║ ╚████║╚██████╔╝ ██████╔╝██║ ██║██████╔╝
╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═══╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═════╝
"I am not in danger, Skyler. I am the danger."
— Walter White
An immersive, cinematic fan page dedicated to one of the greatest TV series ever created — Breaking Bad. This project captures the gritty, desert-industrial aesthetic of the show through meticulous attention to visual detail, custom cursor design, animated smoke effects, and interactive elements.
- 🎨 Desert Industrial Design — Dusty sand palette, hazard yellow accents, analog film grain
- 🌫️ 3-Layer Animated Smoke Overlay — Canvas particle system + CSS overlay for authentic atmosphere
- 🖱️ Custom Cursor — Hazmat-style arrow cursor with hover states (desktop only)
- 🔄 Bilingual Support — EN/RU switcher with persistent localStorage
- 🗺️ Interactive Map — Leaflet.js integration showing iconic Breaking Bad locations
- 📸 Lightbox Gallery — Keyboard navigation for iconic scenes
- 🎭 Character Dossier — Periodic table badges + parallax hover effects
- 🎬 Interactive Timeline — All 5 seasons, 62 episodes with season arcs
- 🎵 Custom Audio Player — Breaking Bad theme with waveform-style UI
- ♿ Accessible — ARIA labels, keyboard navigation, reduced motion support
- 📱 Fully Responsive — Optimized for mobile, tablet, and desktop
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure with ARIA accessibility |
| Tailwind CSS | Utility-first styling with custom BB theme config |
| Vanilla JavaScript | Canvas animations, IntersectionObserver, custom cursor |
| Leaflet.js | Interactive location map |
| Google Fonts | Bebas Neue (display), Source Sans 3 (body), Share Tech Mono (mono) |
BreakingBad/
│
├── index.html # Main page — complete Breaking Bad experience
├── css/
│ └── style.css # Desert industrial theme + animations
├── js/
│ └── main.js # All interactive modules
├── static/
│ ├── images/ # Characters, locations, scenes (16 images)
│ ├── audio/ # bb_theme.mp3
│ └── videos/ # breaking_bad_trailer.mp4
├── .gitignore # IDE, logs
└── README.md # You are here
git clone https://github.com/silence-creator/BreakingBad.git
cd BreakingBadSimply open index.html in your browser:
# Using Python
python -m http.server 8000
# Using Node.js (http-server)
npx http-server -p 8000
# Or just open the file directly
open index.html # macOS
start index.html # WindowsThat's it! No build step required. Pure HTML, CSS, and vanilla JavaScript.
| Name | Hex | Usage |
|---|---|---|
| Void | #0d0b08 |
Deepest background |
| Black | #111009 |
Main background |
| Panel | #1f1a0f |
Cards, panels |
| Hazard Yellow | #e8c547 |
Primary CTA, accents |
| Bone | #d4bc8a |
Primary text |
| Sand | #c8a96e |
Secondary highlights |
| Rust | #8b3a1a |
Danger, heat accents |
| Dust | #8a7355 |
Muted text |
- Display: Bebas Neue (titles, large text)
- Body: Source Sans 3 (paragraphs, UI)
- Mono: Share Tech Mono (data, labels)
- Grain Overlay — SVG fractal noise for analog film texture
- Vignette — Radial gradient edge darkening
- Smoke Animation — 3-layer CSS + canvas particle system
- Parallax — Chemical formulas follow mouse movement
The map features 5 key Breaking Bad locations:
- Albuquerque — The city that became the backdrop (35.0853°N, 106.6056°W)
- The Desert — Where it all began with an RV (34.68°N, 106.90°W)
- Los Pollos Hermanos — Gus Fring's distribution front (35.0619°N, 106.5408°W)
- The Superlab — 200 lbs/week underground facility (CLASSIFIED)
- White Residence — 308 Negra Arroyo Lane (35.1267°N, 106.5364°W)
6 main characters with periodic table badges:
- Walter White (Heisenberg) —
W· Element 1 - Jesse Pinkman — Former student, cook
- Saul Goodman — Criminal lawyer, fixer
- Gus Fring — Distributor, nemesis
- Mike Ehrmantraut — Enforcer, cleaner
- Hank Schrader — DEA Agent
9 iconic scenes with lightbox zoom:
- Ozymandias — Season 5, Episode 14 (The Fall)
- RV Lab — Season 1 (Where it began)
- Face Off — Season 4, Episode 13 (The explosion)
- The Superlab — Industrial perfection
- Box Cutter — Gus Fring's message
- And more...
Desktop-only hazmat arrow cursor with three states:
- Default: Hazard yellow arrow with glow
- Hover: Scale up + brighter glow on interactive elements
- Click: Scale down feedback
Toggle between English/Russian:
- Persistent choice via
localStorage - Updates
<html lang>attribute for accessibility - Affects all
[data-lang]elements
5 seasons, 62 episodes with:
- Season arcs and plot descriptions
- Key moments per season
- Progress indicators (99.1% purity visual)
- Canvas particles (28 warm desert particles)
- CSS overlays (3 independent layers with drift + pulse)
- Reduced motion support (auto-pause if user prefers)
- ✅ Semantic HTML with ARIA labels
- ✅ Keyboard navigation for all interactive elements
- ✅ Focus-visible outlines
- ✅
prefers-reduced-motionsupport - ✅ Alt text for all images
- ✅ Color contrast meets WCAG AA standards
Custom-styled Breaking Bad theme player:
- Click/drag progress bar
- Volume control
- Time display (current / total)
- Mute toggle
- Keyboard shortcuts (Arrow keys)
Breakpoints:
- Mobile: 375px+ (stacked layout)
- Tablet: 768px+ (2-column grid)
- Desktop: 1024px+ (full experience with custom cursor)
- Large: 1440px+ (max-width container)
Edit Tailwind config in index.html:
tailwind.config = {
theme: {
extend: {
colors: {
'bb-hazard': '#e8c547', // Change to your accent
'bb-bone': '#d4bc8a', // Change to your text color
// ... more colors
}
}
}
}Edit LOC_DATA array in main.js:
{
lat: 35.123, lng: -106.456,
title: { en: 'NEW LOCATION', ru: 'НОВАЯ ЛОКАЦИЯ' },
desc: { en: 'Description', ru: 'Описание' },
// ... more fields
}This project is licensed under the MIT License — see LICENSE file for details.
- Breaking Bad © AMC, Vince Gilligan
- Icons: Heroicons
- Map: Leaflet.js + CARTO
- Fonts: Google Fonts
- Images: Promotional materials for educational purposes
If you enjoyed this project:
- ⭐ Star this repo to show appreciation
- 🐛 Open an issue to report bugs
- 🤝 Submit a PR to contribute improvements
- 📢 Share with fellow Breaking Bad fans!
"Say my name."
Made with 🧪 and ☢️ by silence-creator