Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mr-sunset/zen/llms.txt

Use this file to discover all available pages before exploring further.

Zen is a deliberately minimal codebase: three source files and a handful of assets are all it takes to deliver the full experience. Understanding the layout makes it straightforward to fork the project, swap out scenery, change the audio track, or restyle the palette without ever touching a build tool.

​
Directory layout

zen/
├── index.html          # Entry point — welcome screen + scene markup
├── script.js           # DOM wiring: fade-out + audio controls toggle
├── style.css           # All styles, animations, responsive + dark mode
├── assets/
│   ├── black-noise.ogg # Looping black noise audio track
│   ├── group-tree.svg  # SVG tree cluster scenery
│   ├── sand.svg        # SVG sand/shore scenery
│   ├── favicon.png     # Browser tab icon
│   └── apple-touch-icon.png  # iOS home screen icon
└── .github/
    └── workflows/
        └── static.yml  # GitHub Actions: deploys to GitHub Pages on push to main

​
File reference

index.html

The single HTML entry point. Renders the welcome screen, holds all scene markup, and loads style.css and script.js with cache-busting query strings.

script.js

Handles all DOM interaction: the fade-out transition after the welcome screen is dismissed and the show/hide toggle for the audio controls panel.

style.css

Contains every style rule the project needs — layout, keyframe animations, responsive sizing via 100dvh/100dvw, and a prefers-color-scheme: dark media query for automatic dark mode.

assets/black-noise.ogg

The looping ambient audio track served as an OGG file, which is natively supported in all modern browsers without any codec plugin.

assets/group-tree.svg

An inline-ready SVG illustration of a cluster of trees used as the main foreground scenery element in the relaxation scene.

assets/sand.svg

An SVG illustration of sand and shoreline that forms the ground layer of the scene composition.
favicon.png and apple-touch-icon.png in the assets/ folder are purely presentational — they set the browser tab icon and the iOS home screen icon respectively, and have no effect on the scene itself.

​
Cache busting

When a browser loads Zen for the first time it caches style.css and script.js aggressively. To guarantee that returning visitors pick up your latest changes, the <link> and <script> tags in index.html append a version query string: 
<link rel="stylesheet" href="style.css?v=3">
<script src="script.js?v=3"></script>
The ?v=3 suffix is treated by the browser as part of the URL, so it fetches a fresh copy whenever the number changes. It has no effect on the server — static hosts simply ignore unknown query parameters.
Every time you modify style.css or script.js, increment the version number (?v=3 → ?v=4, and so on) so that browsers discard their cached copies and download the updated file.

​
No build step

Zen has no bundler, transpiler, or package manager — there is no package.json, no node_modules, and no compilation phase. Every file is served to the browser exactly as it is written on disk. This keeps the project auditable at a glance, trivially forkable, and deployable to any static host in seconds.
Because there is no build step, you can open index.html directly in a browser for a quick look at the markup — though for full audio and autoplay support you should use a local HTTP server. See the Self-Hosting guide for quick server options.

Build docs developers (and LLMs) love

Get started for freeTalk to us