Skip to contentSkip to content
Expedition 01The Drop-In, 2610 mCat + Heli Skiing ConceptMuleshoe, BC

Powderhorn Basin

Scroll is the descent. The mountain does the selling.

100

Accessibility, all 28 routes

0.001

Cumulative layout shift

2,610 m

Descended by scroll

powderhorn-basin.vercel.app
Powderhorn Basin live site screenshot
Built for cat and heli operations, guiding outfits, and backcountry lodges

Adventure sites either stoke or inform. A booking needs both.

01

Stoke footage does not answer fear

The biggest untapped market for a cat and heli operation is the strong resort skier who has never gone. Powder montages make that person feel less qualified, not more. The site has to sell the dream and quietly answer, you can do this, in the same scroll.

02

The practical questions hide in PDFs

Seats per day, deposits, weather days, fitness expectations, what the cat morning actually looks like: on most operator sites these live in a brochure download. Here they live on pages, one glance deep, phrased the way a guide would say them.

03

Cinema usually costs the phone user

Heavy hero video and scroll hijacking fall apart on the device every guest actually books from. The descent was designed mobile-parallel from the first sketch, and the whole world costs less to load than one hero video file.

The approach

One run, carried from drop-in to lamplight.

01

Let the product demo itself

The homepage performs the run instead of describing it. Scroll is the descent, the altimeter is the progress bar, and the visitor reaches the book button having already felt the day. The signature is not decoration, it is the pitch.

02

Split the terrain by nerve, not just by run

The first week and the deep end speak to two different readers with two different fears. Reassurance for one is table stakes for the other, so they never share a paragraph.

03

Keep the world procedural, the proof photographic

The atmosphere is a shader, cheap and continuous. The trust layer is framed film-grain stills in one locked archive style. Each layer does the job the other cannot.

04

Measure, then say only what held

Accessibility 100 everywhere, CLS at 0.001, fleet performance in the low nineties, and the one metric at its gate documented in the log. The numbers are part of the craft, and the case study only claims what the build can reproduce.

The story

The thinking behind the build

Powderhorn Basin is a fictional cat and heli skiing operation built to prove that an adventure operator's website can be cinema and a booking tool at the same time. The homepage is the product: one mountain in cross-section, descended by scroll, from pre-dawn drop-in to the lamplit cat door. Around that signature sits everything a guest actually needs before they commit: terrain honesty for two different nerves, package clarity, safety posture, and a booking lane that works from a phone.

Adventure operator websites usually pick one job. Stoke sites pour powder footage over a contact form and leave the nervous first-timer with no idea whether they belong. Information sites list packages in a table and lose the person who came to feel something. Powderhorn Basin was built to refuse that trade: the most cinematic homepage in the range, wrapped around the practical honesty a four-figure booking deserves.

The concept is the run itself. A guide-owned operation's whole day funnels into one descent, so the homepage is one mountain in cross-section and scroll is the way down. An altimeter ticks from the 2,610 metre drop-in. Five zones re-light the world as you fall through them: warm alpenglow at the top, cool bowl light, night glades, and amber lamplight at the cat door. The interface never floats free of the fiction: every panel is a briefing surface, the run list, the radio rules, the typed logbook.

The world under it is procedural, not photographic. A single WebGL fragment shader draws the sky gradient, the ridged terrain bands, the domain-warped fog, and the particle snow, which keeps the whole descent a few hundred kilobytes and lets the light walk continuously from zone to zone. Photography enters only as framed film-grain stills with typed labels, generated on one locked 1970s expedition-archive style clause so the collection reads as one found archive.

The terrain page does the quiet conversion work. It splits into two streams: the first week, for the strong resort skier who has never ridden a cat and mostly needs to know they will not be the weak link, and the deep end, for the rider counting vertical. Each stream gets its own runs, its own pacing promises, and its own journal links. Speaking to both nerves separately is worth more than any single wall of powder photos.

The practical layer holds the booking weight. Packages state seats per day, deposits, and what a weather day means before anyone commits. Guides and safety is a full page with the certifications and the honest daily call, because in this category trust is the product. The book flow asks for dates, group size, and ability up front and keeps the phone number beside the form for the guest who would rather talk.

The numbers are measured, not estimated: accessibility 100 on all 28 routes, cumulative layout shift at 0.001, and mobile performance medians of 92 to 94 across the fleet after an image-delivery rebuild that took the worst page from a 6 second largest paint to 3.2. The one number still short of the award tier, a largest paint sitting at the 2.5 second gate on the homepage, is documented in the build log instead of gamed.

The operation, the town of Muleshoe, and the terrain are invented; the system is real. For a working operator the same build gets wired to a live season calendar, real availability, real guide bios, and a deposit flow, with the descent doing for their mountain exactly what it does here: making the visitor feel the run before they ever ask for a seat.

Why it converts

What the first-timer and the seasoned rider each need to hear.

Safety reads like a strength, not a waiver

Guides, certifications, protocols, and the honest daily call get a full selling page. In this category the person paying is trusting you with their life, and the site treats that as the point, not the fine print.

Booking answers come before the form

Dates, group size, ability, deposits, and the weather-day policy are stated in plain words before anyone commits. The phone number stays beside the form for the guest who would rather talk to a human.

The cinema never blocks the visit

Reduced motion gets a designed still, content renders without JavaScript, keyboard works everywhere, and the fastest path from landing to booked seat is three screens. The wow is built on a verified base.

The system

Everything that shipped.

I built a full Next.js operator platform in a 1970s expedition-documentary register: a descent engine where scroll drives one sticky WebGL scene through five re-lit zones, an altimeter that ticks with progress, a painted trail map with route lines drawn as real data marks, cinematic plate photography and film-grain logbook stills generated on one locked style clause, a two-stream terrain page that speaks separately to first-timers and seasoned riders, and a booking flow that states deposits, group sizes, and the ride plan before anyone fills a field.

Highlights

  • THE DESCENT: a sticky homepage scene where native scroll drives one WebGL world through five zones, drop-in, bowl, glades, runout, lodge, each with its own light
  • An altimeter that ticks with scroll and zone thresholds that re-light the world, so progress reads on an instrument, not a scrollbar
  • A procedural storm-light world: shader sky, ridged terrain bands, domain-warped fog, and particle snow stirred by the pointer
  • A painted 1970s trail map in the gouache tradition, with the two route lines drawn as SVG data marks and labelled in the page, never baked into the art
  • The two-stream terrain page: the first week for nervous first-timers, the deep end for seasoned riders, each with its own runs, pacing, and reassurance
  • Film-grain logbook stills with typed labels (PB-01 / 01, the morning commute) generated on one locked 1970s-archive style clause
  • A morning-report ticker, radio rules, and briefing checks that keep the operation's voice alive on every page
  • Packages and booking with the practical answers up front: seats per day, deposits, group ability, and the ride plan before the form
  • Guides and safety treated as a selling page, not fine print: certifications, protocols, and the honest daily call
  • A reduced-motion visitor gets a designed still of the descent, and the content stack renders with JavaScript disabled

Pages and surfaces

  • Home (THE DESCENT)
  • Terrain (the first week / the deep end)
  • Packages
  • Season
  • The fleet
  • Guides + safety
  • The lodge
  • Journal hub and entries
  • Book
  • Privacy
  • In-world 404
Under the hood

Real code. Real routes. Production ready.

  • The descent engine is one sticky scene driven by requestAnimationFrame and a progress ref: native scroll is never hijacked, and the browser keeps the scrollbar honest
  • The world is a single fullscreen-triangle WebGL fragment shader: procedural sky, ridged-fbm terrain, domain-warped fog, and particle snow, no 3D library shipped
  • Measured mobile medians: accessibility 100 on all 28 routes, CLS 0.001, home performance 93 to 94, fleet 92 after converting CSS image-set plates to real img elements with srcset
  • The image-delivery lesson is documented: background plates served 2400 pixel files to phones and could not be prioritized; srcset underlays took the packages page from 75 to 92
  • An overflow probe walks all 28 routes at five widths on real and fallback fonts and ships clean; reduced motion serves a designed still and content renders with JavaScript disabled
  • Every generated image sits on one locked style clause with prompt provenance saved beside the assets, so the archive can grow without a style lottery

Stack

Next.jsReactTypeScriptWebGL (raw GLSL)Vercel

Built honestly

Powderhorn Basin, Muleshoe BC, the terrain, and the fleet are invented, and the site says so on the page. No real operator's marks, no borrowed certifications, no numbers I cannot reproduce. It is a working pattern, not a fake business. For a real operation, the same system gets wired to your real season, your real guides, and your real bookings.

Your mountain already has the story. Let it run.

Powderhorn is the proof. The same descent thinking can be built around your terrain, your fleet, and the day your guests actually experience, whether you are replacing a tired site or putting your operation online for the first time. Start with a free website audit and I will show you exactly where your current site loses the booking.

Builds like this start at $2,000, or Own It Monthly from $189/mo, yours outright at the end.

In this industry yourself? Read the adventure operator website design playbook.

More work

01 / 16