DOM, canvas or both
DOM and CSS for menus and text-heavy UI, canvas or WebGL for the playfield, and a clean boundary between them.
Web & custom engines · UI design & implementation
Games that open from a link.
Browser games and custom engines, where the interface is often half the product. Designed and built end to end, from the first wireframe to the deployed build.
TypeScriptDOM & CSSCanvas & WebGLthree.jsReact
What we do in Web
Built the way the
engine expects.
Native frameworks, used as intended, so your engineers inherit something familiar.
Motion on the compositor
Transforms and opacity driven by custom properties and the Web Animations API, so feedback stays smooth while the game works.
Input and accessibility
Keyboard, pointer, touch and Gamepad API, with real focus management and reduced-motion support.
Ship it
Bundling, code-splitting, asset compression and hosting, so the game loads quickly from a plain URL.
In code
The same component,
in Web.
The same component in every runtime: a health bar whose ghost segment waits 450 ms, then drains over 600 ms. It is the bar running in the demo at the top of this page.
health-bar.tsTypeScript · DOM + CSS
// The compositor does the motion. CSS that goes with it:
// .fill, .ghost { transform-origin: left; transform: scaleX(var(--hp)); }
// .is-damage .ghost { transition: transform .6s cubic-bezier(.2,.7,.2,1) .45s; }
export function setHealth(bar: HTMLElement, pct: number): void {
pct = Math.min(1, Math.max(0, pct));
const previous = Number(bar.style.getPropertyValue('--hp') || 1);
const damage = pct < previous;
bar.classList.toggle('is-damage', damage);
bar.style.setProperty('--hp', String(pct));
if (damage) {
bar.animate({ filter: ['brightness(1.8)', 'none'] }, { duration: 120 });
}
}A trimmed sample to show structure and approach. Compare all five runtimes →
Covered as standard
- TypeScript, Vite
- React or framework-free
- three.js, Canvas 2D, WebGL
- Gamepad API and touch
- Embeds for courses, LMS and portals
- Custom and in-house engines
Real builds
Shipped in the browser.
Each tile says what it is: recorded gameplay, an editor capture, or a product screenshot.
In-engine footage · our own game, in development
Norman Ascension
Custom three.js engine · WebGL
An online medieval dynasty RPG running in a browser-based engine we wrote. World, rendering and interface are built in-house.
See the game Recorded build · training simulation
Mission Control
Web · TypeScript · 3D globe
A mission hub with a live globe, guided tutorial, progression and debrief screens. Designed and implemented.
Open the case study Recorded gameplay · playable in the browser
Network Defense
Web game · React · TypeScript
Isometric strategy with a readable board, evidence panels and a rules editor.
Play and inspect Recorded gameplay
SOC Dashboard Challenge
Web game · React · TypeScript
A dense investigation console made scannable: evidence, timeline and a decision to defend.
See the set of eight Recorded gameplay
Cyber Dispatch
Web game · React · TypeScript
A dispatcher desk: prioritise, assign, and see what each call cost.
See the set of eight Development recording
SliceForge World Editor
Web · WebGL authoring tool
Paint a grid, watch the 3D world regenerate beside it. Tool UX for game teams.
Read the case study
Product screenshot · available now SliceForge
Web app · game UI production tool
Our own tool for turning a reference into an editable interface, with component states and a UI kit export.
Try SliceForge Recorded gameplay
Cloud Command
Web game · React · TypeScript
Arcade flight with a HUD that has to be read at speed.
See the set of eight Recorded gameplay
Privilege Path Puzzle
Web game · React · TypeScript
An access graph you solve by reading it: nodes, paths and the one edge that matters.
See the set of eight Recorded gameplay
Query Hunt
Web game · React · TypeScript
A SQL investigation where the query editor, results and case notes share one screen.
See the set of eight Recorded gameplay
Incident Triage Race
Web game · React · TypeScript
An alert board under time pressure: sort, prioritise, and justify the order.
See the set of eight Recorded gameplay
Phishing Speed Drill
Web game · React · TypeScript
A timed inbox with an inspector for sender, link and tone evidence.
See the set of eightOther runtimes
The design travels.
The design system and motion spec stay the same. Only the implementation changes.
Web & custom engines
Show us the build.
Send a screenshot, a recording or a build, with your target platforms and dates. You will get a straight answer on fit and scope.