# Cadence > **Category:** Landing Page > **Effect:** A metronome pendulum sweeping a tick-marked arc while a hairline beat grid pulses and concentric rings burst from the pivot on every beat > **Platform:** cmd-code (`cmdcode`) > **Model:** `xiaomi/mimo-v2.6-pro` — Xiaomi MiMo v2.6 Pro (xiaomi/mimo-v2.6-pro) > **License:** Free / MIT — copy, paste, ship. > **Self-contained:** yes — one `index.html`, no build step, no external media. --- ## 🎬 Live demo Open [`public/demos/cadence/index.html`](../public/demos/cadence/index.html) — generated by the model above from the prompt below, with no human edits to the markup. ## ✅ Verification _Pending — this block is written by `tools/verify.mjs` after the build run._ ## 📋 Prompt ```text ## A. WHAT IS BEING BUILT One complete, valid index.html — single-viewport cinematic landing page for **Cadence**, a live-music tech company locking stage lighting, LED walls and cameras to a band's live tempo. Document title: "Cadence — Every Surface on the Beat". html lang="en". ONE file: plain HTML + one style block + one vanilla script at end of body. No build step, no framework, no bundler. **Viewport rule:** at width >= 901px the page is exactly one frame: html, body { height:100%; overflow:hidden } and .page { height:100dvh; overflow:hidden }. NO SCROLL on desktop. At width <= 900px it may scroll vertically. No horizontal overflow at 390, 768, 1440, 1920. **Do NOT build:** no video, mp4/webm/gif, remote images, base64 photo blobs, third-party CDN URLs, WebGL, Three.js, GSAP, Lottie, jQuery, Tailwind, React, audio, forms, pricing, testimonials, blog, cookie banner, scroll indicator, modals, waveform galleries, nothing beyond header / hero / meter / stats footer, desktop hamburger (burger <= 900px only). Google Fonts is the ONLY network request. **The single visual idea:** a black rehearsal room, one machine — a room-sized metronome. A weighted rod sweeps a smooth arc from a pivot near the top of frame, ticking at each extreme. Behind it a hairline beat grid pulses per beat and concentric rings emit from the pivot (heavier downbeat). Bottom-right: a monospace BPM readout (96.0 BPM, 4/4) with a four-bar beat meter. Nearly monochrome — graphite, bone white — one warm accent (#ff8a3d) for the beat only: rings, measure lines, active meter bar, pivot core. **Beat clock (one clock, all of it obeys):** BPM = 96. BEAT = 60/96 = 0.625 s. BAR (4/4) = 2.5 s. Pendulum sweep T = 2 beats = 1.25 s. Beats fire at the swing extremes (tick at the ends); the downbeat is the right extreme. --- ## B. THE BACKDROP — the metronome stage (counts, gradient stops, blur radii, drift periods) One fixed .backdrop (inset:0; overflow:hidden; pointer-events:none; z-index:0) holds: 1. **.bg** (z 0): radial-gradient(circle at 50% 7.5%, rgba(255,138,61,0.13) 0%, rgba(255,138,61,0.05) 26%, transparent 52%); linear-gradient(180deg, #0a0a0b 0%, #101013 44%, #0c0c0e 74%, #08080a 100%). 2. **.glow** (z 1) pivot halo: left:50%; top:7.5%; 720x720px; translate(-50%,-50%); radial-gradient(circle, rgba(255,170,96,0.22) 0%, rgba(255,138,61,0.09) 34%, transparent 68%); filter:blur(44px); opacity:0.8; animation glow-breathe 11s ease-in-out infinite (opacity 0.62 <-> 0.92, scale 1 <-> 1.06). 3. **canvas#stage** (z 2) fixed inset:0; width:100%; height:100%. Repainted EVERY frame, never static; draws back to front: beat grid, pivot rings, pendulum. 4. **.scrim** (z 3) fixed inset:0: linear-gradient(180deg, rgba(8,8,10,0.58) 0%, rgba(8,8,10,0.10) 26%, rgba(8,8,10,0.52) 64%, rgba(8,8,10,0.90) 100%) — also fades the grid hairlines at top and bottom. 5. **.grain** (z 30) fixed inset:-50%; 200%x200%; opacity:0.05; SVG feTurbulence data-URI (fractalNoise, baseFrequency 0.8, numOctaves 2, stitchTiles, then saturate 0), tile 160px; animation grain 0.9s steps(4) infinite, translating among (0,0) (-2%,1%) (1%,-2%) (-1%,2%). **Geometry (canvas 2D, no libraries).** Cached { w, h } read once per resize. Pivot P = (w * 0.5, h * 0.075; h * 0.06 at <=900). Rod L = h * 0.52 (>=1600) / h * 0.50 (1280-1599) / h * 0.48 (901-1279) / h * 0.44 (max-height 850) / h * 0.38 (max-height 720) / min(h * 0.34, 300px) (<=900) / min(h * 0.28, 220px) (<=560). Weight 44x64px default; 48x70 (>=1600), 52x76 (>=1920), 38x54 (max-height 850), 32x46 (max-height 720), 34x50 (<=900), 28x40 (<=560). Amplitude A = 26deg (24deg <=900, 22deg at max-height 720). theta(t) = A * cos(2 * PI * t / 1.25); at t = 0.625 * k the angle is exactly +/- A — the beat tick. **1. Beat grid:** hairlines x_i = i * PITCH, i = 0..ceil(w/PITCH). PITCH = 30 (>=1600) / 26 (1280-1599) / 22 (901-1279) / 18 (<=900) / 14 (<=560) px — 56 lines at 1440x900. Weak lines (i % 8 !== 0): rgba(226,226,222, a_i), 1px. Measure lines (i % 8 === 0; 7 at 1440x900): rgba(255,138,61, a_i * 0.85), 1.4px. Full height (.scrim fades the ends). Alpha: - p = (t / 0.625) mod 1; beatEnv = exp(-5.2 * p) (1.000 at the tick, 0.006 at the next). - shimmer = 0.05 * (0.5 + 0.5 * sin(i * 0.45 - t * 1.7)). - a_i = 0.045 + 0.22 * beatEnv + shimmer + (i % 8 === 0 ? 0.10 : 0). Batch into 6 alpha buckets, ONE beginPath() per bucket — 6 draw calls for 56 lines. **2. Pivot rings:** 4 pre-allocated slots (NO allocation in the loop), slot beatIndex % 4; on each beat boundary store born = t, down = (beatIndex % 4 === 0). Age a = t - born <= 1.6s: r = 14 + 300 * a px (494px at death); stroke rgba(255,138,61, 0.30 * pow(1 - a / 1.6, 1.7) * (down ? 1.4 : 1)); lineWidth = down ? 2 : 1.2. Housing circle at P: r = 22px, rgba(226,226,222,0.14), 1px. **3. Pendulum:** pivot cap: filled r=7px #0a0a0b, 1.5px rgba(226,226,222,0.55) ring, accent core dot r=2.5px rgba(255,138,61,0.95). Rod: 3px line (2px <=900) P -> tip at L, rgba(232,232,228,0.92), round caps. Weight: rounded rect centred at 0.70 L, rotated with the rod — fill #d9d9d5, 1px rgba(255,138,61,0.55) stroke, radius 5px, one 1px rgba(10,10,11,0.5) groove. Tip cap r=5px rgba(255,138,61,0.9). Trail: 4 ghost rods at t - 0.024 / 0.048 / 0.072 / 0.096 s, 2px, alphas 0.07 / 0.05 / 0.035 / 0.02. Scale arc: 11 ticks -A..+A (step 5.2deg), radius L*1.02 -> L*1.06, 1px rgba(226,226,222,0.22), extremes rgba(255,138,61,0.55); hairline arc at L*1.02 across 52deg, rgba(226,226,222,0.12). **Resolution trick:** dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = cssW * dpr; canvas.height = cssH * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0). getBoundingClientRect only inside resizeCanvas(). Resize: one boolean resizeQueued + requestAnimationFrame. **Per-frame cost budget (1440x900):** 1 clearRect + 6 batched grid paths (56 strokes) + 3 ring arcs + 5 rods + 11 ticks + 1 arc + 5 fills = 12 draw calls. ZERO ctx.filter / ctx.shadowBlur anywhere, ZERO DOM writes. Under 2 ms/frame; >= 20 frames per 1.2s headless. document.hidden: keep loop and counter, skip the paint. **Drift periods (non-harmonic on purpose):** pendulum 1.25s, beat 0.625s, bar 2.5s, glow-breathe 11s, grain 0.9s. --- ## C. THE LAYER STACK (back -> front, z-index) 1. html, body — #0a0a0b, forced twice (Failure Guards). 2. .backdrop — z 0, fixed inset:0, pointer-events:none, overflow:hidden. Inside: .bg 0, .glow 1, canvas#stage 2, .scrim 3, .grain 30. 3. .page — z 40; position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:100dvh (height:100dvh inside the desktop lock). 4. main.hero — z 50. 5. header.site-header, footer.stats-footer — z 60. 6. .menu (mobile, open) — fixed inset:0, z 80. --- ## D. TOKEN TABLE (defaults at 1440x900) ``` --bg: #0a0a0b --bg-2: #101013 --text: #f2f2f0 --text-soft: #d6d6d2 --muted: #9a9a96 --dim: #6a6a66 --accent: #ff8a3d --accent-hot: #ffc38a --accent-soft: rgba(255,138,61,0.55) --accent-line: rgba(255,138,61,0.32) --grid-line: rgba(226,226,222,0.22) --border: rgba(242,242,240,0.14) --border-soft: rgba(242,242,240,0.08) --focus: #ffc38a --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace --logo: 16px --logo-track: 0.20em --nav: 13.5px --nav-h: 38px --btn: 13.5px --btn-h: 44px --chip-h: 30px --eyebrow: 11.5px --h1: 76px --lead: 18px --bpm: 64px --bpm-unit: 13px --meter-label: 11px --meter-h: 26px --stat-val: 26px --stat-label: 12px --header-y: 26px --header-x: 44px --hero-x: 44px --hero-bottom: 56px --copy-max: 700px --meter-w: 300px --radius-pill: 999px --radius-sm: 5px --focus-w: 2px --focus-offset: 3px --grain-op: 0.05 --glow-blur: 44px --ease-out: cubic-bezier(0.16,1,0.3,1) --enter-dur: 0.95s ``` Fonts: Google Fonts ONLY — Inter 400;500;600, JetBrains Mono 400;500 — one preconnect to https://fonts.gstatic.com (crossorigin) + one stylesheet link with display=swap, fallbacks as above. BPM digits use font-variant-numeric: tabular-nums. --- ## E. THE COMPOSITION — exact build order **.page** holds
,
,