Skip to main contentSkip to footer
    Back to Case Studies
    KARLEVFull-Size Living
    Brand PlatformConfiguratorManufacturing

    KarLev

    Engineering the future of housing. A Los Angeles ADU manufacturer needed a site that felt like an Apple keynote and ranked like a directory. We built both in the same page.

    Project Preview

    Live website preview - karlev.co

    240
    Frames in the scroll-driven walkthrough
    6
    Models, from ADU 400 to custom home
    10
    Technology and manufacturing pages
    5 days
    From first commit to launch

    Scroll-cinema homepage

    A 240-frame walkthrough scrubbed by scroll, rendered to a sticky canvas that is never the largest contentful paint.

    Ranks anyway

    Semantic, server-rendered sections scroll over the canvas, so every claim on the page is real HTML for search engines.

    Design Your ADU

    A deterministic configurator: model, exterior panels, flooring and add-ons priced live, encoded in the URL, and handed to the contact flow prefilled.

    A phone that does not crash

    Dual-tree layout: the canvas never mounts on touch devices. Six full-height panels take its place, all in the server HTML.

    Leads into a real CRM

    A five-step quiz and the contact form write to a Supabase leads table with status, source and financing fields, and an admin area for staff.

    Technology library

    Ten pages on the SmartFrame space-frame system, robotic fabrication and assembly, each with its own metadata and stats.

    The problem

    KarLev builds accessory dwelling units and custom homes in Los Angeles on an engineered space-frame system: components fabricated off-site by robots to half-millimetre tolerance, assembled on-site in as little as four weeks. Its founder, architect Alexis Rochas, came from a space-frame practice and SCI-Arc, and the product is genuinely different from a stick-built backyard unit. The brand promise is "Full-Size Living."

    The difficulty is that a product like that sells on feel and on trust, and those pull in opposite technical directions. The founder wanted an Apple-style cinematic walkthrough, a building assembling itself as you scroll. The business needed to rank for ADU searches across Los Angeles, and a canvas that is the page is a beautiful site that ranks for nothing. On top of that, the sales conversation, models, options, pricing and financing, was happening in person with printed sales sheets.

    What KarLev needed

    • Cinema and SEO in one page: The scroll experience could not cost the site its indexability or its Core Web Vitals.
    • Own everything: Explicit anti-requirements: no Shopify, no Lovable, no hosted CMS, no backend-as-a-service. The code and the content had to belong to KarLev.
    • A digital sales tool: Let a prospect configure a unit, see a price, and arrive at a consultation with the conversation already half done.
    • Not brick a phone: Two hundred and forty decoded frames is roughly 84 MB of RGBA. Mobile Safari will kill that tab.

    How AI is used

    An agent-driven build with a written sequence

    The site was built as a twelve-step prompt sequence, from scaffold and design system through SEO, shell, scroll-cinema, landing, models, configurator, contact and journal, Core Web Vitals, deploy and Stripe, with each step ending in a committable state. A persistent context file carried the design tokens, the guardrails and a "never do" list into every step. That is how a site of this scope went from first commit to launch in five days.

    AI-drafted content and imagery, human-owned

    Ten technology pages

    The SmartFrame, fabrication and assembly story was drafted with AI from the founder's engineering material, edited, and shipped as typed data with per-page titles, descriptions and stats rendering ten routes under /technology.

    Generated hero imagery

    The five mobile hero images and the features grid use AI-generated renders served from ImageKit, where product photography of unbuilt configurations did not yet exist.

    Nothing AI-driven runs at request time. The configurator's pricing is deterministic code. Lead handling is a database insert. The site does not contain a chatbot.

    How we built it

    The canvas is never the page

    The homepage renders its content as ordinary semantic sections, server-side. They scroll over a sticky canvas marked hidden to assistive technology, onto which GSAP scrubs a 240-frame sequence in step with Lenis smooth scrolling. Because the canvas is never the largest contentful paint, the cinematic layer costs nothing in the metrics that decide ranking.

    On phones the canvas never mounts at all. Both layouts exist in the server HTML, a desktop canvas and six stacked full-height panels, and CSS picks one, so the hidden tree wastes no lazy loads. The choice is gated on a coarse pointer and starts false to stay hydration-safe.

    Design Your ADU

    The configurator is a server page that decodes a configuration from the URL and hands it to a client component: model, exterior panel, flooring, and add-ons such as solar and battery, deck, premium kitchen, half-bath, smart home and HVAC, each priced live against the model's base. The call to action routes to the contact page with the configuration prefilled. A Stripe reservation checkout and webhook are built and gated off until KarLev is ready to take deposits online.

    What shipped

    Scroll-cinema homepage, about, how it works, features
    Six models with detail pages, from the ADU 400 to a custom home, and floor-plan sections
    Ten technology and manufacturing pages, a journal on MDX, a California service map, Instagram reels feed
    Design Your ADU configurator with shareable URLs
    Five-step Get Started quiz (ZIP, project type, ownership, timeline, contact) and contact form into a Supabase leads CRM
    Admin area with login, lead list, lead detail and staff management
    Stripe reserve checkout, success page and webhook, gated
    Daylight and Dusk design system with WCAG AA rules

    Timeline

    1. 24 May 2026: Initial launch commit: marketing site and configurator.
    2. 24 to 28 May 2026: Twenty-six commits: design system, models, quiz modal, features page, deploy fixes. Site live.
    3. July 2026: Technology content library drafted and shipped; codebase knowledge graph built to navigate the project.
    4. Ongoing: Admin CRM, Supabase lead pipeline and reservation checkout in the working tree ahead of the next release.

    Problems worth talking about

    84 MB that must never decode on a phone

    The frame sequence is about 17 MB on disk and about 84 MB decoded. The dual-tree layout means a phone never even requests it.

    A CDN cache that would not forget

    Early 404s for the frames were cached immutably at the edge. The only fix was a permanent rename of the frames path, and the deploy recipe now ships frames from a local prebuilt deploy so a dashboard rebuild cannot strip them.

    Scroll lock without the jump

    The lead-quiz modal locked scroll with a fixed body, which snapped the page to the top on iOS. Swapped for overflow hidden, plus an iOS font-zoom fix on inputs.

    Leads that anon cannot write

    The anonymous role has no insert policy on the leads table. Inserts go through a server-only service-role client behind the contact API, so the form works and the table stays closed.

    Where it stands

    What we can and cannot claim

    The site is live at karlev.co. The performance and SEO targets it was built against, Lighthouse SEO of 100, mobile performance of 90 or better, LCP under 2.5 seconds, CLS under 0.1 and INP under 200 ms, are documented as targets in the architecture, and we do not have the client's analytics to publish traffic or lead figures. The counts on this page are from the codebase.

    If the canvas is the page, you get a beautiful site that ranks for nothing.

    — KarLev architecture note

    What This Project Does Well

    Built from scratch and fully self-owned: no Shopify, no hosted CMS, no backend-as-a-service beyond Postgres
    A cinematic scroll experience that keeps Lighthouse SEO and Core Web Vitals as first-class targets
    Content as typed data and MDX, so a new model or technology page is a data change
    Configurator state lives in the URL, so a design can be shared, bookmarked and prefilled into a consultation
    Stripe reservation checkout and webhook wired and gated, ready to switch on
    Design system with Daylight and Dusk modes, Manrope and Fraunces type, WCAG AA contrast rules

    Technologies Used

    Next.js 16 App Router with Turbopack, React 19, TypeScript strict, Tailwind CSS with custom tokens, GSAP and Lenis, MDX via next-mdx-remote, Supabase (Postgres, SSR auth, leads CRM), Stripe Checkout and webhooks, ImageKit CDN, Vercel

    Ready to Build Something Similar?

    Let's discuss how we can help transform your business with a custom digital solution.

    Visit karlev.co📅 Schedule Consultation