Arcada Dental Studio

Context

Clinics that already pay for clicks

Thousands of US and Canadian patients cross into Mexico every year for dental implants, often after being quoted $20,000 or more at home. Clinics in border cities like Tijuana compete for them with Meta and Google ads aimed across the border.

These clinics already spend money on every visitor. That makes them an unusually good client for design: a better landing page doesn't have to be argued for on taste, because it shows up in the cost of each consult request.

Arcada (Spanish for the dental arch) is a fictional clinic we invented to show that offer end to end. Everything about it is labelled as a concept: the doctor, the prices, the reviews and the ads.

The problem

The ad makes a promise. The page forgets it.

Look up these clinics in the Meta Ad Library and follow their ads, and the pattern repeats. The ad promises something specific; the click lands somewhere general.

• Generic homepage. An ad for "full-arch implants in 2 trips" opens on a slider about whitening, veneers and the clinic's history.
• No price where the ad showed one. The number that earned the click is nowhere on the first screen.
• Spanish first for an English audience, or English that reads like a machine translation.
• Slow on a phone, where nearly all of these ads are seen.
• Five calls to action instead of one: WhatsApp, call, book, chat bubble, newsletter.

Underneath all of it is the patient's real fear: not knowing what they will get. Materials, hidden costs, what happens if something goes wrong. A generic homepage answers none of it.

The idea

See exactly what you're getting

Arcada answers the fear of the unknown with transparency you can rotate. The implant is in 3D, so you see every part before anyone touches you. The price is itemised in USD, line by line. The two trips are laid out on a timeline. And each ad lands on a page that repeats its promise word for word.

The project has two jobs. The homepage proves we can do premium. The landing-page system proves we can do it fast, for one exact ad, and it is the product we pitch: every prospect's ads are public, so the pitch can show their own ad beside a page built for it.

Light and clinically precise, unlike our dark, neon or earthy concepts: porcelain and bone surfaces, a deep blue-black ink, titanium grey for the metal, and one deep teal that always means "this is the next step."

Homepage

An implant built entirely in code

The plan was to model the parts in Blender and export a GLB. We built them in code instead. Every part is generated in TypeScript when the page loads, so there is no model file to download, and the stills, ads and fallbacks are rendered from the same scene the visitor scrolls.

1 Three parts, apart

The hero opens on an exploded view: a titanium post with a true helical thread, a lathed abutment and a zirconia molar crown with cusps, turning slowly on a dark studio backdrop. Mono labels hang off each part, and each one opens a one-line explanation. Drag to rotate; the arrow keys do the same.

The thread is the detail that sells it. Its pitch is physically correct, so as the post descends it turns exactly one revolution per thread, the way a real implant is screwed in.

2 Scroll puts it together

About three screens of scroll drive the assembly. A frosted-glass jaw rises in (no gums, nothing clinical), the post screws into it, then the abutment seats and the crown drops on. A caption beside it names each part's material and what it does.

Ad landing pages

The page says exactly what the ad promised

Each ad gets its own page, and its first screen repeats the ad: the same headline, the same visual, the same price and the same words on the button. There is no menu and one goal, a request for a free written plan.

We designed two demo campaigns, one per platform, with different angles.

A Meta: speed and clarity

"Full-arch implants in 2 trips. See the whole plan before you fly." The Feed ad leads with the plan and the price, $8,900 per arch, never with how anyone's smile looks. The landing page uses the same photo without the text on top, the same headline word for word, and a button that says "Get my free plan."

Brand

One clinic, one look, everywhere

The mark is a double arch: a dental arch seen from above, and the arcade of a building. It works as a favicon, as embroidery on a coat and as a sign on the reception wall. The wordmark is outlined from Geist, with the descriptor in Geist Mono.

Homepage sections

Every worry gets a section

Two trips, one plan. A line draws through the journey as you scroll: virtual consult, trip 1 (implants placed), 3–6 months healing at home, trip 2 (final teeth). Each stop lights up, and a small plane rides the tip of the line and turns around for the flight home.

English and Spanish

English first, Spanish beside it

The patients who click these ads read English, so English is the default, written for them: plain prices in USD, short sentences, no clinic jargon. Every page has a Spanish mirror under /es/, written rather than machine-translated, for Spanish-speaking patients in the US and for the clinic's own staff.

Campaigns, treatments, FAQs and the doctor carry their own Spanish fields, so a new ad comes with both pages. Switching language on a landing page keeps the UTM parameters and click IDs, so the clinic still knows which ad the lead came from.

Compliance

Built to pass review in both countries

Health advertising is regulated on both sides of the border, and an ad that gets rejected or a page that gets a clinic fined is worse than no page. So the rules shaped the design from the start, and the concept models them. (This is design practice, not legal advice: each client confirms with their own counsel.)

• COFEPRIS (Mexico). Promoting a health service, even on the clinic's own site, needs an advertising notice or permit. Every footer has a placement for the notice number, and credentials appear as "Cédula 0000000 (example)", where a real clinic shows its real cédula.
• No before/after, no patient photos. Mexico treats them as regulated advertising, and they are the first thing ad reviewers flag. The 3D model and the illustrations carry the visuals instead.
• Meta's health policy. Ads target 18+ and never make people feel bad about how they look. No "embarrassed by your smile?": the ads lead with the plan and the price.
• Sample testimonials, labelled. Reviews on the homepage and landing pages are marked as samples for a fictional clinic; a live clinic shows verified patient reviews there.
• Honest numbers. The "typical US range" next to each price is labelled as an example, since savings claims need a real, current source per client. No implant brand names and no trademarked treatment names: "full-arch implants" says it plainly.
• Visibly a concept. Every page is noindexed and carries a concept banner. The phone number is a dummy, the forms send nothing and end on a "design concept" screen, and there are no trackers: the Meta Pixel and Google Ads setup is documented for real clients, with a consent banner.

Performance & accessibility

50 → 94 on the ad page

The person clicking an implant ad is usually on a phone, often on a mobile connection. The landing pages ship no 3D runtime and almost no JavaScript, and the 3D lives only on the homepage, loaded after the headline has painted. We measured the first deploy, then tuned it: on the full-arch ad page, performance went from 50 to 94, the largest content now appears in about 2.5 s instead of 5.1 s, and accessibility is 100.

Under the hood

How it's built

• Stack: Astro 7 (static), TypeScript, Three.js on the homepage only, no UI framework. About 3,700 lines of hand-written source.
• Procedural parts: the post is a grid surface wrapped around its axis with a helical thread profile; the abutment is lathed; the crown is a tooth silhouette revolved with a rounded-square section, four cusps and a groove; the arch is swept from a jaw profile. Materials are physically based: brushed titanium, clear-coated zirconia, frosted glass.
• Scroll timeline: one progress value from 0 to 1 drives jaw, post, abutment, crown, pull-back and hand-off, eased so a fast flick still reads. Frames are only redrawn when something moved.
• One scene, every image: the implant still on the single-implant page, the full-arch still and the no-WebGL fallback are rendered from the live Three.js scene, so the 3D, the fallback and the landing pages always match.
• Content collections: campaigns, treatments, FAQs, doctors and themes are typed with Zod schemas. /lp/[slug] is generated from the campaigns, in both languages.
• Themes as files: a landing page reads its campaign's theme and writes the tokens to :root. A new client is one JSON file and a logo.
• Attribution ready: UTM parameters, gclid and fbclid are captured into hidden form fields, so each lead shows which ad produced it.
• Ad creatives from code: the Meta creatives are HTML layouts rendered by a headless browser, so changing the headline or price re-renders Feed, Stories and video in one step.
• Built for real devices: the 3D adapts to what each visitor's device can handle: full quality on a graphics chip, a lighter version when the browser falls back to software rendering, and a still image only as a last resort. Every visitor gets the best version their device can show.
• Navigation that steps aside: the menu hides while the 3D hero tells its story and comes back the moment you scroll up, with the section you're in highlighted. On phones, one “Send your X-ray” button stays within thumb reach, and hides once the form is on screen.

Outcome

A clinic you can see through, and a page for every ad

Arcada shows both halves of the offer. The 3D homepage is the proof of craft: an implant built in code that assembles as you scroll and hands off to an honest, itemised price. The landing-page system is the product: a page per ad, in two languages, about 100 KB, built from one entry, with the rules of both countries designed in. Together they turn a cold pitch into a simple comparison: your ad, your page, and the page your ad deserves.