<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="theme-color" content="#efeee7" />
    <meta name="description" content="Yeezuo. A place to put the screen down for five minutes. No meditation to learn, and no need to keep looking here." />
    <meta property="og:title" content="Yeezuo — Set the world down for a while." />
    <meta property="og:description" content="A place to put the screen down for five minutes. No meditation to learn, and no need to keep looking here." />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_US" />
    <link rel="canonical" href="https://yeezuo.com/" />
    <link rel="alternate" hreflang="en" href="https://yeezuo.com/" />
    <link rel="alternate" hreflang="zh-CN" href="https://yeezuo.com/zh/" />
    <link rel="alternate" hreflang="x-default" href="https://yeezuo.com/" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Yeezuo — Set the world down for a while.</title>
    <!-- Sends first-time visitors whose browser prefers Chinese to /zh/. -->
    <script src="/lang.js"></script>
    <script type="module" crossorigin src="/assets/main-BnQnZsi_.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/main-D0w_9bTH.css">
  </head>
  <body data-state="home" data-arrival="settle" data-glow="false">
    <svg class="sprite" width="0" height="0" aria-hidden="true">
      <defs>
        <symbol id="i-arrow" viewBox="0 0 36 20"><path d="M2 10h30M26 4l6 6-6 6" /></symbol>
        <symbol id="i-chevron" viewBox="0 0 20 20"><path d="m7 4 6 6-6 6" /></symbol>
        <symbol id="i-close" viewBox="0 0 20 20"><path d="m5 5 10 10M15 5 5 15" /></symbol>
        <symbol id="i-sound" viewBox="0 0 24 24">
          <path d="M4 9h4l5-4v14l-5-4H4Z" />
          <path d="M17 8q4 4 0 8M19.5 4.5q7 7.5 0 15" />
        </symbol>
        <symbol id="i-bell" viewBox="0 0 24 24">
          <path d="M5 16h14l-2-3V9a5 5 0 0 0-10 0v4Z" />
          <path d="M10 20h4M12 2v2" />
        </symbol>
        <symbol id="i-wave" viewBox="0 0 24 24">
          <path d="M2 10q5-4 10 0t10 0M2 15q5-4 10 0t10 0" />
        </symbol>
        <symbol id="i-check" viewBox="0 0 20 20"><path d="m4 10 4 4 8-8" /></symbol>
        <symbol id="i-play" viewBox="0 0 20 20"><path d="M7 5v10l8-5Z" /></symbol>
        <symbol id="i-back" viewBox="0 0 20 20"><path d="M16 10H4m5-5-5 5 5 5" /></symbol>
        <symbol id="i-mark" viewBox="0 0 34 46">
          <path d="M5 35h24M8 30h18M12 25h10M17 11v12M17 12c-4 2-7 5-9 9M17 12c4 2 7 5 9 9" />
          <circle cx="17" cy="5" r="3" />
          <path d="M4 41h26" opacity=".55" />
        </symbol>
      </defs>
    </svg>

    <!-- The scene is an invitation, not the destination. Artwork is injected per scene on demand. -->
    <div class="world" aria-hidden="true">
      <div class="scene scene-mist" data-scene="mist">
        <div class="landscape"></div>
        <canvas id="mistCanvas"></canvas>
      </div>
      <div class="scene scene-rain" data-scene="rain">
        <div class="landscape"></div>
        <canvas id="rainCanvas"></canvas>
      </div>
      <div class="scene scene-sea" data-scene="sea">
        <div class="landscape"></div>
        <canvas id="seaCanvas"></canvas>
      </div>
      <div class="scene scene-hearth" data-scene="hearth">
        <div class="landscape"></div>
        <canvas id="hearthCanvas"></canvas>
      </div>
      <div class="paper-wash"></div>
      <div class="scene-vignette"></div>
    </div>
    <div class="veil" aria-hidden="true"></div>

    <div id="status" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>

    <section id="home" class="screen home is-active" aria-label="Yeezuo — begin a rest">
      <header class="site-header">
        <button class="brand" data-action="home" aria-label="Yeezuo home">
          <svg class="brand-mark"><use href="#i-mark" /></svg>
          <span class="brand-copy"
            ><span class="brand-cn">一座</span><span class="brand-en">YEEZUO</span></span
          >
        </button>
        <nav class="nav" aria-label="Page options">
          <a
            class="nav-button lang-switch"
            id="langSwitch"
            href="/zh/"
            hreflang="zh-CN"
            lang="zh-CN"
            aria-label="中文版"
            >中文</a
          >
          <span class="nav-divider" aria-hidden="true"></span>
          <button class="nav-button" data-open="aboutDialog">About</button>
          <span class="nav-divider" aria-hidden="true"></span>
          <button class="nav-button" data-open="soundDialog" aria-label="Sound settings">
            <svg class="icon"><use href="#i-sound" /></svg>
            <span class="sound-nav-text" id="soundSummary">Just one soft chime</span>
          </button>
        </nav>
      </header>
      <main class="hero">
        <div class="hero-inner">
          <p class="eyebrow">For you, at the screen</p>
          <h1>Set the world down<br /><span class="second-line">for a while.</span></h1>
          <p class="hero-description">Messages, windows, unfinished things — they can all wait.<br />For these few minutes, all you need to do is sit.</p>
          <div class="ritual">
            <div class="duration-row">
              <span class="duration-caption" id="durationLabel">Leave a little space</span>
              <div class="duration-picker" role="group" aria-labelledby="durationLabel">
                <button class="duration" data-minutes="5" aria-pressed="true">
                  5<span>min</span>
                </button>
                <button class="duration" data-minutes="10" aria-pressed="false">
                  10<span>min</span>
                </button>
                <button class="duration" data-minutes="15" aria-pressed="false">
                  15<span>min</span>
                </button>
                <button class="duration" data-minutes="30" aria-pressed="false">
                  30<span>min</span>
                </button>
                <button class="duration" data-minutes="60" aria-pressed="false">
                  1<span>hr</span>
                </button>
                <button
                  class="duration"
                  id="customDuration"
                  aria-pressed="false"
                  aria-controls="customDurationField"
                >
                  Custom
                </button>
              </div>
            </div>
            <label class="custom-duration" id="customDurationField" hidden>
              <input
                type="number"
                id="customMinutes"
                min="1"
                max="180"
                step="1"
                inputmode="numeric"
                aria-label="Custom minutes (1–180)"
              /><span>min</span>
            </label>
            <div class="start-row">
              <button class="primary start-button" id="startButton">
                <span id="startLabel">Sit for five minutes</span
                ><svg class="icon"><use href="#i-arrow" /></svg>
              </button>
              <button class="secondary guide-entry" id="guideEntry" data-open="guideDialog">
                With a little guidance
              </button>
            </div>
            <div class="home-sound">
              <button class="toggle-row" id="bellInline" aria-pressed="true">
                <span id="endSoundNote">A soft chime at the end</span
                ><span class="switch-track" aria-hidden="true"></span>
              </button>
              <button class="toggle-row" id="ambientInline" aria-pressed="false">
                <span id="ambientInlineText">Ambience · Wind on the lake</span
                ><span class="switch-track" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </div>
      </main>
      <div class="scene-caption" aria-hidden="true">
        <span class="scene-number" id="sceneNumber">NO. 001</span
        ><span class="scene-name" id="sceneName">Mist Mooring</span>
      </div>
      <p class="scene-whisper" id="sceneWhisper" aria-hidden="true">Mountains keep their own time</p>
      <footer class="site-footer">
        <p class="footer-note">This isn’t about being more productive.</p>
        <div class="footer-right">
          <button class="demo-button" id="demoButton" data-open="demoDialog" hidden>
            Trial · 30 seconds
          </button>
          <span class="footer-line" id="demoDivider" aria-hidden="true" hidden></span>
          <button class="scene-picker-button" data-open="sceneDialog">
            <span class="dot" aria-hidden="true"></span><span id="sceneFooter">Mist Mooring</span
            ><span class="scene-picker-hint">Change scene</span
            ><svg class="icon"><use href="#i-chevron" /></svg>
          </button>
        </div>
      </footer>
    </section>

    <section
      id="arriving"
      class="screen center-screen arrival"
      aria-label="Settling in"
      aria-hidden="true"
      inert
    >
      <button class="arrival-back" id="arrivalBack">
        <svg class="icon"><use href="#i-close" /></svg>Cancel
      </button>
      <div class="arrival-content">
        <p class="arrival-label" id="arrivalLabel">This sit · five minutes</p>
        <div class="arrival-copy" id="arrivalCopy">
          <h2 id="arrivalTitle" tabindex="-1">Just settle in.</h2>
          <p class="arrival-subtitle" id="arrivalSubtitle">Let your shoulders drop.<br>No need to change your breathing, or to do this well.</p>
        </div>
        <button class="secondary arrival-skip" id="skipArrival">Skip, go quiet</button>
      </div>
      <p class="arrival-bottom">The screen will dim and you can stop looking at it. When you need to, move the mouse, tap or press Esc.</p>
    </section>

    <section
      id="resting"
      class="screen resting"
      aria-label="Resting quietly"
      aria-hidden="true"
      inert
    >
      <button class="rest-touch" id="restTouch" aria-label="Bring back the controls: see the time left, pause, or finish early">
        <span class="rest-message" aria-hidden="true">Nothing here needs your attention.<br /><small>Look into the distance, or gently close your eyes.</small></span>
      </button>
      <p class="resting-hint" aria-hidden="true">When you need to, move the mouse or tap the screen.</p>
      <div class="rest-bar" id="restBar">
        <span class="rest-bar-time"
          ><span class="rest-bar-label">Left</span
          ><span id="restBarRemaining">05:00</span></span
        ><button class="rest-bar-button" id="restBarPause">Pause</button
        ><button class="rest-bar-button" id="restBarEnd">Finish</button>
      </div>
    </section>

    <section
      id="controls"
      class="screen center-screen controls"
      role="dialog"
      aria-modal="true"
      aria-labelledby="controlTitle"
      aria-hidden="true"
      inert
    >
      <div class="control-panel">
        <p class="control-kicker" id="controlKicker">Your rest continues</p>
        <h2 id="controlTitle">No need to hurry back.</h2>
        <div class="remaining-wrap">
          <span class="remaining-label">Left</span
          ><span id="remaining" class="remaining" aria-live="off">05:00</span>
        </div>
        <div class="control-actions">
          <button class="primary" id="continueButton">Continue</button>
          <button class="secondary" id="pauseButton">Pause</button>
          <button class="secondary" id="endEarlyButton">Finish</button>
        </div>
        <p class="control-reassure">Coming back now is fine too.</p>
        <details class="control-more">
          <summary>Light and sound</summary>
          <label class="inline-toggle" for="glowSwitch"
            ><span>Keep a little light from the scene</span
            ><span class="switch"
              ><input type="checkbox" id="glowSwitch" /><span class="switch-track"></span></span
          ></label>
          <label class="inline-toggle" for="ambientControlSwitch"
            ><span id="ambientControlLabel">Wind on the lake</span
            ><span class="switch"
              ><input type="checkbox" id="ambientControlSwitch" /><span
                class="switch-track"
              ></span></span
          ></label>
          <button class="control-sound" data-open="soundDialog">
            <svg class="icon"><use href="#i-sound" /></svg>Sound settings
          </button>
        </details>
      </div>
    </section>

    <section
      id="returning"
      class="screen center-screen returning"
      aria-label="Coming back"
      aria-hidden="true"
      inert
    >
      <div class="return-panel">
        <svg class="return-emblem" viewBox="0 0 80 55" aria-hidden="true">
          <path d="M5 44h70M13 36q15-20 28 0M32 36q19-31 34 0M16 49h47" />
          <circle cx="56" cy="12" r="5" />
        </svg>
        <p class="return-kicker" id="returnKicker">That’s the sit. Right here is enough.</p>
        <h2 id="returnTitle" tabindex="-1">Come back slowly.</h2>
        <p class="return-copy">No hurry to look at the screen.<br />Look out of a window first, then roll your shoulders.</p>
        <figure class="lesson" id="lesson" hidden>
          <blockquote id="lessonText"></blockquote>
          <figcaption id="lessonSource"></figcaption>
        </figure>
        <div class="return-actions">
          <button class="primary" id="leaveButton">
            Back to my day<svg class="icon"><use href="#i-arrow" /></svg>
          </button>
          <button class="secondary" id="addFiveButton">Sit five more minutes</button>
        </div>
      </div>
      <p class="return-footnote">Nothing to record. This little space is already yours.</p>
    </section>

    <section
      id="away"
      class="screen center-screen away"
      aria-label="Back to your life"
      aria-hidden="true"
      inert
    >
      <button class="brand" data-action="home" aria-label="Back to Yeezuo">
        <svg class="brand-mark"><use href="#i-mark" /></svg><span class="brand-cn">一座</span>
      </button>
      <div>
        <h2 id="awayTitle" tabindex="-1">Off you go.</h2>
        <p>You can close this page now.<br />Life is outside the screen.</p>
      </div>
      <div class="away-bottom">
        <p>When you want to sit again, this will be here.</p>
        <button class="secondary" data-action="home">Back to the start</button>
      </div>
    </section>

    <dialog id="sceneDialog" aria-labelledby="sceneDialogTitle">
      <div class="dialog-inner">
        <div class="dialog-top">
          <h2 id="sceneDialogTitle">Sit somewhere else.</h2>
          <button class="close-dialog" data-close aria-label="Close scene picker">
            <svg class="icon"><use href="#i-close" /></svg>
          </button>
        </div>
        <p class="dialog-intro">No need to find the best view. If it feels right, sit down.</p>
        <button class="scene-option" data-pick-scene="mist" aria-pressed="true">
          <span class="scene-thumb"
            ><img
              src="/thumbs/mist.jpg"
              alt=""
              width="180"
              height="140"
              loading="lazy"
              decoding="async"
          /></span>
          <span class="scene-option-copy"
            ><span class="scene-option-title">Mist Mooring</span
            ><span class="scene-option-description">The mountains are far off; the water is in no hurry.</span></span
          >
          <svg class="icon scene-check"><use href="#i-check" /></svg>
        </button>
        <button class="scene-option" data-pick-scene="rain" aria-pressed="false">
          <span class="scene-thumb"
            ><img
              src="/thumbs/rain.jpg"
              alt=""
              width="180"
              height="140"
              loading="lazy"
              decoding="async"
          /></span>
          <span class="scene-option-copy"
            ><span class="scene-option-title">Rain Court</span
            ><span class="scene-option-description">Under the eaves, borrowing time from the rain.</span></span
          >
          <svg class="icon scene-check"><use href="#i-check" /></svg>
        </button>
        <button class="scene-option" data-pick-scene="sea" aria-pressed="false">
          <span class="scene-thumb"
            ><img
              src="/thumbs/sea.jpg"
              alt=""
              width="180"
              height="140"
              loading="lazy"
              decoding="async"
          /></span>
          <span class="scene-option-copy"
            ><span class="scene-option-title">Dusk Sea</span
            ><span class="scene-option-description">A sunset asks nothing of you.</span></span
          >
          <svg class="icon scene-check"><use href="#i-check" /></svg>
        </button>
        <button class="scene-option" data-pick-scene="hearth" aria-pressed="false">
          <span class="scene-thumb"
            ><img
              src="/thumbs/hearth.jpg"
              alt=""
              width="180"
              height="140"
              loading="lazy"
              decoding="async"
          /></span>
          <span class="scene-option-copy"
            ><span class="scene-option-title">Snow Hearth</span
            ><span class="scene-option-description">Snow beyond the eaves; a fire at your back.</span></span
          >
          <svg class="icon scene-check"><use href="#i-check" /></svg>
        </button>
        <p class="dialog-note">A few places, one destination: your attention, back with you.<br />Each has its own sound, on only if you want it. Once you begin, the motion stops and the scene steps back.</p>
      </div>
    </dialog>

    <dialog id="soundDialog" aria-labelledby="soundDialogTitle">
      <div class="dialog-inner">
        <div class="dialog-top">
          <h2 id="soundDialogTitle">Let the sound stay soft.</h2>
          <button class="close-dialog" data-close aria-label="Close sound settings">
            <svg class="icon"><use href="#i-close" /></svg>
          </button>
        </div>
        <p class="dialog-intro">Once your eyes are closed, sound is the only thing still with you.<br />It can be there, or not.</p>
        <div class="sound-setting">
          <div>
            <div class="setting-title" id="ambientTitle">Wind on the lake</div>
            <p class="setting-desc" id="ambientDesc">Wind from far away; now and then, water touching the shore.</p>
            <button class="preview-button" id="previewAmbient">
              <svg class="icon"><use href="#i-play" /></svg
              ><span id="previewAmbientText">Listen</span>
            </button>
          </div>
          <label class="switch"
            ><input type="checkbox" id="ambientSwitch" aria-label="Play wind on the lake" /><span
              class="switch-track"
            ></span
          ></label>
        </div>
        <div class="sound-setting">
          <div>
            <div class="setting-title">A soft chime at the end</div>
            <p class="setting-desc">It won’t hurry you. It only tells you the time is up.</p>
            <button class="preview-button" id="previewBell">
              <svg class="icon"><use href="#i-bell" /></svg>Hear the closing chime
            </button>
          </div>
          <label class="switch"
            ><input type="checkbox" id="bellSwitch" aria-label="Play a chime at the end" checked /><span
              class="switch-track"
            ></span
          ></label>
        </div>
        <div class="volume-setting">
          <label class="volume-head" for="volumeSlider"
            ><span>How near the sound feels</span><span id="volumeValue">60%</span></label
          >
          <input type="range" id="volumeSlider" min="0" max="100" step="1" value="60" />
        </div>
        <p class="sound-warning">Sound only plays when you turn it on. In a background tab or on a locked phone the chime may be late or silent — it isn’t a reliable alarm. An iPhone in silent mode may play nothing.</p>
        <p class="dialog-note">The sound is made live in your browser, a little different every time, and never loops.<br />Preferences stay in this browser and are never uploaded.</p>
      </div>
    </dialog>

    <dialog id="guideDialog" aria-labelledby="guideDialogTitle">
      <div class="dialog-inner">
        <div class="dialog-top">
          <h2 id="guideDialogTitle">A little guidance.</h2>
          <button class="close-dialog" data-close aria-label="Close guidance">
            <svg class="icon"><use href="#i-close" /></svg>
          </button>
        </div>
        <p class="dialog-intro">For about a minute, a voice says a few quiet words; then it is as quiet as always.<br />After the bell, one line from an old poem or text.</p>
        <p class="guide-question" id="moodQuestion">Which is closer to how you are?</p>
        <div class="chip-row" role="group" aria-labelledby="moodQuestion">
          <button class="chip" data-mood="tired" aria-pressed="false">Tired</button>
          <button class="chip" data-mood="racing" aria-pressed="false">Mind won’t stop</button>
          <button class="chip" data-mood="restless" aria-pressed="false">A bit on edge</button>
        </div>
        <p class="guide-question" id="voiceQuestion">Voice</p>
        <div class="chip-row" role="group" aria-labelledby="voiceQuestion">
          <button class="chip" data-voice="soft" aria-pressed="true">Soft</button>
          <button class="chip" data-voice="deep" aria-pressed="false">Deep</button>
        </div>
        <button class="primary dialog-primary" id="guideStartButton" disabled>
          <span id="guideStartLabel">Pick a mood first</span
          ><svg class="icon"><use href="#i-arrow" /></svg>
        </button>
        <p class="dialog-note">
          Your choice is for this time only. It isn’t saved or sent anywhere. If you come back early, there is no closing line.<span id="guidePlaceholderNote"><br />Prototype: the voice is a temporary machine voice, and the words are drafts.</span>
        </p>
      </div>
    </dialog>

    <dialog id="aboutDialog" aria-labelledby="aboutDialogTitle">
      <div class="dialog-inner">
        <div class="dialog-top">
          <h2 id="aboutDialogTitle">Yeezuo: to sit a while.</h2>
          <button class="close-dialog" data-close aria-label="Close about">
            <svg class="icon"><use href="#i-close" /></svg>
          </button>
        </div>
        <p class="about-lead">Not one more<br />thing to get done.</p>
        <p class="about-copy">Code, messages, meetings — the screen always has a next thing. Yeezuo (一座, “one sitting”) is meant to be the exception.<br />Five minutes, or ten. No courses, no meditation to learn, no need to feel better before you leave.</p>
        <div class="about-steps">
          <div class="about-step">
            <span class="step-no">01</span>
            <div>
              <p class="step-title">The scenery welcomes you.</p>
              <p class="step-copy">No course to pick, no goal to set. Just sit.</p>
            </div>
          </div>
          <div class="about-step">
            <span class="step-no">02</span>
            <div>
              <p class="step-title">Then it steps aside.</p>
              <p class="step-copy">The words fade, the motion stops, the picture dims. The beauty isn’t there to keep you looking.</p>
            </div>
          </div>
          <div class="about-step">
            <span class="step-no">03</span>
            <div>
              <p class="step-title">It hands you back to your life.</p>
              <p class="step-copy">No streaks, scores or next recommendation. Coming back early is completely fine.</p>
            </div>
          </div>
        </div>
        <p class="about-bottom">Rest shouldn’t become another kind of effort.</p>
        <p class="dialog-note">Yeezuo is not a medical or therapy service.<br />No account, no usage data; the scenery and sound all happen in your browser.</p>
      </div>
    </dialog>

    <dialog id="demoDialog" aria-labelledby="demoDialogTitle">
      <div class="dialog-inner">
        <div class="dialog-top">
          <h2 id="demoDialogTitle">Walk through it once.</h2>
          <button class="close-dialog" data-close aria-label="Close trial">
            <svg class="icon"><use href="#i-close" /></svg>
          </button>
        </div>
        <p class="demo-lead">Thirty seconds<br />to feel the page step aside.</p>
        <p class="about-copy">A shortened trial, not a replacement for a real rest. The usual five, ten and fifteen minutes all run in real time.</p>
        <div class="demo-duration">
          <span><strong>Arrive</strong>about 9 seconds to put things down</span>
          <span><strong>Quiet</strong>the scene steps back, no countdown</span>
          <span><strong>Return</strong>it ends by itself at 30 seconds</span>
        </div>
        <button class="primary dialog-primary" id="demoStartButton">
          Start the 30-second trial<svg class="icon"><use href="#i-arrow" /></svg>
        </button>
        <p class="dialog-note">During the quiet, tap the screen to see the time, pause or come back early.</p>
      </div>
    </dialog>

    <div class="toast" id="toast" role="status" aria-live="polite"></div>
    <noscript><div class="noscript">Yeezuo.<br />This page needs JavaScript.<br />If it doesn’t work, that’s fine too: look into the distance and sit for a moment.</div></noscript>
  </body>
</html>
