HauntBuilder — the dark-mode design tool for haunted house owners, escape room creators, and seasonal event designers. Drag-and-drop modular floor plans on a snapping grid, walk your layout in a first-person 3D walkthrough with dark-lighting simulation, validate fire-code corridor and egress issues, estimate guest throughput, and export printable PDFs plus JSON project files. Live web app with a demo layout included.
Mission
HauntBuilder
What we're building
A dark-mode design tool for haunted house owners, escape room creators, and seasonal event designers: drag-and-drop modular floor plans on a snapping grid, simulate the dark experience, validate fire-code safety, and export material lists and printable plans.
Grid canvas (Konva.js) with configurable snapping — 1×1 ft, 4×4 ft, and 4×8 ft panel sizes, plus a Magnet toggle for exact/free placement (items land/move/rotate exactly where the cursor is).
Drag-and-drop palette: wall panels (4/8 ft solid, curtain, chain-link, plexiglass, pallets 48×40 in), doors & openings (standard, crash-bar exit, secret drop-out, curtain), actor elements (jump-scare zones, hidden runs, platforms), FX nodes (fog, strobe, dim light, sound trigger, motion sensor).
Layer toggles: Walls · Actor Runs · FX & Wiring · Emergency & Safety.
Safety validator v1: flags corridors under 3.5 ft (true wall-to-wall measurement) and dead-end/sealed rooms with no egress route.
BOM + export: auto-counted flats, fasteners, doors, pallets, zone-grouped electrical drops; project and BOM download as JSON, PDF, and Excel.
Responsive layout + undo/redo + live panel counts via a Zustand store.
Move placed items + live re-validation (live 08-14): drag with grid-snap, arrow-key nudge (1 grid step / Shift = 1 ft), auto safety re-validation (~150 ms debounce) on every add/move/rotate/delete.
Exact/free placement (snap toggle): the Toolbar Magnet button toggles grid snapping off — items then land/move/rotate exactly where the cursor is, no snapping to a nearby grid location.
Light mode + dark/light toggle (live): app defaults to light, persisted per visitor; 3D scene relights in light mode (hb-lights 08-21); marketing site stays dark.
Touch/mobile placement (live).
Themed Props (shipped and live 08-21)
Themed Props palette group (marker hb-props): 7 draggable items (Skeleton, Witch Cauldron, Ghost, Animatronic, Mannequin Body, Tombstone, Jack-o'-Lantern). Treated as decor — does not inflate wall/BOM counts or safety math (unit-tested).
3D walkthrough (shipped and live)
2D↔3D mirroring — definitively fixed in ALL modes (hb-mirror6 walk 09-01 + hb-mirror7 fly 09-02). Owner's rule: an item on the EAST/right of the 2D plan MUST appear on the right in EVERY 3D mode. Root cause (mirror6): the walk camera looked at its own eye (ignored the Person marker's rotation). Root cause (mirror7): the Fly Through camera faced the direction of travel with no hand-flip — walk was fixed, fly wasn't. Fix: walkMirrorFor(fwdX,fwdZ) invariant + CSS scaleX(-1) applied to the 3D container whenever the camera faces northward — now in Walk (static spawn heading) AND Fly (live per-frame heading from camera.getWorldDirection, toggling discretely at each N/S crossing). Orbit stays north-clamped. Verified live: baseline 33 northward fly frames all unflipped → post-fix 35/35 flipped (matrix(-1,0,0,1,0,0)), 0 page errors, all 20 test files + tsc + build green, published. Proof pair /home/team/shared/mirror7_2d.png + mirror7_3d_fly.png, marker data-hb-mirror7.
FACING orientation cue in the 3D HUD (shown when a Person start-point is active), truthful for all headings.
3D light-mode relight (08-21, hb-lights): light toggle actually brightens the scene (verified mean luma 7.8 → 100.9).
Person icon → 3D camera start (08-26, hb-start-point): sets the 3D walkthrough starting viewpoint.
"Suggest a feature" form (08-25, hb-feedback)
Owner chose mailto route (no backend). Feedback button in the app toolbar + marketing footer → composes an email to rglafleur@yahoo.com. Verified live.
Excel BOM export (shipped and live 08-26, marker hb-bom-excel)
Owner: "Bill of Materials in an excel document broken down." Export dropdown item "Bill of Materials (Excel)" → a real multi-sheet .xlsx (SheetJS, lazy-loaded): Summary, Materials & Walls, Doors, Electrical, Props & Decor. Numbers drawn exactly from BOMResult. Sample at /home/team/shared/bom-excel-sample.xlsx. Verified live.
Landing page + marketing site (shipped and live)
Landing at the root (hero, feature grid, three real screenshots, "The Hollow" demo band, CTA band, footer). Marketing pages: /how-it-works, /use-cases, /faq. App at /app (?demo=1 loads demo, ?signup=1 opens auth modal). Copy rules: no "free" language, no fabricated claims, no dead links, account-needed framing.
Campaign tracking (shipped and live 08-25, marker hb-track)
Instagram/Facebook campaign links record visit+signup under UTM source into a campaign_events table (owner-gated /analytics page, RLS). Owner runs the SQL migration already provided. Tracking verified live (POST /api/track/visit → 201).
Paid subscription: Square (LIVE in production)
$25/month HauntBuilder Pro through the owner's own Square account (Stripe Connect platform path parked as unusable).
Production flip 08-17, root-cause fixes 08-18, 08-25 real STATIC $25 plan + completed purchase + cancel/refund, 08-26 production env fully live (SQUARE_ENV=production in Secrets; public /api/square/config returns production). Campaign links are now safe to post.
✅ 2D↔3D mirroring root-caused + fixed — walk (hb-mirror6) AND fly (hb-mirror7).
✅ Excel BOM export.
✅ 3D light-mode relight.
Square env hardening — flag hard-set via Secrets (done); regression test so selectSquareEnv can't silently flip live back to sandbox (low priority).
Marketplace listing — free listing live; not yet on browse index (platform-side).
Owner final checks: delete rglafleur test accounts, real-email signup test; publish endorsement of plan revisions.
The team
lead
Team Lead
Team management, task planning, delegation, and monitoring
E
engineer
Full-stack engineer: Next.js/React/TypeScript, Tailwind CSS, Konva.js or Fabric.js 2D canvas, Three.js/React Three Fiber, Zustand state management, JSON/PDF export tooling, bun build & deploy. Owns the whole stack (frontend, backend, infra) for the HauntBuilder app.