Marketing site for a consumer AI-content platform: dark premium in a single file
A landing page benchmarked against top-tier AI-product sites, hand-written in one 42 kB HTML file — no builder, no framework, no external JavaScript.
Context
The client operates a consumer platform that packages generative AI models — image, video, music — behind one-tap viral templates, with local card payments as a core differentiator. Its public face, though, looked like its regional peers: template-driven, generic, indistinguishable from a dozen reseller storefronts.
When the product is access to other companies' models, the site is the primary proof of quality: users judge whether the platform deserves a subscription by whether its own front door shows visual craft. So the engagement started from research — profiling the strongest AI-product sites, taking a leading AI-video product's site as the explicit benchmark, and auditing the direct competitive set.
The task
Deliver a marketing site that reads as a top-tier AI product — dark, editorial, restrained, with motion that feels engineered rather than decorated — and with nothing on the page achievable in a website builder. The second deliverable was an in-app catalog screen — a working mockup of the product's core surface on real structured data.
The engineering constraint: hand-written vanilla HTML/CSS/JS, no build step, no framework, no external scripts — a file the client's developers can open, read and extend without adopting a toolchain.
Approach
The competitor audit was treated as an input artifact. Its synthesis named the devices that separate top-tier AI-product sites from the rest — a full-viewport hero with real-time rendering, a monospaced technical voice as a design element, oversized display typography, almost no marketing chrome — and the design brief was written directly from that gap analysis.
Two complete directions, dark and light, were built as fully scrolling, animated pages, so the client chose on real behavior: hero rendering, cursor feel, reading rhythm. The dark direction won. The page ships as one self-contained HTML file with Google Fonts as the only external request.
Design system
The visual language runs on four typefaces with strict roles: an ultra-bold geometric display for headlines, an italic serif for accent phrases, a neutral grotesque for body text, and a monospace for labels and interface chrome. The palette is near-black ink, bone off-white and one sulfur-yellow accent, used sparingly.
The hero is a WebGL canvas running a hand-written dither-lens shader, with a grayscale still as the no-WebGL fallback; a film-grain overlay, a blend-mode-inverting custom cursor and a difference-blend navigation sit above it — no libraries loaded. Motion runs on IntersectionObserver and requestAnimationFrame, honors prefers-reduced-motion, and gates cursor and hover treatments behind pointer-capability media queries so touch devices get standard interaction.
The catalog mockup
The second screen mocks the product's working surface: a catalog of viral trend templates driven by a structured catalog.json of 13 real cards, each carrying the fields the production app would need — model, credit price, generation time, aspect ratio and the prompts behind the template — validating the design against real content lengths and pricing granularity rather than placeholder text.
The JSON schema doubles as a draft content model for the production catalog: the client's team extends the mockup by editing data rather than markup, and Python tooling in the repository regenerates the trend imagery and preview videos.
Result
The client received a complete design package: the dark landing page as the primary deliverable, the light alternative archived as a documented road-not-taken, and the catalog mockup on structured product data — all previewing locally from a one-command static server.
The numbers carry the positioning argument: nine content sections, a WebGL hero, a custom cursor and scroll choreography in roughly 42 kB of HTML before fonts, with zero external JavaScript — lighter than a single hero image on a typical builder-made competitor site. Conversion measurement starts once the page ships on the production domain.
What we built
Single-file landing page
554 lines, ~42 kB: nine sections with design tokens, layout and behavior inline; Google Fonts is the only external request.
WebGL dither-lens hero
Custom shader over hero imagery on a full-viewport canvas, with a grayscale static image as the automatic no-WebGL fallback.
Four-typeface editorial system
Ultra-bold display, italic serif accents, neutral grotesque body and a monospaced technical voice for labels — each with a strict, documented role.
Blend-mode cursor and navigation
Custom cursor and fixed nav invert against underlying content via difference blending; both are disabled cleanly on touch devices.
Data-driven catalog mockup
A second screen renders 13 real trend cards from catalog.json — model, credits, generation time, aspect and prompts — validating the design against production-shaped content.
Two full design iterations
Dark and light directions built as complete working pages so the client chose on real scrolling behavior; the dark direction was selected, the light one archived.
Motion within accessibility limits
IntersectionObserver reveals, requestAnimationFrame loops, prefers-reduced-motion respected, hover effects gated behind pointer-capability media queries.
Engineering challenges
Custom cursor without excluding touch users
A cursor:none custom pointer is a desktop-only device; on touch it becomes a broken page. All cursor and hover treatments are gated behind hover/pointer media queries, so coarse-pointer devices get standard interaction and unfiltered imagery rather than a degraded desktop imitation.
WebGL as enhancement, not dependency
The dither-lens hero cannot be a single point of failure on weak devices or restrictive browsers. The canvas sits over a grayscale static image that carries the composition on its own, so a failed WebGL context degrades to a deliberate design, not an empty box.
Benchmark-grade motion at zero dependency budget
The reference sites lean on animation libraries; the constraint here was none. Scroll choreography, magnetic hover states and the progress indicator are built on IntersectionObserver, requestAnimationFrame and transform-only CSS transitions, keeping the page framework-free without visibly cheaper motion.
Choosing a direction on evidence, not taste debate
Dark-versus-light is the classic stalemate conversation. Building both directions as complete working pages converted the debate into an evaluation: the client compared real hero rendering, cursor feel and reading rhythm, and the decision took one session.