{"roots":["4178:3752"],"nodeById":{"4178:3752":{"type":"WEBPAGE","id":"4178:3752","name":"/negspc-2","absoluteBoundingBox":{"x":21199.0,"y":-29871.0,"width":1408.0,"height":1244.0},"isolatedAbsoluteRenderBounds":{"x":21199.0,"y":-29871.0,"width":1408.0,"height":1244.0},"relativeTransform":[[1.0,0.0,21199.0],[0.0,1.0,-29871.0]],"size":{"x":1408.0,"y":1244.0},"fills":[{"opacity":0.298039227724075,"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"children":["4178:3753"]},"4178:3753":{"type":"FRAME","id":"4178:3753","name":"Desktop","absoluteBoundingBox":{"x":21263.0,"y":-29771.0,"width":1280.0,"height":1080.0},"isolatedAbsoluteRenderBounds":{"x":21263.0,"y":-29771.0,"width":1280.0,"height":1080.0},"relativeTransform":[[1.0,0.0,64.0],[0.0,1.0,100.0]],"size":{"x":1280.0,"y":1080.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"clipsContent":true,"overflowDirection":"VERTICAL_SCROLLING","isBreakpointFrame":true,"children":["4178:3782"]},"4178:3782":{"type":"WIDGET","id":"4178:3782","name":"Embed 7","absoluteBoundingBox":{"x":21263.0,"y":-29771.0,"width":1565.0,"height":1043.0},"targetAspectRatio":{"x":600.0,"y":400.0},"isolatedAbsoluteRenderBounds":{"x":21263.0,"y":-29771.0,"width":1565.0,"height":1043.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":1565.0,"y":1043.0},"constraints":{"vertical":"TOP_BOTTOM","horizontal":"LEFT_RIGHT"},"constraintValues":{"left":{"pixelOffset":0.0,"sizeFraction":0.0},"right":{"pixelOffset":285.0,"sizeFraction":1.0},"top":{"pixelOffset":0.0,"sizeFraction":0.0},"bottom":{"pixelOffset":-37.0,"sizeFraction":1.0}},"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"widgetType":"GENERIC","syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"// @ts-nocheck\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { defineProperties } from 'figma:react';\n\n// ── 1. Types & Constants ───────────────────────────────────────────\n\ninterface ImageProp { src: string; alt?: string; }\n\ninterface DoomGalleryProps {\n art0?: ImageProp; art1?: ImageProp; art2?: ImageProp; art3?: ImageProp;\n art4?: ImageProp; art5?: ImageProp; art6?: ImageProp;\n title0?: string; title1?: string; title2?: string; title3?: string;\n title4?: string; title5?: string; title6?: string;\n galleryTitle?: string;\n scanlines?: boolean;\n // Figma Light Controls\n lightIntensity?: number;\n lightWarmth?: number;\n ambientLevel?: number;\n}\n\ninterface InteractiveTarget { title: string; mesh: any; type?: string; }\n\nconst HERO_SIZE = { w: 8.8, h: 5.4 };\nconst SIDE_ART_SIZES = [\n { w: 5.5, h: 7.0 }, { w: 5.5, h: 7.0 }, { w: 5.5, h: 7.0 },\n { w: 5.5, h: 7.0 }, { w: 5.5, h: 7.0 }, { w: 5.5, h: 7.0 }\n];\n\nconst COLORS = {\n wall: 0xefefef, floor: 0xcccccc, ceiling: 0xe0e0e0,\n frame: 0xd2b48c, // Oak/Tan\n lightPanel: 0xffffff\n};\n\nconst ROOM_SIZE = { rw: 24, rd: 48, rh: 11.0 };\n\nconst SIDE_CONFIGS = [\n { p: [-ROOM_SIZE.rw/2+0.1, 5.5, -14], r: [0, Math.PI/2, 0] },\n { p: [-ROOM_SIZE.rw/2+0.1, 5.5, 0], r: [0, Math.PI/2, 0] },\n { p: [-ROOM_SIZE.rw/2+0.1, 5.5, 14], r: [0, Math.PI/2, 0] },\n { p: [ROOM_SIZE.rw/2-0.1, 5.5, -14], r: [0, -Math.PI/2, 0] },\n { p: [ROOM_SIZE.rw/2-0.1, 5.5, 0], r: [0, -Math.PI/2, 0] },\n { p: [ROOM_SIZE.rw/2-0.1, 5.5, 14], r: [0, -Math.PI/2, 0] }\n];\n\nconst hashString = (v: string) => {\n let hash = 0;\n for (let i = 0; i < v.length; i++) hash = (hash * 31 + v.charCodeAt(i)) | 0;\n return Math.abs(hash).toString(36);\n};\n\n// ── 2. HUD Component ───────────────────────────────────────────────\n\nconst HUD = ({ galleryTitle, titleVisible, focusedArtwork, actionMessage, interactHint, showHint, lightIntensity, lightWarmth, ambientLevel }: any) => (\n <>\n \n \n \n
GALLERY
\n
{galleryTitle}
\n
\n
FOCUS
\n
{focusedArtwork || '...'}
\n
\n {actionMessage}\n
\n )}\n\n \n L: {Math.round(lightIntensity * 100)}% • W: {Math.round(lightWarmth * 100)}% • A: {Math.round(ambientLevel * 100)}%\n
\n \n);\n\n// ── 3. Main Component ──────────────────────────────────────────────\n\nexport default function WhiteGalleryV2(props: DoomGalleryProps) {\n const { \n art0, art1, art2, art3, art4, art5, art6, \n title0, title1, title2, title3, title4, title5, title6,\n galleryTitle = 'Negative Space Gallery', scanlines = true,\n lightIntensity = 1.0, lightWarmth = 0.5, ambientLevel = 0.5\n } = props;\n\n const containerRef = useRef(null);\n const [titleVisible, setTitleVisible] = useState(true);\n const [focusedArtwork, setFocusedArtwork] = useState('');\n const [actionMessage, setActionMessage] = useState('');\n const [interactHint, setInteractHint] = useState(false);\n\n useEffect(() => {\n let cancelled = false;\n const start = () => { if (!cancelled) initScene(); };\n if ((window as any).THREE) start();\n else {\n const script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';\n script.onload = start;\n document.head.appendChild(script);\n }\n setTimeout(() => setTitleVisible(false), 3500);\n return () => { cancelled = true; };\n }, [props.art0?.src, props.galleryTitle]);\n\n const initScene = () => {\n const THREE = (window as any).THREE;\n const mount = containerRef.current;\n if (!THREE || !mount) return;\n\n while (mount.firstChild) mount.removeChild(mount.firstChild);\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xf8f8f5);\n scene.fog = new THREE.Fog(0xf8f8f5, 10, 50);\n\n const camera = new THREE.PerspectiveCamera(60, mount.clientWidth / mount.clientHeight, 0.1, 200);\n camera.position.set(0, 3.2, 12);\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(mount.clientWidth, mount.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n mount.appendChild(renderer.domElement);\n\n const textureLoader = new THREE.TextureLoader();\n textureLoader.crossOrigin = 'anonymous';\n\n // ── Build Room ──\n const wallMat = new THREE.MeshStandardMaterial({ color: COLORS.wall, roughness: 0.9 });\n const createWall = (w, h, p, r) => {\n const m = new THREE.Mesh(new THREE.PlaneGeometry(w, h), wallMat);\n m.position.set(...p); m.rotation.set(...r); scene.add(m);\n };\n createWall(ROOM_SIZE.rw, ROOM_SIZE.rh, [0, ROOM_SIZE.rh/2, -ROOM_SIZE.rd/2], [0,0,0]);\n createWall(ROOM_SIZE.rw, ROOM_SIZE.rh, [0, ROOM_SIZE.rh/2, ROOM_SIZE.rd/2], [0, Math.PI, 0]);\n createWall(ROOM_SIZE.rd, ROOM_SIZE.rh, [-ROOM_SIZE.rw/2, ROOM_SIZE.rh/2, 0], [0, Math.PI/2, 0]);\n createWall(ROOM_SIZE.rd, ROOM_SIZE.rh, [ROOM_SIZE.rw/2, ROOM_SIZE.rh/2, 0], [0, -Math.PI/2, 0]);\n\n // Floor (Carpet)\n const floorMat = new THREE.MeshStandardMaterial({ color: COLORS.floor, roughness: 1.0 });\n const floor = new THREE.Mesh(new THREE.PlaneGeometry(ROOM_SIZE.rw, ROOM_SIZE.rd), floorMat);\n floor.rotation.x = -Math.PI / 2;\n scene.add(floor);\n\n // Ceiling (Grid)\n const ceilMat = new THREE.MeshStandardMaterial({ color: COLORS.ceiling, roughness: 0.8 });\n const ceil = new THREE.Mesh(new THREE.PlaneGeometry(ROOM_SIZE.rw, ROOM_SIZE.rd), ceilMat);\n ceil.position.y = ROOM_SIZE.rh; ceil.rotation.x = Math.PI/2;\n scene.add(ceil);\n\n // ── Build Artworks ──\n const targets: InteractiveTarget[] = [];\n const buildArt = (art, size, p, r, title) => {\n const group = new THREE.Group();\n const frame = new THREE.Mesh(new THREE.BoxGeometry(size.w + 0.15, size.h + 0.15, 0.12), new THREE.MeshStandardMaterial({ color: COLORS.frame }));\n group.add(frame);\n if (art?.src) {\n textureLoader.load(art.src, (t) => {\n const img = new THREE.Mesh(new THREE.PlaneGeometry(size.w, size.h), new THREE.MeshStandardMaterial({ map: t }));\n img.position.z = 0.07; group.add(img);\n targets.push({ title, mesh: img });\n });\n }\n group.position.set(...p); group.rotation.set(...r); scene.add(group);\n };\n\n buildArt(art0, HERO_SIZE, [0, 5.5, -ROOM_SIZE.rd/2 + 0.1], [0,0,0], title0 || 'Hero');\n [art1, art2, art3, art4, art5, art6].forEach((a, i) => buildArt(a, SIDE_ART_SIZES[i], SIDE_CONFIGS[i].p, SIDE_CONFIGS[i].r, `Work ${i+1}`));\n\n // ── Lighting ──\n const amb = new THREE.AmbientLight(0xffffff, ambientLevel); scene.add(amb);\n const hemi = new THREE.HemisphereLight(0xffffff, 0xcccccc, 0.4); scene.add(hemi);\n \n // Ceiling Grid Lights\n for (let x = -ROOM_SIZE.rw/2 + 4; x < ROOM_SIZE.rw/2; x += 8) {\n for (let z = -ROOM_SIZE.rd/2 + 4; z < ROOM_SIZE.rd/2; z += 12) {\n const pLight = new THREE.PointLight(0xffffff, lightIntensity * 0.4, 20);\n pLight.position.set(x, ROOM_SIZE.rh - 1, z);\n scene.add(pLight);\n }\n }\n\n // ── Loop ──\n let yaw = Math.PI, pitch = 0, targetYaw = Math.PI, targetPitch = 0;\n const keys = {};\n window.addEventListener('keydown', e => keys[e.code] = true);\n window.addEventListener('keyup', e => keys[e.code] = false);\n \n mount.addEventListener('mousedown', () => mount.requestPointerLock?.());\n window.addEventListener('mousemove', (e) => {\n if (document.pointerLockElement === mount) {\n targetYaw -= e.movementX * 0.002;\n targetPitch = Math.max(-Math.PI/3, Math.min(Math.PI/3, targetPitch - e.movementY * 0.002));\n }\n });\n\n const animate = () => {\n requestAnimationFrame(animate);\n yaw += (targetYaw - yaw) * 0.1; pitch += (targetPitch - pitch) * 0.1;\n camera.quaternion.setFromEuler(new THREE.Euler(pitch, yaw, 0, 'YXZ'));\n \n const fwd = new THREE.Vector3(); camera.getWorldDirection(fwd); fwd.y = 0; fwd.normalize();\n const side = new THREE.Vector3().crossVectors(fwd, new THREE.Vector3(0,1,0));\n if (keys['KeyW']) camera.position.addScaledVector(fwd, 0.15);\n if (keys['KeyS']) camera.position.addScaledVector(fwd, -0.15);\n if (keys['KeyA']) camera.position.addScaledVector(side, -0.15);\n if (keys['KeyD']) camera.position.addScaledVector(side, 0.15);\n\n // Light Updates from Figma Props\n amb.intensity = ambientLevel;\n scene.traverse(obj => { if (obj.isPointLight) obj.intensity = lightIntensity * 0.4; });\n\n renderer.render(scene, camera);\n };\n animate();\n };\n\n return (\n \n
\n {scanlines &&
}\n
\n