/* global React */ const { useState: useStateSt, useEffect: useEffectSt, useRef: useRefSt } = React; /* ----------------------------------------------------------------- */ /* STUDIO PLACEHOLDER VISUALS */ /* We have no real photography yet — render credible architectural */ /* scenes via SVG so the page reads premium without stock noise. */ /* ----------------------------------------------------------------- */ // Temporary photo placeholders — three studio mockups distributed across // the six scenes. Each mockup keeps a different visual mood so the grid // still has variation. Will be replaced with real shoots later. const SCENE_MOCKUP = { northLight: '/site/uploads/mockup1.png', // bright loft motionLab: '/site/uploads/mockup2.png', // industrial cyc atelier: '/site/uploads/mockup3.png', // moody atelier podcast: '/site/uploads/mockup2.png', // dark studio workshop: '/site/uploads/mockup3.png', // dark workspace lounge: '/site/uploads/mockup1.png', // bright lounge }; function mockupFor(scene) { return SCENE_MOCKUP[scene] || '/site/uploads/mockup2.png'; } const STUDIO_SCENES = { northLight: ({ blue }) => ( ), motionLab: ({ blue }) => ( ), atelier: ({ blue }) => ( ), podcast: ({ blue }) => ( ), workshop: ({ blue }) => ( ), lounge: ({ blue }) => ( ), }; /* ----------------------------------------------------------------- */ /* STUDIOS DATA */ /* ----------------------------------------------------------------- */ // `bookingId` matches BOOKING_STUDIOS in booking-core.jsx and powers the // `/site/booking.html?studio=` deep-links. Studios without a bookingId // (Atelier 05 waitlist, Living Room communal) keep the contact-panel CTA. const STUDIOS = [ { n:'01', label:'PRIVATE STUDIO • 16M²', title:'North Light', subtitle:'A high-ceiling room oriented to morning light. Built for photographers and painters who work to the sun.', scene:'northLight', tags:['Photography','Painting','Daylight'], status:'Available now', bookingId:'north-light' }, { n:'02', label:'CREATIVE SUITE • 22M²', title:'Motion Lab', subtitle:'LED wall, calibrated grid and a dedicated camera bay for hybrid productions and immersive shoots.', scene:'motionLab', tags:['LED wall','Video','XR'], status:'1 spot left', bookingId:'motion-lab' }, { n:'03', label:'PRIVATE STUDIO • 18M²', title:'Atelier 03', subtitle:'A garment-ready studio with rails, fitting wall and a long bench for fashion designers and small brands.', scene:'atelier', tags:['Fashion','Design','Production'], status:'Available June', bookingId:'atelier-03' }, { n:'04', label:'PRODUCTION ROOM • 14M²', title:'Signal Booth', subtitle:'A treated room for podcasts, voice and long-form interviews. Two-mic ready, low-noise floor.', scene:'podcast', tags:['Podcast','Voice','Sound'], status:'Available now', bookingId:'signal-booth' }, { n:'05', label:'WORKSHOP STUDIO • 24M²', title:'Atelier 05', subtitle:'Bench, tools and surface space for product designers, makers and prototyping-driven creative work.', scene:'workshop', tags:['Product','Prototype','Maker'], status:'Waitlist' }, { n:'06', label:'SHARED LOUNGE • COMMUNAL', title:'The Living Room', subtitle:'Soft seating, a kitchen and a long bench for conversations between studios. Free with every membership.', scene:'lounge', tags:['Lounge','Kitchen','Members'], status:'Always open' }, ]; /* ----------------------------------------------------------------- */ /* SPATIAL HOVER WRAPPER */ /* ----------------------------------------------------------------- */ function SpatialMedia({ scene, blue, scrollProgress = 0 }) { const ref = useRefSt(null); const [tilt, setTilt] = useStateSt({ rx: 0, ry: 0, mx: 50, my: 50, active: false }); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width; const py = (e.clientY - r.top) / r.height; // Subtle: max ±4 degrees setTilt({ rx: (0.5 - py) * 6, ry: (px - 0.5) * 8, mx: px * 100, my: py * 100, active: true }); }; const onLeave = () => setTilt({ rx: 0, ry: 0, mx: 50, my: 50, active: false }); // Scroll-driven settle: image enters slightly zoomed/rotated then normalizes // scrollProgress 0 = below fold, 0.5 = centered, 1 = scrolled past const settle = Math.max(0, Math.min(1, (scrollProgress - 0.0) / 0.6)); const enterZoom = 1.06 - settle * 0.06; const enterRot = (1 - settle) * 0.6; const Scene = STUDIO_SCENES[scene]; return (

{/* Inner plane — perspective rotation */}

{/* Background scene plane — photo mockup, SVG fallback for safety */}

{/* Grain plane */}

\")", mixBlendMode: 'multiply', opacity: 0.18, pointerEvents: 'none', }}/> {/* Lighting plane — ambient highlight that follows cursor */} ); } /* ----------------------------------------------------------------- */ /* USE SCROLL PROGRESS — returns 0..1 of element passing viewport */ /* ----------------------------------------------------------------- */ function useScrollProgress(ref) { const [p, setP] = useStateSt(0); useEffectSt(() => { if (!ref.current) return; const onScroll = () => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight; // 0 when bottom of element enters from below; 1 when top exits const total = r.height + vh; const passed = vh - r.top; setP(Math.max(0, Math.min(1, passed / total))); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, [ref]); return p; } /* ----------------------------------------------------------------- */ /* TYPOGRAPHY: title that lands into place */ /* ----------------------------------------------------------------- */ function StudioTitle({ children, progress }) { // 0 → 0.6 lands. blur 8 → 0, rotate 1.4deg → 0 const land = Math.max(0, Math.min(1, (progress - 0.05) / 0.45)); return (

{children}

); } function StaggerLabel({ children, progress, delay = 0 }) { const land = Math.max(0, Math.min(1, (progress - delay) / 0.5)); const text = String(children); return (

{text.split('').map((ch, i) => ( {ch} ))}

); } /* ----------------------------------------------------------------- */ /* STUDIO CARD */ /* ----------------------------------------------------------------- */ function StudioCard({ s, blue, idx, onOpen }) { const ref = useRefSt(null); const progress = useScrollProgress(ref); const mediaRef = useRefSt(null); const handleOpen = (e) => { if (!onOpen || !mediaRef.current) return; e.preventDefault(); const r = mediaRef.current.getBoundingClientRect(); onOpen(s, { left: r.left, top: r.top, width: r.width, height: r.height }); }; return (

{/* Left: copy */}

{s.n} / 06

{s.label}

{s.title}

{s.subtitle}

{s.tags.map(t => ( {t} ))}

{s.bookingId ? ( Book this studio ) : ( Book a viewing )} {s.status}

{/* Right: spatial media */}

); } /* ----------------------------------------------------------------- */ /* PAGE SECTIONS */ /* ----------------------------------------------------------------- */ function StudiosHero({ blue }) { return (

Index 01 · Studios

Private
creative
studios.

Flexible creative workspaces for photographers, designers, filmmakers, artists and independent brands. Lockable, monthly, real space — Amsterdam-Duivendrecht.

); } function Meta({ k, v }) { return (

{k} {v}

); } function FeaturesStrip({ blue }) { const features = [ 'Flexible monthly rental','Shared kitchen & lounge','Natural light','Shoot-ready spaces','Creative community','Amsterdam-Duivendrecht','Production-ready','Private lockable rooms', ]; // double the list for marquee continuity const loop = [...features, ...features]; return (

What every studio includes

{loop.map((f, i) => ( {f} ))}

); } function AvailableNow({ blue }) { const open = STUDIOS.filter(s => s.status.includes('now') || s.status.includes('left') || s.status.includes('June')); return (

Available

Spaces opening this season.

Request the full list

{open.map(s => (

{s.n} {s.status}

{s.title}

{s.label}

{s.bookingId ? 'Book this studio' : 'Book a viewing'}

))}

); } function StudiosFinalCTA({ blue }) { return (

Final invitation

Find your
creative
base.

Book a viewing Talk to us

{/* large faint wordmark */}

); } function StudiosPage({ onOpenStudio }) { const [blue, setBlue] = useStateSt(getComputedStyle(document.documentElement).getPropertyValue('--aspace-blue').trim() || '#00C2FF'); // Re-read on tweaks update useEffectSt(() => { const obs = new MutationObserver(() => { const v = getComputedStyle(document.documentElement).getPropertyValue('--aspace-blue').trim(); if (v && v !== blue) setBlue(v); }); obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] }); return () => obs.disconnect(); }, [blue]); return (

{STUDIOS.map((s, i) => )}

); } window.StudiosPage = StudiosPage; window.STUDIO_SCENES = STUDIO_SCENES; window.STUDIOS_DATA = STUDIOS;