Strike//DB
Technique ArchivePersonal Project
Year: 2026
Tools used: p5.js (WEBGL), HTML, JavaScript, DeepSeek AI, Adobe Illustrator
Strike//DB is a browser-based reference tool for boxing, kickboxing, and Muay Thai techniques, built as a structured database rather than a wiki or a video library. Developed in p5.js, the project treats each technique as a data object with a fixed schema (name, discipline, category, executing fighter, summary, numbered execution steps, key points, counters and responses, and a reference list), so that every entry answers the same questions in the same order and can be filtered, searched, and cross-referenced across the entire archive. The result is an interface where more than three hundred entries can be read the way a practitioner actually studies: through the mechanics, not the highlight reel.
The system is organized around two orthogonal axes. Discipline tabs (Boxing, Kickboxing, Muay Thai) narrow the field horizontally; category chips (Punch, Kick, Knee, Elbow, Clinch, Defense, Footwork, Combo, Strategy, Philosophy, Signature) narrow it vertically. Selecting both produces a live index of the entries that satisfy both constraints, with each row color-coded by discipline and each entry's detail panel anchored to a section-colored accent bar. The full text of every entry is indexed, so a search for a fighter's name, a punch, a counter, or a source will return the relevant entries regardless of the active filter.
The project draws its content from the classical boxing canon (Dempsey, Louis, Frazier, Fleischer, O'Neill) alongside peer-reviewed research on training load, crowd noise, home advantage, and return-to-sport after injury, and modern technique breakdowns from across the kicking disciplines. The “signature” category collects named techniques from fighters like Tommy Hearns, Salvador Sánchez, Benny Urquidez, Peter Cunningham, Serkan Yılmaz, Naoya Inoue, and Canelo Álvarez. The “philosopy” category extends the archive past technique into the ideas that govern practice: Krishnamurti on attention and fear, Nietzsche on amor fati, Heraclitus on the unity of opposites, Musashi on perception, Sartre on the freedom that precedes essence.
The layout adapts to the viewport. On desktop it is a two-panel split with a scrollable index on the left and a scrollable detail view on the right; on mobile the detail becomes a full-screen overlay with a back button and the index becomes the whole page. Input is handled through raw DOM touch, mouse, and wheel events rather than p5's built-in handlers, which lets the canvas suppress the browser's scroll pipeline and respond to drag gestures directly. Search is a real HTML input positioned over the canvas, so it uses the native mobile keyboard and does not have to be reimplemented in p5. The result is a study tool that feels like a reference system rather than a website, one that stays out of the way of the reading.
Experience Strike//DB
Back to Top