Notes
Notes is the reference layer of A Short Journey. Each entry covers a single topic in enough depth to be useful on its own, while connecting to the broader themes explored across the site’s pillar pages, journal essays, and production writing.
These are not blog posts. They are not tutorials with step-by-step code samples. They are focused, considered examinations of specific subjects that come up repeatedly in browser-native scene design - the kind of topics where a quick search returns dozens of surface-level explanations but rarely anything with practical depth.
How the notes are organised
The collection covers several connected areas. Some notes deal with rendering fundamentals - what WebGL actually does, how ambient colour creates depth, how frame budgets constrain animation choices. Others cover interaction patterns - how drag, scroll, and tap function as narrative tools, how scene breaks can feel natural rather than forced. A few sit at the intersection of design and engineering, where the decisions that shape a page’s atmosphere are inseparable from the decisions that shape its performance.
Each note is written to be read independently. You do not need to start at the beginning or follow a sequence. But the notes do reference each other and link into the longer pillar pages where relevant. If a note covers a concept that is explored in more depth elsewhere - in Motion Language, for instance, or in the Performance section - it will point you there.
What makes a good reference note
The standard for these notes is specificity. A note that could appear on any design blog unchanged has not earned its place here. Each entry should leave the reader with at least one concrete insight, one practical distinction, or one useful framework that they did not have before.
That means no padded introductions, no definitions copied from specification documents, and no concluding paragraphs that restate the headline. The notes start where the reader’s existing knowledge ends and stop when the topic is covered. Some are six hundred words. Some are longer. Length follows the subject, not a template.
Using notes alongside other sections
Notes work best as companion reading. After exploring The Journey, a reader might visit Frame Budget Basics to understand the rendering constraints that shaped specific scenes. After reading the Interactive Storytelling pillar, Drag, Scroll, and Tap as Narrative Tools offers a focused breakdown of one of its key themes.
The Journal takes a different approach - longer essays with a stronger editorial voice. Notes are more compact, more reference-oriented, and more likely to be bookmarked for later use.
Contributing topics
The collection will grow over time. Topics are added based on what comes up in production work - problems that need clearer thinking, distinctions that are commonly confused, techniques that deserve more careful explanation than a passing mention in a longer piece.
If you are looking for something specific and cannot find it, the search function covers all notes, journal entries, and pillar pages across the site.
What Is WebGL
A grounded explanation of WebGL - what it does, how it works in the browser, where it adds value to interactive storytelling, and when simpler approaches are better.
RenderingAmbient Colour and Depth
How colour temperature, value shifts, and saturation control create the perception of depth and atmosphere in browser-native scene design.
Visual DesignScene Breaks That Feel Natural
Techniques for creating section boundaries that the reader senses without analysing. Spacing, colour, typography, and scroll-position strategies for natural transitions.
CompositionSound Without Autoplay
Why browser audio should never start without consent, and how to design sound as an opt-in enhancement for interactive web experiences.
Interaction DesignFrame Budget Basics
Understanding frame budgets, render cycles, and the practical constraints that shape animation choices in browser-native interactive experiences.
PerformanceDrag, Scroll, and Tap as Narrative Tools
How drag, scroll, and tap interactions function differently as storytelling mechanisms. Choosing the right input model for each narrative moment.
Interaction Design