How this site
was made

One line, honestly

The Renaissance, on auto

The reference edition’s idea — Renaissance oil paintings colliding with anachronistic hot-pink modern props — maps almost too well onto Otto: an old-world correspondence secretary reborn as software. So the study keeps every signature device and refills it with Otto’s story:

• The typographic pun becomes “The Daily Edition” — the calligraphic “ai” hides artificial intelligence inside Otto’s daily brief, exactly as the reference hid it inside “Renaissance.”
• The hot-pink #FF2D9B props become Otto’s furniture: a glowing smartphone, raining envelopes, a paper plane (the Telegram brief), a padlock (local-first privacy), a laptop lighting up a merchants’ table.
• Roman numerals I–X index ten chapters of Otto features; senders in the UI mockups are Italian Renaissance names (Niccolò, Ginevra, Lucrezia, Cosimo, Isabella).
• Warm parchment cream #EDE9E0 carries the product copy; massive 150–220px chapter titles sit directly on the paintings.

Built with almost nothing

• Nearly zero dependencies: static HTML/CSS and vanilla JS with two vendored libraries — Three.js r170 for the WebGL2 scene system and Lenis for smoothed scroll. No frameworks, no build step (no GSAP, no Lottie).
• Persistent WebGL2 scene system: on capable desktops a single full-viewport canvas runs six true-3D scenes (one per mega-chapter) through one render loop. Each scene places painting crops, figure cutouts and UI cards on real Z-separated planes in front of a perspective camera; scroll position scrubs the camera (dolly, tilt, pan) via per-chapter scroll drivers, and the pointer adds a damped gaze offset. Scene handoffs blend through a painterly value-noise + ordered-dither dissolve, and the shared post chain adds restrained bloom, vignette and film grain. DPR adapts to frame rate, rendering pauses when no scene is visible, and reduced-motion / mobile / no-WebGL visitors get the full DOM fallback below.
• Motion forensics: the motion pass was reverse-engineered from frame-by-frame video analysis of the original — 38 captured frames and contact sheets of Shopify Editions Winter ’26 were studied to identify the canvas intro (frame draw → constellation hairlines → title → organic iris reveal), the independently drifting hero layers, the ambient looping video backdrops, the torn-paper seams, and the floating UI cards docking on scroll.
• Canvas intro: a full-viewport <canvas> engine plays once per session: a 1px white frame strokes itself around the (measured) hero card, hairline constellation lines radiate from its corners, the title fades in, then the hero painting is revealed through an expanding soft-edged organic iris mask (destination-out blob with sine-modulated radius). Skippable on click/scroll; reduced motion gets the hero instantly.
• True-3D hero: the hero painting is decomposed into planes at distinct camera depths — background plate, cypress and vine wings, parapet, the two photographic figures, an emissive 3D phone, and tumbling pink props — so the camera push produces real parallax and scale change. The white title frame is drawn in-scene at depth so the flying figure’s forearm crosses in front of it, and at the chapter’s end a fingertip particle burst hands off to a painterly dissolve into the night sky.
• Real-time chapter scenes: the night field is a three-shell 3D starfield with nebula washes and an emissive comet ribbon that crosses in front of the arriving inbox card; the study is a candlelit perspective corridor where letters converge into a page-flipping book before the phone rises to occlude it; the fresco dome carries five doves on distinct depth paths (one crossing behind the gilt ring) under a scroll-scrubbed camera tilt; the colonnade pushes past columns as a reflective pink padlock lifts off its painted pedestal; and the founding portrait ends on a slow push with the mega-title occluded by the painted figures. These scenes replaced the earlier looping ambient videos entirely.
• Torn-paper seams: painting stages meet the cream sections through irregular torn-edge SVG paths (procedurally generated jagged displacement), not straight lines.
• Sticky painting chapters: each chapter is a 150–170vh wrapper with a position: sticky 100vh stage; the cream content scrolls over the pinned painting (negative-margin overlap), and floating composited UI cards drift inside the stages, docking as you scroll deeper.
• Scrollspy: a fixed left Roman-numeral nav driven by scroll position, with mix-blend-mode: difference so it stays legible over paintings and cream alike.
• Reveals: IntersectionObserver adds fade-up and scale/fade classes; everything collapses to static under prefers-reduced-motion.
• Type: Switzer (Fontshare) as the neo-grotesque voice; Italianno (Google Fonts) for the calligraphic “ai” and the drop-cap initials.

Six original paintings

All imagery was generated with Nano Banana Pro and compressed to WebP (the whole site ships under 2 MB):

1. Hero — pastoral landscape, two floating figures, pink smartphone, envelopes, paper plane, coffee cup
2. Triage — near-black night sky with gold-leaf stars and a pink comet
3. Agentic — candlelit Renaissance study with a glowing pink phone on the desk
4. The Brief — baroque ceiling fresco of doves carrying a pink paper airplane
5. Private — classical Roman rotunda with a pink padlock on a plinth
6. Founding — group portrait of six merchants around a glowing pink laptop

Quality by repetition

After the first “done,” the site went through five full Playwright QA passes at 1280px and 375px — full-page screenshots, a written list of flaws, fixes, and re-verification each time:

• Pass 1: layout truth — hero card position over the painting’s open sky, mega-title clipping at 375px, chapter-tagline contrast over bright paintings, mobile chapter-index density.
• Pass 2: rhythm and polish — cream-section vertical rhythm, table divider alignment, drop-cap baseline tuning, scrollspy hand-off points between chapters.
• Pass 3: final sweep — console-error audit, horizontal-overflow check at 375px, reduced-motion verification, contrast spot-checks, payload budget.
• Pass 4: motion parity build — canvas intro, layered hero parallax, ambient video stages, torn-paper seams, floating UI, and stage pinning, each verified with scroll-position screenshots.
• Pass 5: motion QA sweep — intro/iris timing captures, video playback state checks, reduced-motion re-verification, overflow and console re-audit at both widths.
• Pass 7: independent art-direction finishing — props rebuilt as physical objects (leather-bound book with true page thickness and mirrored flipping leaves, gold-shackled padlock resting on its painted pedestal, warm sub-bloom phone screens), the painted neon lock retouched out of the colonnade backdrop, the fingertip burst reduced to a scroll-scrubbed glint, a finer dual-frequency painterly dissolve, corridor lighting balanced for legibility, and a title-scaling bug fixed so the 'Founding' mega-title renders uncropped. Re-verified: zero errors, luminance floor, mobile/reduced-motion fallbacks, intro skip.
• Pass 6: full 3D rebuild — the flat sine-drift / ambient-video depth surrogates were replaced by the persistent WebGL2 scene system above, then verified across three build/inspect/fix rounds: scroll-position and mid-transition screenshots at 1440px and 375px, mean-luminance floor checks on every capture, occlusion-crossing evidence, prop-scale measurement (+28.8% over the hero push), reduced-motion and no-WebGL fallback checks, intro-skip verification, and zero console errors.

The full log lives in ITERATIONS.md beside the source.

Give Computer a brief

The workflow is simple: hand Perplexity Computer a brief. It researches the reference, writes a design spec, generates original artwork, builds the static site, QA-iterates against real screenshots, and deploys to Vercel. What you’re reading is the artifact of exactly that loop.

back to the edition ↗