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.

This guide walks you through opening Zen for the first time and entering the island scene. There is nothing to install and no account to create — just a URL, one optional checkbox, and a single button click.

Opening Zen

1

Open the URL

Navigate to https://mr-sunset.github.io/zen in any modern browser. The welcome screen will appear immediately.
2

Optionally toggle Controls

If you want to be able to adjust volume or pause playback at any time, check the Controls checkbox before entering. You can always return to this setting by reloading the page.
3

Click Enter Zen

Press the Enter Zen button. The welcome screen fades out in about 120 ms and the island scene fills the viewport.

The welcome screen

When you first arrive at Zen, a centred card is displayed over the gradient background. Each element serves a specific purpose:
ElementDescription
Title — “Zen”A large h1 heading that identifies the experience.
DescriptionA short line reading “A simple landscape with black noise.” — sets expectations for the ambient audio.
First tip”Enabling controls allows for volume control and pausing. It’s highly recommended to turn it on.” — encourages enabling the native audio bar.
Second tip”You may need to enable and disable controls to start sound.” — addresses the mobile autoplay restriction (see below).
Controls checkboxToggling this checkbox immediately sets the controls attribute on the <audio> element, so the native browser audio bar is visible when you enter the scene.
Enter Zen buttonDismisses the welcome card with a fade-out animation and reveals the island.

What you’ll see

Once you enter, the island scene occupies the full viewport. In light mode the background is a sky-blue gradient running from #78cbff at the top to #09a1ff at the bottom. A sand SVG image stretches across the very bottom of the screen, and a group of trees is centred just above the sand line. In the upper-right area of the viewport a small glowing yellow circle represents the moon, complete with a soft yellow box-shadow that gives it an ambient glow. In dark mode the sky becomes a deep purple-to-black gradient, the trees dim noticeably, the sand darkens to near-black, and the moon turns a muted grey — see Dark Mode for the full details.
On mobile devices, browsers often block audio from playing automatically without a user gesture. If no sound plays after you enter the scene, go back to the welcome screen (reload the page), check the Controls checkbox, and uncheck it again. That toggle interaction counts as a user gesture and will re-trigger playback.
Zen requires no account, no installation, and no active internet connection beyond the initial page load. The black noise audio file (assets/black-noise.ogg) is bundled with the project and served as a static asset — once the page has loaded, everything runs entirely offline.

Build docs developers (and LLMs) love