Website Visual Archive / cherrie
Cherrie presents an AI advertising manager through a stable shell, large claims, and one explanatory object per promise. The pricing estimator concentrates the system in a direct manipulation with deterministic values, motion, and gesture-gated sound.
This report studies the bounded six-route public marketing site captured on August 12, 2026. The reconstruction preserves route structure, content, layout logic, and measured interaction behavior. The exact mirror lives under /preview/cherrie/.
Browse the archived mirror in place. The pricing estimator remains interactive, with gesture-gated generated sound and mobile haptics. Forms, sign-up controls, booking, social links, analytics, and external network behavior are inert.
The archive includes landing, about, pricing, demo, privacy, and terms. It was built from static extraction, rendered desktop and mobile captures, accessibility trees, runtime summaries, scroll states, pricing interaction captures, temporal evidence, Web Audio probes, hover states, and reduced-motion observations. Pricing received the deepest treatment.
The deployed mirror uses local HTML, CSS, JavaScript, and SVG only. All forms and external affordances are inert. The pricing AudioContext is created only after a trusted gesture. A scoped content security policy blocks form actions and third-party connections. The mirror and report remain noindex.
A fixed floating navigation pill sits over one internal scroll region. Landing moves from a centered, oversized hero into alternating feature bands. About uses a large statement and loose polaroid collage. Pricing compresses the claim into one centered estimator and a regular card grid. Demo narrows into a practical form card, while the legal routes use a restrained reading measure.
A heavy grotesque display style carries the large claims. Body copy is lighter, gray, and spacious. Scale creates most of the hierarchy, while coral marks categories, actions, and changing values. The source custom font binaries were not frozen, so the mirror uses a system grotesque approximation.
The palette is a warm near-white ground, white cards, near-black type, muted gray explanation, hairline borders, and a coral-to-cherry accent family. Rounded rectangles, soft shadows, and faint dotted textures make the product feel approachable. The pricing result card concentrates the richer material treatment in a one-pixel animated border beam and restrained glow.
Wide whitespace isolates each major claim. Short declarations alternate with interface demonstrations, so the long landing page reads as claim, object, pause, then the next claim. Pricing uses the reverse strategy: a compact instrument first, followed by a calm regular grid.
Landing uses ambient movement and animated accents. Pricing turns motion into feedback: odometer digits spring to new values, slider bars reshape over 150 ms, card content reveals over 300 ms, and a border beam rotates every 1.96 seconds while its hue shifts over 12 seconds. Each crossed slider line produces a 15 ms sine click after a trusted gesture. Pitch rises from 1000 to 2000 Hz with value.
Display headlines shrink but remain dominant, content becomes one column, and the landing email form stacks. The pricing slider changes from 80 bars to 40 below 768px, with matching feedback quantization and a 3 ms vibration request per crossed line. The local mirror also adds keyboard controls, ARIA range semantics, and a reduced-motion mode.
The public source is a Next.js application. The mirror uses seven generated static HTML files, one shared stylesheet, two small browser scripts, and local assets. This preserves the visible and measured behavior without recreating the source framework.
The body stays fixed while #info-scroll-container owns vertical scrolling beneath the floating navigation. This shell behavior is shared across all six routes and is essential to the source framing.
Slider state is an integer from 0 to 100. Daily spend follows a cubic curve from $100 to $500,000 and snaps to $100 increments. A 43-row rate table lowers the displayed fee from 5.0% to 0.8%. Views, clicks, conversions, and revenue derive from fixed formulas.
The first trusted pointer or keyboard gesture creates or resumes the AudioContext. A crossed slider line generates a short sine click with a 2 ms attack and 15 ms decay. Resting animation has no sound, and sound never loops.
The source custom slider has no keyboard or assistive-technology contract and continues moving under reduced-motion preference. The mirror adds range semantics and keyboard input, then stops continuous motion and snaps value changes for reduced motion without changing the commercial state model.
Forms, booking, sign-up, social affordances, and external requests remain inert. Final revision 02 passed 46 Chromium Playwright tests and a static safety scan, and all 71 frozen deployment-source artifacts matched their accepted hashes before packaging.
The page asks the reader to believe that Cherrie can take over a fragmented, technically demanding advertising operation and make it simple. "The AI Ads Manager" names a category but leaves unanswered what the system manages, which channels it spans, how automation affects performance, and what paying for it might mean. The site answers through increasingly concrete artifacts. A dashboard gives the promise an interface and visible metrics. Brand marks and campaign creative imply customer, channel, and asset breadth. Feature bands divide the platform into familiar jobs. The pricing estimator carries the most explanatory weight because it turns a broad commercial promise into a model the reader can manipulate. Spend, fee tier, projected revenue, views, clicks, and conversions move together inside one field. Each route assigns one main object to its job: dashboard and feature sequence on landing, estimator on pricing, photo collage on about, and booking form on demo.
The visual and temporal choices make a potentially intimidating system feel calm, premium, and approachable. Large type gives confidence to short claims. Wide whitespace keeps a dense product category from feeling dense. Muted neutrals lower the visual temperature, while coral gives actions and changing values one continuous pulse. Most movement stays faint or contained. The pricing card's glow and sound turn an ordinary calculator into the focal instrument without making the whole page restless. The strongest transferable choice is the alternation between plain claims and proof-like objects. A short statement appears, then a dashboard, creative transformation, people network, support queue, or calculator shows what the statement might mean.
Illustrated: the page depicts a cross-channel dashboard, brand learning, creative production, pooled rewards, support access, and projected advertising outcomes. Observed: the public surface contains the six documented routes, section sequence, interactive pricing formulas, generated audio behavior, responsive breakpoint, motion timings, and fixed scrolling described here. Proven: within this archive, route structure, pricing source code, deterministic calculations, runtime behavior, and mirror safety are supported by extracted source, browser probes, hashed manifests, review, and automated tests. Gap: the product's advertising performance, AI quality, customer adoption, $500M training claim, projected outcomes, uptime, and business results are not independently proven by this website study. Product access, customer evidence, technical documentation, original design tokens, source image binaries, tablet source rendering, dark theme, and several decorative-motion details remain outside the packet.
Give each consequential promise a distinct artifact that clarifies a mechanism or outcome. The object should carry inspectable information rather than decoration.
Turn a nonlinear price or value model into a direct manipulation. Keep the input, fee, assumptions, and outputs together, and label estimates honestly.
Keep most of the page neutral and still, then concentrate motion and chromatic detail around the object that deserves attention.
Use a stable product shell to connect marketing, company, pricing, form, and legal routes while letting each route adopt the density its job requires.
Reduce visual marks on narrow screens while preserving the range and state model. Cherrie changes from 80 slider bars to 40 and keeps the same 0 to 100 value contract.
A faithful study can preserve source appearance while improving keyboard semantics and reduced-motion behavior. Name the difference instead of presenting it as source behavior.