Need help? (323) 609-8360

'use client' import { useEffect, useRef } from 'react' import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js' import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js' import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js' /** * Real Estate Machine — Interactive 3D Deal Pipeline * * A brokerage run by AI agents, built as one machine you can spin: * lead → valuation → listing → offers → closing across five stations on a metal plate. * Four modes (Assembled, Cutaway, Stations, One deal), five cameras, hover and click * stations. Procedural three.js: no models, no images. * * Adapted from the "Agentic Factory" 3D machine (same engine, camera, modes and timing); * every station, screen, prop and line of copy is rebuilt for real estate. * * Fills its box: give it a height (default 100vh). Dependencies: react, three. * The embed prop hides the panels for a landing-page hero: on a frame wider than 900 px * the machine moves to the right 58 % and leaves the left side for your headline. * Control it with window.__machine: setMode, setCamera, focusStation, play, pause. */ export type RealEstateMachine3DProps = { /** Height of the scene box, e.g. 720 or '100vh'. Default '100vh'. */ height?: number | string className?: string /** Your brokerage or product name, shown in the top bar, footer and on the engraved plate. */ brand?: string /** Clean hero mode: no panels, the machine on the right of a wide frame. */ embed?: boolean /** A station was clicked: 'leads' | 'valuation' | 'listing' | 'offers' | 'closing'. */ onStation?: (id: StationId) => void /** The first real frame is drawn. */ onReady?: () => void } export default function RealEstateMachine3D({ height = '100vh', className, brand = 'Agentic Realty', embed = false, onStation, onReady, }: RealEstateMachine3DProps) { const rootRef = useRef(null) const handlers = useRef({ onStation, onReady }) useEffect(() => { handlers.current = { onStation, onReady } }, [onStation, onReady]) useEffect(() => { const root = rootRef.current if (!root) return let dispose: (() => void) | undefined let cancelled = false // The in-scene screens are painted on canvases: wait for fonts first. document.fonts.ready.then(() => { if (cancelled) return dispose = initMachineScene(root, getComputedStyle(root).fontFamily, { embedded: embed, brand, onStation: (id) => handlers.current.onStation?.(id), onReady: () => handlers.current.onReady?.(), }) }) return () => { cancelled = true dispose?.() } }, [embed, brand]) return (