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 minimal static web experience designed to help you focus, unwind, or fall asleep. It combines a looping black noise audio track with a hand-crafted island scene — a sandy shore, a silhouetted palm tree, and a glowing moon — all delivered from a single HTML page with zero external dependencies. This page introduces what Zen is, what it looks like across light and dark themes, and why it works.

​
What Zen is

Zen is a zero-dependency static page composed of three files: index.html, script.js, and style.css, plus a small assets/ folder. There is no build step, no framework, and no backend. Open the file in a browser (or serve it from any static host) and it runs immediately. The visual centerpiece is a layered island scene: a full-width sand SVG anchored to the bottom of the viewport, a centered palm tree group rising above it, and a small glowing moon in the upper corner. The scene is purely decorative — its purpose is to give your eyes something calm to rest on while the audio does the real work. Zen ships with two color themes that follow the operating system preference automatically via prefers-color-scheme:
ThemeBackground gradientMood
Light#78cbff → #09a1ff sky blueOpen daytime sky
Dark#1f0021 → #000 deep purple-blackLate-night stillness
No manual theme toggle is needed. As soon as the OS switches between light and dark mode, the background gradient, welcome container border, moon color, and tree brightness all update automatically.

​
Key features

Black noise audio

A looping .ogg black noise track plays automatically on entry. An optional controls checkbox surfaces the native browser audio bar for volume adjustment and pause.

Island scenery

The scene layers a full-width sand.svg, a centered group-tree.svg, and a CSS-drawn #moon circle with a yellow glow — no canvas, no WebGL.

Welcome screen

A frosted-glass welcome card greets the user, explains the experience, and fades out gracefully with a 0.12 s CSS animation when “Enter Zen” is clicked.

Dark mode support

Full prefers-color-scheme: dark support adjusts gradients, borders, button colors, tree brightness, and the moon tone — no JavaScript required.

Responsive layout

The layout uses 100dvw / 100dvh units and object-fit: cover on the sand image so the scene fills any screen size correctly, including mobile browsers with dynamic toolbars.

Zero dependencies

No npm, no bundler, no CDN fonts. Every byte ships in the repo. Self-host on GitHub Pages, Netlify, Vercel, or any file server in under a minute.

​
Why black noise?

Most people are familiar with white noise (equal energy at all frequencies) and pink noise (energy falling off gradually with frequency). Black noise sits at the opposite extreme: its energy is concentrated at very low frequencies, rolling off steeply so that higher frequencies contribute almost nothing to the overall sound. The result is a deep, barely-perceptible rumble — closer to the distant hum of a sleeping city or the sub-bass of a quiet ocean than the harsh hiss of white noise. Because black noise occupies such a narrow low-frequency band, it blends into the background without competing for your attention. It masks sudden environmental interruptions (keyboard clicks, passing traffic, conversations) without introducing a new, distracting texture. That makes it especially effective for sustained focus work, reading, or winding down before sleep.
If the audio does not start automatically — which is common in browsers that block autoplay before a user gesture — enable the Controls checkbox on the welcome screen, then disable it again. Toggling the checkbox attaches the native browser audio element, which counts as a user interaction and typically unblocks playback.

Build docs developers (and LLMs) love

Get started for freeTalk to us