BACK TO 3D EXHIBITION ALL WORKS ARCHIVE➔

Highland Tourism, 3D Web & Real-Time AI•2026

Dragon Treasure Castle

A luxury highland tourism platform featuring Ember—an interactive voice-enabled AI Concierge, a 3D scroll-driven drone video tour, and a custom mountain GIS navigation engine. Scaled to 120,000+ organic monthly visitors with $0.00 cloud hosting costs.

CLIENTDragon Treasure Castle (Baguio City, PH)

TIMELINE2026

TECHNOLOGIES

Next.js 16 (App Router)React 19TypeScript 5Tailwind CSS v4GSAP 3 & ScrollTriggerMapbox GL v3Web Speech APIEdge Neural TTSSanity Studio v6Lenis Smooth ScrollVercel Edge Network

EXTERNAL LINKS

LIVE SITE ↗

[ 01 — THE BRIEF & APPROACH ]

ENGINEERING IMMERSIVE NARRATIVES

Transforming a highland mountain attraction into an interactive digital experience—scaling to 120,000+ organic monthly visitors with zero ongoing cloud hosting expenses.

[01] EXECUTIVE SUMMARY

Dragon Treasure Castle is a premier highland tourist destination in Baguio City (1,450m elevation). The platform was engineered to solve high inquiry volumes, complex mountain transit navigation, and weak pre-trip engagement through an intelligent voice-enabled AI concierge, 3D Mapbox geospatial engine, and 60 FPS scroll-driven drone video tour.

[02] CHALLENGE & RESOLUTION MATRIX

SYSTEM MATRIX — CHALLENGE VS RESOLUTIONFIG. 01

[01] CHALLENGE

Staff Inquiry Overload

Overwhelming volume of repetitive calls & messages regarding ticket rates, hours, weather, and park rules.

———▶

ENGINEERED RESOLUTION

Ember AI Concierge

Voice & text RAG pipeline synced with Sanity CMS for zero-latency, hallucination-free answers.

[02] CHALLENGE

Mountain Navigation Friction

Out-of-town tourists getting lost on steep Baguio mountain roads without clear transit guides.

———▶

ENGINEERED RESOLUTION

3D Mapbox Geospatial Engine

Digital Elevation Model (DEM) terrain map with turn-by-turn routing and taxi driver cheat sheets.

[03] CHALLENGE

Low Pre-Trip Conversion

Static photo galleries failed to convey the grandeur, altitude, and layout of the 1,450m attraction.

———▶

ENGINEERED RESOLUTION

60 FPS Scroll Video Tour

Smooth frame-by-frame drone flythroughs bound directly to scroll physics with instant fastSeek().

[04] CHALLENGE

Poor Mountain Connectivity

Heavy media assets crashing or buffering on weak 3G/4G mountain cellular data.

———▶

ENGINEERED RESOLUTION

Edge Caching & Eco-Sleep

Sub-second Next.js ISR, 720p/1080p asset tiering, and hardware battery-saving idle detection.

[03] TECHNICAL PIPELINES

PIPELINE A — REAL-TIME AI CONCIERGE RAG

REAL-TIME AI CONCIERGE KNOWLEDGE PIPELINEFIG. 02

STAGE [01]

Input Capture

Web Speech API microphone parser + keyboard input.

STAGE [02]

RAG Ingestion

Live GROQ query to Sanity CMS + real-time weather radar.

STAGE [03]

Neural Speech

Edge Neural TTS audio synthesis with low-latency streaming.

STAGE [04]

Avatar UI

Transparent alpha video mascot with reactive state triggers.

PIPELINE B — 60 FPS SCROLL VIDEO SCRUBBING

60 FPS HARDWARE-ACCELERATED VIDEO PIPELINEFIG. 03

STAGE [01]

Scroll Velocity

Normalized wheel delta & touch physics via Lenis + GSAP.

STAGE [02]

Hardware Seek

Zero-buffer fastSeek() decoding tied directly to scroll.

STAGE [03]

6 Drone Reels

Adaptive 720p/1080p video assets pre-warmed in memory.

STAGE [04]

HUD Controls

Real-time chapter anchors and elevation radar overlays.

[04] CORE DELIVERABLES

—

Ember AI Concierge: Voice and text RAG pipeline synced with Sanity CMS for verified pricing (₱165 general, ₱132 Senior/PWD/Toddler), parking, and pet policies with zero hallucinations.

—

3D Mountain Geospatial Map: Mapbox GL v3 DEM terrain rendering with turn-by-turn routing, taxi phrase cards, and multi-token failover.

—

Scroll-Driven Drone Tour: GSAP ScrollTrigger and fastSeek() decoding binding 6 pre-warmed drone reels to scroll physics.

—

4K Lobby Kiosk Mode: Hands-free on-site television display auto-panning through POIs with live weather radar and visitor QR scanning.

[05] PRODUCTION METRICS

—

120,000+ Monthly Visitors: Organic scale achieved in Month 1 via Edge SEO and automated social OG metadata.

—

92% Inquiry Automation: Staff support volume reduced from 100% manual calls to 8% edge inquiries.

—

< 1.1s Mobile FCP: 95+ Google Lighthouse score through Next.js ISR and hardware-aware Eco-Sleep.

—

4.8 / 5.0 Star Rating: Verified positive reception across 500+ customer reviews.

—

$0.00 Hosting Costs: 100% serverless edge deployment on Vercel and Sanity Free Tier.

[06] TECH STACK

—

Frontend Architecture: Next.js 16 (App Router), React 19, TypeScript 5, Tailwind CSS v4

—

Motion & Geospatial: GSAP 3, ScrollTrigger, Lenis, Mapbox GL v3, 3D DEM Terrain

—

AI & Data Infrastructure: Web Speech API, Edge Neural TTS, Sanity Studio v6 (On-Demand ISR), Vercel Edge

NEXT CASE STUDY·Architectural Builder Platform & Headless CMS·2026

Jiyam Homes

A high-performance, Swiss-inspired architectural platform for a registered New Zealand builder, featuring smooth GSAP cinematic reveals, headless Sanity CMS integration, and resilient serverless email delivery.

Next.js 16React 19TypeScriptSanity CMS

EXPLORE NEXT CASE STUDY ➔