Start a project

Heirloom

an interactive 3D journey through carbon removal

3D WebsiteNarrativeWebGL3D modellingScroll storytelling
Brand
Heirloom, Brisbane, California
Discipline
Immersive 3D website
Our role
Narrative, IA, WebGL, UX/UI
Timeline (concept)
6-week design sprint

01 · The brief

Explain a 900 °C robot plant as rock breathing in.

Heirloom, founded in 2020 by Shashank Samala and Noah McQueen, builds direct air capture plants that use limestone to pull CO₂ out of the air and store it permanently. Its business is selling carbon-removal credits to corporate buyers. The process is a closed calcium loop: heat the rock, capture the CO₂, then let the powder soak up more from the air in about three days.

2020
Founded · HQ in Brisbane, California
Nov 2023
Tracy, CA facility opened, up to 1,000 t CO₂/yr
315,000 t
Microsoft deal, up to this much removal over ~10 years
$53M · $150M
Series A (2022) · Series B (Dec 2024)

Design problems we chose

  1. 01

    Make chemistry feel like nature

    A 900 °C, robotic, industrial loop should read as “rock breathing in”, without hiding the industry.

  2. 02

    Prove it’s real

    Sceptical buyers and journalists need permanence, measurement and delivery shown clearly, not just claimed.

  3. 03

    Be a good neighbour

    Louisiana plants are planned. People living nearby need honest answers about jobs, safety and what they’ll see.

Our goal

One scroll that takes anyone from a rock to the whole loop, then sends them to the page made for them.

02 · Audiences & personas

A buyer, a councillor and an engineer.

Heirloom talks to corporate buyers, investors, policymakers, host communities and future hires. We picked three people whose needs pull the site in different directions. Every page has to work for at least one of them.

Personas are NUUKE research assumptions built from the brand’s public audience, not real customers.

03 · Story architecture

Eight beats, four acts, one loop.

We storyboarded the explainer before building any 3D. Each frame below is one scroll beat, with the shot and motion we wanted. Click a frame to jump the live explainer to that beat.

  1. Act I · Rock
  2. Act II · Heat & split
  3. Act III · Breathe
  4. Act IV · Loop

One idea per beat

Each beat holds the camera still for most of its scroll distance, so captions can be read. The move happens in the last third, and the caption swaps at the midpoint.

Chemistry as the spine

Three equations carry the story: CaCO₃ → CaO + CO₂, then CaO + H₂O → Ca(OH)₂, then Ca(OH)₂ + CO₂ → CaCO₃ + H₂O. That last step brings you back to rock.

End wide

Beats 1–7 are close-ups. Beat 8 pulls back to the whole diorama, and the conveyor lights up, so the loop is the last thing you see.

04 · Site map & wireframes

Four doors, one story underneath.

The 3D loop sits on Technology and is teased on Home. Each audience then gets its own door. Switch between Wireframe and Hi-fi to see how each page developed. Wireframe mode shows our annotation notes.

heirloom (concept IA)
  • Hero loop (3D teaser)
  • Proof strip
  • Choose your path
  • Scroll explainer (8 beats)
  • Chemistry in 3 minutes
  • Facilities: Tracy · Louisiana (planned)
  • Partners
  • What will I see?
  • Jobs & training
  • Safety & permits
  • Project status (dated)
  • Permanence
  • Measurement
  • Delivery tracker
  • Talk to us

Buyer BethCouncillor RayEngineer LinClick a page to open it below ↓

Hi-fi: our proposed visual language, in limestone, charcoal and kiln orange.

heirloom · concept prototype /
Buy removal

Direct air capture, made from rock

Restoring balance to our atmosphere.

In nature, limestone absorbs CO₂ over years. This process speeds that up to days, then stores the CO₂ for good.

Scroll the loopFor buyers
Poster frame of the 3D loop is the LCP image; WebGL loads after.
Nov 2023Tracy, California: what Heirloom calls America’s first commercial DAC facility
1,000 tTracy’s capacity, up to this much CO₂ a year
1 billion tCompany goal: CO₂ removed by 2035
Proof strip: three sourced facts, each one links to its source.

Where do you want to start?

BuyersI buy carbon removalPermanence, measurement and delivery, in one page.
NeighboursI live near a planned plantWhat you’ll see, jobs, safety, and how to ask us.
CuriousHow does rock catch CO₂?The whole loop in eight scroll beats.
Three doors, one per persona. No mega-menu.
Heirloom · concept by NUUKETechnology · Community · Buyers · Company

05 · Live 3D explainer

Scroll the limestone loop.

This is the experience we’d build for the Technology page, running live. Scroll through eight beats: rock, kiln, split, storage, water, trays, air and loop. Every station is procedural geometry on a single diorama, with no downloaded models or textures.

01/ 08 · Feedstock

Limestone, CaCO₃

It starts with one of the most abundant, cheapest rocks there is. Left alone in nature, limestone absorbs CO₂ from the air over years.

CaCO₃

02/ 08 · Calcination

Heat it to about 900 °C

The rock goes into an electric kiln, powered by renewable electricity, and is heated to about 900 °C.

Kiln0 °C

03/ 08 · The split

Rock in, two things out

Heat splits CaCO₃ into white calcium oxide powder and a pure stream of CO₂. A cement kiln vents that CO₂. Here it is captured.

CaCO₃ → CaO + CO₂

04/ 08 · Permanent storage

Locked away for good

The CO₂ goes from the tank to permanent storage. In Tracy it is mineralised into concrete with CarbonCure. The planned Louisiana plants call for geologic storage underground.

Tracy, CA · concrete (CarbonCure)Louisiana · geologic (planned)

05/ 08 · Hydration

Add water

The calcium oxide is hydrated into calcium hydroxide, a white powder that is “thirsty” for CO₂.

CaO + H₂O → Ca(OH)₂

06/ 08 · Spread & stack

Spread thin, stacked tall

The powder is spread thin on hundreds of flat trays, racked about 40 ft (12 m) high and open to the air.

Rack height~0 ft

07/ 08 · Carbonation

Three days of breathing

Air flows through the stacks. The powder soaks up CO₂ like a sponge and turns back into limestone in about 3 days, instead of months or years.

Ca(OH)₂ + CO₂ → CaCO₃ + H₂O

Day 1Day 2Day 3

08/ 08 · The loop

Back to the kiln, again and again

Robots move along the stacks while software models where each tray is in its cycle. Finished trays return to the kiln, and the same material is reused, cycle after cycle.

Reduced motion is on: use the steps to move through the loop.

06 · Community layer · concept

“What will I see from the road?”

For neighbours of the planned Louisiana plants, renders shot from a drone don’t help. This concept shows the plant from where people actually stand, at a scale they know, and answers their questions in plain language.

Illustrative view of a planned direct air capture plant from a nearby roadOpen tray racks about 40 feet tall behind a tree line, with kiln and tank buildings. Illustrative massing, not a site plan.~40 ft12 mHouse · ~25 ftConcept · illustrative massing, not a site plan
Viewpoint
Time
Compare

Only the rack height (about 40 ft or 12 m) comes from public coverage. Building sizes, lighting and distances are placeholders that the real site plan would replace.

Neighbour FAQ · for Councillor Ray

  • Tall, open racks of flat trays holding white mineral powder, about 40 ft (12 m) high, plus kiln and tank buildings. The picture above is illustrative. The live page would use the real site plan, with renders matched to photos taken from public roads.

07 · Mobile version

Same loop, sized for a thumb.

On a phone, a long pinned scroll gets in the way. The mobile explainer uses the same scene and the same eight beats, stepped one at a time.

Heirloom

01 · Feedstock

Limestone, CaCO₃

Abundant, cheap rock. In nature it absorbs CO₂ over years.

02 · Calcination

Heat it to about 900 °C

An electric kiln on renewable power heats the rock to ~900 °C.

03 · The split

Rock in, two things out

CaCO₃ splits into white CaO powder and a pure CO₂ stream that is captured.

04 · Permanent storage

Locked away for good

Tank → permanent storage: concrete in Tracy; geologic storage planned for Louisiana.

05 · Hydration

Add water

Water turns CaO into calcium hydroxide, a powder “thirsty” for CO₂.

06 · Spread & stack

Spread thin, stacked tall

Powder is spread on hundreds of trays, racked ~40 ft (12 m) high.

07 · Carbonation

Three days of breathing

Air flows through; the powder turns back into limestone in about 3 days.

08 · The loop

Back to the kiln, again and again

Robots return finished trays to the kiln. Same material, cycle after cycle.

Mobile rules

  1. 01

    Tap or swipe, not scrub

    Long pinned scroll fights thumb momentum. On phones each beat is one step, with the scene easing between them.

  2. 02

    Caption as a sheet

    The 3D takes the top 55% of the screen. The caption sits below it, so text never covers the subject.

  3. 03

    Half the particles

    Particle counts halve under 760 px, with the same shaders and draw calls. The scene pauses when it is off-screen.

  4. 04

    Thumb-zone controls

    Back and next sit at the bottom in 48 px targets. The progress bar at the top is also tappable.

This is the live scene running in the phone, so tap through it. It advances by itself until you touch it.

08 · Design system

Limestone, charcoal and one hot colour.

Colour tokens · click to copy

Type scale

  • Display (serif)Nature, accelerated.Georgia · 46/48 · −0.02em
  • Beat titleThree days of breathingMontserrat 900 · 28–52
  • FormulaCa(OH)₂ + CO₂ → CaCO₃ + H₂OInter 600 · 14/18 · tnum
  • Label03 / 08 · THE SPLITInter 500 · 12/16 · +0.14em

Components

03 / 08 · The split

Rock in, two things out

CaCO₃ → CaO + CO₂

~900 °CPure CO₂ → captureCaO powderOperatingPlanned

World tags, status chips, beat progress and live readouts. Tags are coloured by what they label: heat, air or rock.

Colours are our working approximation, built from public imagery of white mineral powder, metal trays and kiln heat. They are not official Heirloom brand values.

09 · Performance & accessibility

Breathtaking, on a mid-range phone.

3D on a marketing site has to earn its weight. These are the budgets and rules the explainer above is built to. The numbers in the first card come from the scene running in your browser right now.

Live in your browser

Draw calls
–
Triangles
–
Particles
–
Pixel ratio
–

Scroll through the explainer to start the scene, then come back here.

Draw-call budget

  • Target≤ 40 calls · ≤ 150k tris
  • Rocks2 instanced meshes
  • 160 trays2 instanced meshes
  • All particles1 Points object
  • Racks, kiln trim, pipesmerged geometry

Load only when needed

Three.js is a separate chunk, imported only when the explainer gets within 900 px of the viewport. The renderer caps pixel ratio at 1.75 and stops rendering when the canvas is off-screen or the tab is hidden. Phones get half the particles.

Reduced motion

With prefers-reduced-motion, nothing is pinned or scrubbed. The explainer becomes a fixed panel with eight step buttons, each showing a still frame. A GPU-less device gets the same static frames. If WebGL fails, the storyboard drawings stand in.

Captions carry the story

Every beat is real HTML text: a heading, a paragraph and the formula. The canvas is decorative, so screen readers get the full story in order. The beat steps are buttons with labels and the current one is marked. Live readouts (temperature, height, days) duplicate what the 3D shows.

Honest motion

Scroll position alone sets the camera and every station. Time only drives ambient flicker and particles. Scrolling back rewinds the loop exactly, and a skipped frame never desynchronises the story.

10 · Measure

How we’d know it worked.

KPI 01

Loop completion

We expect: Most visitors who start the explainer reach beat 8 and the full-loop view.

How we’d measure: Beat-reached events (1–8) from the scroll trigger, split by device.

KPI 02

Three-minute understanding

We expect: After one pass, test users can explain kiln → storage → trays → kiln in their own words.

How we’d measure: Five-question comprehension test with recruits like Engineer Lin, run before and after.

KPI 03

Buyer readiness

We expect: Buyers who visit the permanence and measurement sections ask fewer basic questions on sales calls.

How we’d measure: Buyers-page path analysis plus a short tag in the CRM on first calls.

KPI 04

Neighbour trust

We expect: The road-view and FAQ cut repeat questions at community sessions.

How we’d measure: FAQ “was this helpful” votes, question themes logged at sessions, and session sign-ups.

KPI 05

Smoothness

We expect: The explainer holds 60 fps on recent laptops and stays smooth on mid-range phones.

How we’d measure: Real-user frame timing and Core Web Vitals (LCP, INP) by device class.

These are the success measures we would agree with the client before launch. As a concept project, no results are claimed.

Sources for brand facts

In good company