Canvas, explained.

01The concept

The modern AI-infrastructure SaaS surface, rebuilt for advisory work: a calm workshop ground where the practice's real artifacts, an exam question, a booked slot, a funnel, a client note, float around one enormous promise. Every object on the page is drawn in code and carries an honest number; the prompt pill at the centre is the only "AI" gesture, and it just points you at the right tool.

02Palette

One hot accent rule: amber owns CTAs, the caret, cursor leaders and underline moments. Product colours never leave their own artifact cards, and only as dots, ticks, bars and soft header washes.

03Type system

No serif anywhere. This is the modern variant of the five, so the grotesk does the talking and the mono does the counting.

04Signature: the artifact orbit

Six code-drawn artifacts from the four products drift around the hero promise, parallaxing gently away from the cursor. At its base sits the prompt pill: an input-shaped object whose placeholder types the four jobs a practice has ("pass M9 in three weeks…") and, on press, scrolls to the tool that does it. Chosen because it makes the honesty rule visible: the things floating are real objects with real numbers, not decoration, and the "prompt" resolves to a product, not a promise.

05Techniques used

• Typed placeholdersetTimeout typing loop with variable cadence, deletion pass and a CSS-blink caret; reduced motion swaps in static text, the button still navigates.
• Cursor parallax orbitone pointermove listener feeding a lerped requestAnimationFrame loop; each artifact multiplies the shared --mx/--my by its own inverse depth. Idle drift is a pure CSS alternate keyframe.
• Multiplayer cursorsnamed SVG cursors travelling CSS offset-path bezier routes on the two big panels; reduced motion parks them at staggered offset-distance values, labels intact.
• Pill-rail canvasaria-pressed rail buttons cross-fade absolutely stacked artifact clusters (opacity and scale only, no layout shift), hover on fine pointers, click everywhere.
• Scroll-shrink navbarfloating blurred pill that tightens its padding past 40px of scroll; passive listener, class toggle only.
• All imagery as codeexam card, booking slot, funnel bars, corgi sticker, lens dots, sticky note: HTML, CSS and inline SVG. No bitmaps, no art assets, page ships as one file plus fonts.
• Overflow disciplineoverflow-x: clip on html and body, so mid-animation transforms can never widen the document on phones.
• GLSL aurora field — a custom fragment shader (5-octave fbm) blends amber, blush and periwinkle over the ivory ground, breathing slowly and leaning toward the cursor.
• Editorial type pairing — Bricolage Grotesque 800 display against Instrument Serif italic accent words; the underline is an animated gradient that draws, then shimmers.
• Entrance choreography — a GSAP timeline reveals the hero and springs the artifact orbit in; the primary CTA is gently magnetic under fine pointers.

06Scorecard

Rubric score — pending final pass