All studies

Design Study 003

Highland Passage — The Art of Wandering

Three.js · Scroll Story · World Building

Scroll to travel through the 3D world, or choose a chapter. Explore full screen for the immersive view.

01 / Arrival

The longer way is the way.

Follow a stone path beyond the familiar. Highland Passage is an imagined journey through mountains, courtyards and the spaces in between.

Scroll to travelAn original Design Lab experiment

The study

An imagined mountain world in five distinct chapters: an arrival, a heritage essay, a moving landscape collection, an interactive field guide and a closing overlook. A live Three.js camera follows the journey, with typography and scenery sharing one smoothed scroll timeline.

What we were testing

  • Continuous 3D camera travel
  • Forward and reverse scroll
  • Narrative chapter transitions
  • Instanced architecture and forest
  • Wind-driven cloth shaders
  • Keyboard and touch navigation
  • WebGL fallback and cleanup
  • Mobile rendering budgets

Creative direction

A quiet blue-hour world lit by ivory moonlight and warm monastery windows. The opening gives way to an essay, a panoramic collection and a field guide instead of repeating the same text layout. Highland Passage is a fictional mountain setting, not a reconstruction of a specific place or a tourism service.

Build notes

  • Original procedural Three.js scene
  • Existing local Three.js dependency
  • Constant-distance spline sampling
  • Shared time-based camera and text smoothing
  • Moving story collection and interactive field guide
  • Native scroll with no wheel interception
  • Instanced geometry and capped pixel ratio
  • Original locally hosted mountain artwork
  • Reduced-motion and still-image fallback
  • Paused rendering offscreen and in hidden tabs

Recreate the direction

Use the creative brief and starting prompt as a foundation for your own exploration.

The finished study brings together art direction, iteration, interaction design, motion and frontend implementation. The prompt is a starting point.

View Creative Brief

Objective

Create a cinematic, editorial digital hero that feels more like a brand world than a conventional software landing page.

Visual principles

Editorial hierarchy. Cinematic imagery. Restrained UI. Strong negative space. Controlled motion. Premium typography. High visual impact.

Avoid

Generic SaaS composition, AI clichés, overuse of gradients, decorative HUD graphics, excessive copy and unnecessary glassmorphism.

Read starting prompt
Build Highland Passage, an original fictional mountain journey with Three.js and React. Write original code and use original assets.

Art direction: blue-hour Himalayan peaks, pale moonlight, quiet amber windows, maroon timber and warm stone. Model an imagined Himalayan monastery with layered plaster walls, gold roof edges, timber windows, a rising stair, chortens, prayer-wheel galleries, lamps and pine forest. Use a generated mountain backdrop for distant detail. Keep the primary scene live WebGL, not a video or iframe.

Scroll choreography: use native document scrolling and a sticky viewport over approximately six screen heights. Move camera position and its look target along separate original Catmull–Rom curves. Five views: distant arrival, centered approach, left courtyard, right-hand discovery, elevated return. Smooth small scroll steps but keep the scene responsive and reversible. Add restrained pointer parallax only for mouse input.

Use the Highland Passage name and five chapters: Arrival, Heritage, Stories, Field guide, Return. Opening copy: "The longer way is the way." Give Heritage an essay and collection link; Stories a three-panel landscape collection that moves with the scroll; Field guide four real navigation actions; Return a closing invitation and replay action. Synchronize the camera and typography through one frame-rate-independent progress value, and sample the camera path at uniform distance. Include keyboard-accessible chapter buttons, an atmosphere pause toggle and progress indication. Connect the final project CTA to Vertical Labs Contact.

Render repeated architecture and trees with instanced meshes. Animate original cloth vertices on the GPU. Cap pixel ratio on mobile; avoid expensive post-processing. Pause rendering while offscreen and in hidden tabs; dispose every geometry, material, observer, event listener and frame callback when leaving the route. If WebGL is unavailable, keep the mountain art and all chapter navigation usable. Reduced motion keeps the camera still and changes narrative chapters without transitions. Scope every style and ship all assets with the site.

Have an idea worth building?

Vertical Labs turns concepts into production-ready digital products.

Start a project