PostHog Website OS — desktop icon workspace to pricing slider and docs explorer
Visitors land on a full-viewport in-browser desktop with double-clickable app icons, open an interactive event-volume pricing calculator inside a draggable OS window frame, and inspect technical documentation in a three-pane file-tree explorer.
Step 1 of 3
PostHog Website OS — Draggable Multi-Window Product Workspace & Dock- grid/layoutReplace the standard SaaS marketing hero with a full-viewport desktop surface (`100vw × 100vh`) featuring a left-hand column of 64×64px double-clickable desktop icons (`Product OS`, `Pricing.calc`, `Docs.md`) and a persistent top menu bar.
- component patternEvery marketing section opens inside a focusable, draggable window frame with `1px solid #151515` borders, classic `[—] [□] [×]` titlebar controls, and z-index elevation on click.
Step 2 of 3
PostHog Pricing Window — Interactive Event Volume Slider Inside OS Frame- component patternRender per-product usage sliders inside a spreadsheet-style OS window where dragging monthly event volume updates a live itemized receipt column in real time with zero hidden enterprise tiers.
- copywritingInclude an explicit 'Free tier included' badge on the first notch of every slider so self-serve developers immediately see their $0/mo runway before scaling.
Step 3 of 3
PostHog Docs Explorer — Split-Tree File Manager & Markdown Reader Window- grid/layoutThree-pane file-explorer layout: a 220px collapsible folder tree on the left, a 65ch technical documentation viewport in the center, and an interactive 'On this page' table-of-contents inspector on the right.
- component patternCode snippets include a header bar formatted like a terminal sub-window with language selector tabs (`Node.js`, `Python`, `cURL`) and a one-click copy button.
Agents get the same order from get_reference: any screen's reply names the flow and every step in it.