TerzaPower
Landing · lead pipeline · Alexey Sukhariev · Design engineer
A medical offer needed a page that could take paid traffic on a near-zero infrastructure budget, on a platform I did not control, with two independent buying teams pouring into it at once. Three weeks, solo: the page, three WebGL scenes, the lead pipeline into CRM, and two hosting architectures — the second one built after measurements killed the first. Images load in 0.2–0.5 seconds from the edge, against 6–8 on the CDN it replaced.
Not a website — an instrument for paid traffic
The client sells a prescription weight-loss course as one package: the drug, an endocrinologist’s consultation, lab work, a personal schedule and supervision through the course. The audience is people who have heard of these injections and are afraid of buying them from a stranger, so the whole page argues one thing — that a doctor is attached to this. What was ordered, though, was not a website. It was a working instrument for buying traffic: a page that converts a cold click, a form that lands in the CRM, leads separated by buying team, pixels per page, and hosting that will not fall over or run up a bill when the ads are switched on.
The constraints wrote the architecture
Four of them, and every technical decision downstream traces to one. The infrastructure budget was effectively zero, while the traffic was paid and therefore unpredictable. The live page had to sit on a website builder the client already pays for and can edit himself — so my code had to survive that platform’s own validator. There could be no build step: one index.html that opens on a double-click and works, no bundler, no framework. And every photo and video was the client’s own, shot in different conditions, some of it 100 MB files straight off a phone — no stock, and trademarks were to be processed, never redrawn.
Editorial, not another SaaS template
The first design came back as “dated” — teal gradients and rounded SaaS cards. What replaced it is editorial: an oversized wordmark, asymmetric grids, a marquee, dark pill buttons, and typography doing the work instead of decoration. Then the finished photoshoot arrived and broke the palette. The warm cream base I had built argued with every frame — the doctor’s scrubs, the chair, the packaging, the room were all cold turquoise. I moved the whole palette to cold and put it into root tokens, so the next reversal of that size would cost an hour instead of a day. The dark sections now read as a continuation of the room in the photographs.
The block the offer stands on
Everything on this page is an argument about trust, and this block carries most of it. Seven client cases live in one block on a reel of thumbnails. Two of them are pairs shot in the same frame, so they get a wipe slider on clip-path: drag the handle and before becomes after in place. The rest are single finished frames, and picking one rebuilds the entire left column — quote, name and numbers give way to neutral copy, and the handle disappears, because there is nothing to compare. There used to be a separate gallery section as well; the client cut it, and it folded into this block.
The package is the client’s own print artwork
The order modal opens with the product turning slowly in its header. It is not a stock render: the client sent the box dieline, I cut it into three maps and wrapped them on a box in Three.js, with ACES tone mapping so the white face does not blow out. Three.js itself — about 600 KB — is not downloaded at all until the modal is opened for the first time, so it costs nothing to a visitor who only scrolls. One thing about that scene is invisible until production: with the page on one host and the textures on another, the browser marks the canvas as tainted and every face renders black. It works locally and breaks live, and the fix is a CORS header plus crossOrigin on the images.
The form does not just say thank you
On submit the form does not swap for a line of text. The card crossfades into a second WebGL scene: the package grows and spins, drops into an open kraft box, the box takes the impact, two flaps close over it with an overshoot, confetti fires, and the parcel drives off to the right — then the scene collapses and a checkmark springs in. The first version froze at exactly the wrong moment, because building a WebGL scene synchronously on the click blocks the frame. The scene is now assembled when the modal opens, and the submit only presses play.
One hidden field decides whose lead it is
Two independent buying teams pour traffic into the same offer on their own domains, plus a third, form-only page for a channel that does not need a landing at all. All three post to one serverless endpoint, which fans out in parallel: a message to the managers’ Telegram group, and a deal with its contact created in the CRM in a single call, with the delivery details attached as a note rather than as custom fields in someone else’s account. If one leg fails the lead still lands in the other. The teams are told apart by a single hidden field in the form, which becomes a tag on the deal, with the domain as a fallback — that field is the only line where the copies of the page differ.
Two architectures, and one of them was mine to undo
Generation one put the page on the builder the client controls, the heavy assets on a free CDN so ad traffic would not eat the free hosting quota, and only the webhook on serverless. The builder’s HTML block turned out to be parsed as strict XML, not HTML: an inline script is impossible — any && or < kills the parser — and a bare & in a font URL is read as an entity. So all 477 lines of JS moved to an external file, with an onerror that forces every reveal-animated section visible, because a CDN outage would otherwise mean a blank page. Generation two came when the buyers needed their own click tracker in front of the page, which the builder cannot host. One repository now deploys into two projects that differ only by environment variables, with a small PHP tracker in the same project. And the CDN, the right answer in generation one, was dropped in generation two: on a cold path it served small images in 6–8 seconds against 0.2–0.5 from the edge. It was reversed on the measurement, not on taste.
What got thrown away
The photos were supposed to come alive: a WebGL depth parallax, with real depth maps generated locally for all five images, overscan so the frames would not tear, reacting to the cursor. It worked. The client looked at it and said it was wrong for faces — and he was right, because depth warping deforms features, and the entire offer rests on trusting the people in those photographs. The engine is commented out and a five-degree CSS tilt does the job instead. That is the shape of most decisions here: a dark version of the page was built and rejected, the warm palette was built and replaced, three type variants went out and one came back. Technically harder lost to simpler more than once, because the task was never to show 3D — it was to not spoil the doctor’s face.
What shipped
Three weeks, alone: a twelve-section page in a single 1 455-line file with no dependencies and no build step, three WebGL scenes, a lead pipeline into Telegram and CRM with per-team tagging, a PDF lead magnet generated offline so the fonts embed properly, and two hosting architectures. What I do not have is the part everyone wants in a case study: conversion, cost per lead, volume. The page was handed over for traffic and those numbers stayed with the client, so there are none here rather than invented ones.
← Alexey Sukhariev