Notes on A Short Journey

What Is WebGL

Tue, 10 Mar 2026 00:00:00 +0000

WebGL is a browser API that gives JavaScript access to the GPU for rendering 2D and 3D graphics. It is based on OpenGL ES, a subset of the OpenGL specification designed for embedded systems and mobile devices. Every major browser supports it. No plugin is required. The rendering happens inside a standard HTML canvas element.

That is the textbook definition. The practical definition is more useful: WebGL lets you draw things that CSS and SVG cannot draw, at speeds that JavaScript canvas rendering cannot match. Particle systems, shaded 3D objects, complex visual effects driven by mathematical functions - these are WebGL territory.

Ambient Colour and Depth

Thu, 05 Mar 2026 00:00:00 +0000

Depth in a browser viewport is an illusion. The screen is flat. Every element sits on the same physical plane. But the human visual system is remarkably easy to fool with colour, and the techniques that create perceived depth on screen are some of the most useful tools in browser-native scene design.

Ambient colour refers to the overall colour cast of a scene - the background tone, the relationship between foreground and background values, and the way colour temperature shifts across sections. When managed deliberately, ambient colour creates the feeling of spatial depth even in a purely two-dimensional layout.

Scene Breaks That Feel Natural

Sat, 28 Feb 2026 00:00:00 +0000

A scene break is the boundary between two distinct content sections. Done well, the reader senses the shift without consciously analysing it. Done poorly, the transition feels arbitrary - either so abrupt that it disorients, or so gradual that the reader does not notice the content context has changed.

This note covers practical techniques for scene breaks that feel inevitable rather than imposed. The principles connect to the broader treatment of scene transitions and the compositional thinking in Motion Language.

Sound Without Autoplay

Fri, 20 Feb 2026 00:00:00 +0000

Sound on the web has a trust problem, and autoplay created it. Years of auto-playing video ads, background music on Flash sites, and surprise audio on landing pages taught users to associate unexpected sound with hostility. Browsers responded by blocking autoplay audio by default. The policy is correct, and any sound design for interactive web experiences should start from the same position: sound is opt-in, always.

This note covers how to think about sound in browser-native storytelling without falling into the autoplay trap. The principles apply to any project where audio could enhance the experience, from atmospheric scenes in The Journey to interactive demonstrations in the Notes collection.

Frame Budget Basics

Sun, 15 Feb 2026 00:00:00 +0000

A frame budget is the maximum amount of time the browser has to produce a single visual frame. At 60 frames per second - the standard target for smooth animation on the web - each frame must complete in 16.67 milliseconds. Miss that window, and the frame drops. Drop enough frames, and the user sees stutter.

This note covers what happens inside that 16.67-millisecond window, where time gets spent, and how to make animation choices that stay within the budget. The principles connect directly to the Performance section’s treatment of render costs and to the motion design decisions discussed in Motion Language.

Drag, Scroll, and Tap as Narrative Tools

Tue, 10 Feb 2026 00:00:00 +0000

Every interaction model creates a different relationship between the reader and the content. Scroll is continuous and passive. Tap is discrete and active. Drag is spatial and physical. Each one communicates something different about the reader’s role in the story, and choosing the right model for each moment is one of the most consequential decisions in interactive storytelling.

This note breaks down how each interaction functions as a narrative tool, where each works best, and how to handle the accessibility and compatibility requirements that come with non-standard input patterns.