Role
Frontend Developer
Client
Concept Dash (A property developer residence)
Duration
May 2026 (~5 days, 2026-05-25 to 2026-05-29)
A client deliverable for a luxury residence, built and shipped in under a week. The whole application is a single `index.html` — roughly 4,600 lines of vanilla JavaScript and CSS with Pannellum pulled from a CDN — sitting next to a `data/tour.json` and a folder of WebP assets. There is no build step, no framework and no bundler, which for a one-off property showcase that has to be handed over, hosted anywhere, and still work in three years is a defensible trade rather than a shortcut.
The tour is organised into exteriors and interiors. Interiors span three floors — 17 ground-floor panoramas, 12 on the first, 19 on the second — each with a north offset, an x/y position expressed as a percentage of the floorplan image, and its own list of hotspots carrying yaw, pitch and a destination room. The floorplan view renders those positions as numbered dots with a live compass cone that tracks the viewer's heading, so a visitor always knows which way they are facing inside the plan. The exterior is not a panorama at all: it is a 250-frame turntable painted to a canvas, with a preloader that fetches a coarse skeleton of frames first, then fills in the rest four at a time, finds the nearest already-loaded frame when the user drags ahead of the download, and schedules redraws rather than painting on every pointer move. Drag, swipe and click are all handled directly.
The part worth pointing at is that the authoring tool ships inside the deliverable. An edit mode turns the viewer into a hotspot editor: aim the camera, pick a target room from a dropdown, and the app writes the yaw/pitch, offers a suggested label, and exports the updated JSON to the clipboard through a modal. Calibrating 48 rooms by hand-editing angles in a text file would have been the slowest part of the job; building the editor into the page removed it. `tour.json` even carries a comment explaining to a future maintainer how to nudge a dot by reading a percentage off the floorplan image — the sort of note that only exists when someone expects a non-programmer to open the file.
Tech Stack
Features
- Three-floor panoramic walkthrough48 equirectangular panoramas across ground, first and second floors, connected by hand-calibrated hotspots that carry a yaw, a pitch and a destination room.
- Floorplan minimap with live compassCamera positions are plotted on each floor's plan as numbered dots, with a cone that rotates in real time to show which way the visitor is currently looking.
- 250-frame exterior turntableA drag-to-orbit exterior rendered to canvas from an image sequence, with concurrency-limited preloading, a coarse-frames-first skeleton pass and nearest-loaded-frame fallback so dragging never stalls.
- Built-in hotspot editorAn edit mode inside the shipped page lets an operator aim the camera, pick a target room, and export the regenerated tour JSON to the clipboard — no separate tooling.
- North calibration per roomEach panorama stores a north offset so the minimap cone and the floorplan agree, with in-app calibrate and clear controls for setting it.
- Zero-dependency deliveryOne HTML file plus a JSON file and image folders, with the only runtime dependency loaded from a CDN — it runs from any static host or straight off disk.
- Mobile-first tour chromeA bottom drawer of room cards, swipeable variant switching, fullscreen toggle, a first-visit hint remembered in localStorage, and full Open Graph / SEO metadata for sharing.