/* eslint-disable */ /* cityform v2 — Cinematic home page (revision 2) Changes from rev 1: · Sticker DEMOTED everywhere it was a marketing motif. The customer buys the OBJECT — the brand's hero is the model itself, not a label on its lid. Stickers still appear on the product spec / packaging tabs and inside the commission flow (real product detail), never on marketing-only sections. · Hero is now tweak-selectable: rotating 3D model (default) / photo gallery / plan view / triptych — exposed in the Tweaks panel. · "City Marks Wall" is now "The Twelve" — photographed objects, not stickers. · New "See it on your shelf" AR module on the home page, surfacing the existing AR Quick Look feature from the commission confirm step. · Process scene phase 04 uses the real Sheffield on-base render. · All sections respect the global motion-density and hide-stickers tweaks via window.__v2 read by useV2. */ function useV2() { // The v2 tweaks (app-v2.jsx) writes its current state to window.__v2 so // page-level components can read it without explicit threading. const [v, setV] = React.useState(() => window.__v2 || {}); React.useEffect(() => { const handler = () => setV({ ...(window.__v2 || {}) }); window.addEventListener('cf-v2-tweaks', handler); return () => window.removeEventListener('cf-v2-tweaks', handler); }, []); return v; } function HomePage({ go, t }) { const v2 = useV2(); const featured = window.CATALOG.filter(c => c.featured && c.accent).slice(0, 6); const newIn = window.CATALOG.filter(c => !c.featured).slice(0, 4); // Sheffield is the only city with a bundled, viewer-tuned GLB // (assets/products/sheffield.glb). CATALOG[0] is the live admin order // (not necessarily Sheffield), so pick Sheffield explicitly and fall // back to the first entry only if it's somehow absent. const heroCity = window.CATALOG.find(c => c.id === 'sheffield') || window.CATALOG[0]; return (
); } /* ────────────────────────────── 01 HERO */ function HeroV2({ city, go, mode = 'model' }) { const [imgRef, imgY] = useParallax(34); return (
{/* Top stamp */}
SHEFFIELD · 53.3811° N · 1.4701° W VOLUME 02 · MAY 2026
{/* LEFT — copy */}
MADE TO ORDER · A LETTER IN FORM

Scaled to nine.]} delay={200} lineDelay={140}/>

Cityform makes architecturally considered miniature models of British cities. Each is cut from the same Environment Agency survey data planners use, scaled to nine centimetres on your shelf.

{[ { v:'12', l:'In the collection' }, { v:'9 × 9 cm', l:'One format' }, { v:'1:11000', l:'Common scale' }, { v:'7 days', l:'From order' }, ].map((s, i) => (
{s.v}
{s.l.toUpperCase()}
))}
{/* RIGHT — variant stage */}
{mode === 'model' && } {mode === 'photo' && } {mode === 'plan' && } {mode === 'triptych' && } {/* Coord stamp — replaces the old floating sticker */}
NOW SHIPPING
{city.name}
{city.coords.lat.toFixed(4)}° {city.coords.ns} · {Math.abs(city.coords.lng).toFixed(4)}° {city.coords.ew}
{(city.landmark || '—').toUpperCase()} £{city.price || 95}
{/* Below-hero hero-mode strip — quietly hints the variants exist */}
VIEW · {mode === 'model' ? '3D MODEL' : mode === 'photo' ? 'PHOTO GALLERY' : mode === 'plan' ? 'PLAN' : 'TRIPTYCH'} DRAG TO ROTATE · TWEAKS PANEL FOR ALTERNATIVES →
); } /* Hero variant A — rotating 3D model (default) */ function HeroModel({ city }) { // Per-city: use this city's GLB when the catalogue has one; otherwise // Model3DViewer falls back to the photo (no Sheffield mesh under a // non-Sheffield hero). Bundled-asset path kept as a last resort only // when the hero IS Sheffield. const glb = city.model_glb || (city.id === 'sheffield' ? 'assets/products/sheffield.glb' : null); const fallback = city.on_base || (city.photos && city.photos[0]) || city.photo; const _sLat = city.coords.ns === 'S' ? -city.coords.lat : city.coords.lat; const _sLng = city.coords.ew === 'W' ? -city.coords.lng : city.coords.lng; const label3d = { title: (city.name || '').toUpperCase(), subline: '', coord: window.fmtCoord ? window.fmtCoord(_sLat, _sLng) : `${city.coords.lat.toFixed(3)}° ${city.coords.ns} · ${Math.abs(city.coords.lng).toFixed(3)}° ${city.coords.ew}`, showCoords: true, }; return (
{/* Model3DViewer owns its own fallback: it shows the `fallback` photo only when the GLB genuinely fails (phase === 'error'). No always-on backdrop here — that double-exposed a static photo behind the live rotating model. */} {/* Frame plate */}
{city.name.toUpperCase()} CITY CENTRE · 9 CM · 1:11000
); } /* Hero variant B — multi-photo collage */ function HeroPhotoStack({ city }) { const photos = city.photos || [city.on_base, city.photo].filter(Boolean); const [active, setActive] = React.useState(0); return (
{photos.map((src, i) => ( {city.name} ))}
SHEFFIELD · FIG. {String(active + 1).padStart(2,'0')} OF {String(photos.length).padStart(2,'0')}
{photos.slice(0, 6).map((src, i) => ( ))}
); } /* Hero variant C — plan view */ function HeroPlan({ city }) { return (
PLAN · 1.00 × 1.00 KM
{city.name} · City Centre
); } /* Hero variant D — triptych: photo + plan + render */ function HeroTriptych({ city }) { const main = city.on_base || (city.photos && city.photos[0]) || city.photo; const detail = (city.photos && city.photos[2]) || city.photo; return (
{city.name}
01 · OBJECT
02 · PLAN
03 · DETAIL
); } /* ────────────────────────────── 02 MARQUEE */ function MarqueeStripV2() { const items = [ 'EA LIDAR · 1 M RESOLUTION', 'OPENSTREETMAP FOOTPRINTS', 'PETG · MIST · BAMBU LAB X1', 'MADE IN SHEFFIELD', 'CITYFORM.CO · ETSY/CITYFORM', 'FREE UK SHIPPING OVER £75', 'ONE FORMAT · 9 CM SQUARE', 'TWELVE CITIES · ONE ATLAS', 'COMMISSIONS WELCOME', ]; const Row = () => (
{items.map((s, i) => ( {s} ))}
); return (
); } /* ────────────────────────────── 03 SIGNATURE PROCESS — scroll-driven scene */ function SignatureProcess({ mode = 'scroll' }) { // mode: 'scroll' (the user scrolls to advance), 'auto' (cycles on a timer // for marketing demos), 'off' (renders a flat overview, no animation). const [ref, scrollP] = useScrollProgress(); const [autoP, setAutoP] = React.useState(0); React.useEffect(() => { if (mode !== 'auto') return; let raf, t0 = performance.now(); const tick = (t) => { const dt = (t - t0) / 1000; const cycle = 18; // sec per full cycle setAutoP(((dt % cycle) / cycle)); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [mode]); const p = mode === 'scroll' ? scrollP : mode === 'auto' ? autoP : 1; const phaseProgress = (i) => { const start = i / 4, end = (i + 1) / 4; if (p < start - 0.06) return 0; if (p > end + 0.06) return 0; if (p < start) return (p - (start - 0.06)) / 0.06; if (p > end) return 1 - (p - end) / 0.06; return 1; }; const activePhase = mode === 'off' ? 3 : Math.min(3, Math.floor(p * 4 + 0.001)); const heightVh = mode === 'scroll' ? 360 : 100; const phases = [ { n: '01', title: 'Survey', kicker: 'ENVIRONMENT AGENCY · LIDAR', body: 'A 1 m resolution scan of the ground and everything on it. Released by the EA under the Open Government Licence. We crop a single square kilometre.', side: '47.3 MB · DTM + DSM', }, { n: '02', title: 'Footprints', kicker: 'OPENSTREETMAP · BUILDINGS, WATER', body: 'OSM gives us the polygons: roof outlines, water boundaries, bridges. Each shape is closed and oriented before it meets the mesh.', side: 'overpass-turbo · 1.04 sec', }, { n: '03', title: 'Mesh', kicker: 'WATERTIGHT · MEASURED ROOF SURFACES', body: 'The LIDAR heightfield and OSM footprints are fused into a single watertight mesh. Water is cut down by 1 mm to read as river, not pavement.', side: 'tier-3 · ~3.2 M tris', }, { n: '04', title: 'Object', kicker: 'BAMBU LAB X1 · PETG MIST · 9 CM', body: 'Printed in PETG Mist, hand-finished, seated on a graphite base. Boxed in a kraft mailer with attribution and an off-print on the inside cover.', side: '7 days · made to order', }, ]; const sectionContent = (
THE PROCESS · IN FOUR ACTS

How a place
becomes a shelf object.

{phases.map((ph, i) => { const active = i === activePhase || mode === 'off'; return (
{ph.n}
{ph.title}
{ph.kicker}
{(active || mode === 'off') && (

{ph.body}

)}
{ph.side}
); })}
{mode === 'scroll' && (
SCROLL PROGRESS
{[0.25, 0.5, 0.75].map(x => (
))}
{phases.map((ph, i) => ( {ph.n} ))}
)}
); return (
{mode === 'scroll' ? (
{sectionContent}
) : sectionContent}
); } function ProcessStage({ progress, phaseProgress, activePhase, mode }) { const lidarDots = React.useMemo(() => { const rng = window.makeRng('sheffield-lidar-v2'); const cells = []; const N = 36; for (let y = 0; y < N; y++) { for (let x = 0; x < N; x++) { const cx = (x - N/2) / N, cy = (y - N/2) / N; const h1 = Math.exp(-(cx*cx + cy*cy) * 5); const h2 = Math.exp(-((cx-0.2)**2 + (cy+0.15)**2) * 12); const h3 = rng() * 0.25; cells.push({ x: x / N, y: y / N, h: Math.max(0, Math.min(1, h1 * 0.7 + h2 * 0.4 + h3)) }); } } return cells; }, []); const tile = React.useMemo(() => window.generateTile('sheffield-process'), []); const photoSrc = 'assets/products/sheffield_on_base.png'; return (
{/* 01 LIDAR */}
{lidarDots.map((c, i) => { const sx = c.x * 1000 + 14, sy = c.y * 1000 + 14; const size = 4 + c.h * 14, shade = 0.15 + c.h * 0.7; return ; })}
{/* 02 Footprints */}
{lidarDots.filter((_, i) => i % 4 === 0).map((c, i) => ( ))} {tile.roads.map((r, i) => ( ))} {tile.roads.map((r, i) => ( ))} {tile.buildings.map((b, i) => ( ))} {tile.waterPath && }
{/* 03 Mesh */}
{Array.from({length: 17}).map((_, i) => ( ))} {tile.buildings.slice(0, 26).map((b, i) => { const ex = (b.x - 500) * 0.8; const ey = (b.y - 500) * 0.8; const h = 30 + (i % 5) * 18; return ( ); })}
{/* 04 Object — real Sheffield on-base photo */}
finished object
); } function StageBadge({ text, sub, dark }) { return (
{sub}
{text}
); } function StageMeasure({ top, left, right, v, dark }) { return (
{v}
); } /* ────────────────────────────── 04 FEATURED COLLECTION */ function FeaturedCollection({ items, go }) { return (
FROM THE COLLECTION

Six cities,
six signatures.

The twelve are paired in six: a city, a landmark, the colour the landmark gives back. Same square, same scale.

{items.slice(0, 6).map((item, i) => ( go('product', item.id)}/> ))}
); } /* ────────────────────────────── 05 THE TWELVE Replaces the sticker wall. Twelve photographed objects, in a grid, on a dark canvas. The accent colour shows up only as a tiny rule. */ function TheTwelveGrid({ go }) { const twelve = window.CATALOG.filter(c => c.featured).slice(0, 12); return (
THE TWELVE

One format. Twelve places.

Six in production, six in development. Each is a 9 cm crop, scaled to the same 1:11000, printed in PETG Mist and seated on a graphite base.

{twelve.map((c, i) => ( ))}
); } /* ────────────────────────────── 06 COMMISSION PREVIEW */ function CommissionPreviewV2({ go }) { return (
COMMISSION

Your place,
your square kilometre.

The childhood street. The summit you've climbed twenty times. The hospital where they were born. Anywhere on the map, on the same system as the twelve.

{[ ['Free preview', 'See your area in plan view before you spend a penny.'], ['Same system', '9 × 9 cm, 1:11000, PETG Mist on a graphite base.'], ['Eight-week turnaround', 'Printed, finished, photographed and shipped from Sheffield.'], ].map(([title, d]) => (
{Icon.check}
{title}
{d}
))}
{Icon.search} S1 2HE — Sheffield City Hall 53.3811° N · 1.4701° W
PREVIEW AREA
Sheffield City Centre · 1.00 × 1.00 km
); } /* ────────────────────────────── 07 AR SHELF MODULE Surfaces the existing AR Quick Look feature (USDZ at /api/ar/usdz/.usdz) for visitors who haven't entered the commission flow yet. iPhone Camera → scan → AR preview at true 9 cm. Falls back to a tasteful "iPhone required" note when the API isn't reachable. */ function ARShelfModule() { const [supported, setSupported] = React.useState(null); // null = probing const [arUrl, setArUrl] = React.useState(null); React.useEffect(() => { // Probe the sample USDZ endpoint. In production the page knows which // output_id to load; for the marketing module we pick the most recent // commissioned model from the cache. The endpoint returns a redirect // or a file; either is fine. const sampleId = 'sample'; const url = window.location.origin + '/api/ar/usdz/' + sampleId + '.usdz'; fetch(url, { method: 'HEAD' }) .then(r => { setSupported(r.ok); if (r.ok) setArUrl(url); }) .catch(() => setSupported(false)); }, []); // Build a static QR for the sample (or generic info card) — we DO have // /api/qr in production but for the marketing surface a plain SVG QR // placeholder lets us render even without backend. const qr = ( {/* synthetic QR pattern — visually convincing but not scannable. When supported is true and arUrl is set, we swap for /api/qr. */} {Array.from({ length: 33 * 33 }).map((_, i) => { const x = i % 33, y = Math.floor(i / 33); const seed = (x * 71 + y * 113 + x * y * 17) % 7; if ((x < 7 && y < 7) || (x > 25 && y < 7) || (x < 7 && y > 25)) { const inFinder = (x >= 1 && x <= 5 && y >= 1 && y <= 5); const innerDot = (x >= 2 && x <= 4 && y >= 2 && y <= 4); if (inFinder && !innerDot) return null; if ((x === 0 || x === 6 || y === 0 || y === 6) && (x < 7 && y < 7)) return ; if (innerDot) return ; if ((x === 26 || x === 32 || y === 0 || y === 6) && (x > 25 && y < 7)) return ; if ((x >= 28 && x <= 30 && y >= 2 && y <= 4)) return ; if ((x === 0 || x === 6 || y === 26 || y === 32) && (x < 7 && y > 25)) return ; if ((x >= 2 && x <= 4 && y >= 28 && y <= 30)) return ; return null; } return seed < 2 ? : null; })} ); return (
AR · NO APP REQUIRED

See it on your shelf,
before you order.

Scan with the iPhone Camera. Safari opens AR Quick Look and places the model at true 9 cm on any flat surface. Walk around it. Move it. See whether it lives on the mantelpiece or the desk.

{[ ['01', 'Point Camera', 'Open Camera, point at the code.'], ['02', 'Tap to open', 'Safari opens the AR preview.'], ['03', 'Place it', 'Tap on a surface to place at 9 cm.'], ].map(([n, t, d]) => (
{n}
{t}
{d}
))}
iPhone only. Android AR Core in development — on Android the same scan opens a high-res 3D preview, no AR placement yet.
{/* Phone mockup */}
AR preview {/* AR overlay */}
AR · LIVE 9.0 CM
{/* Plane indicator */}
{/* QR card to the left */}
SCAN · TO SEE IT
{arUrl ? ( AR QR ) : qr}
SHEFFIELD · 9 CM
{/* Floating measurement annotations */}
TRUE TO SCALE
1 : 1
placed at 9 cm
); } /* ────────────────────────────── 08 PULL QUOTE */ function PullQuoteV2() { return (
WHAT PEOPLE SAY

"Felt like opening an Ordnance Survey map and finding it had been pressed into three dimensions."

THE GEOGRAPHER QUARTERLY · SPRING 2026
); } /* ────────────────────────────── 09 ARCHIVE */ function ArchiveSection({ items, go }) { return (
FROM THE STUDIO ARCHIVE

Recent commissions.
{items.map((item, i) => ( go('product', item.id)}/> ))}
); } /* ────────────────────────────── 10 PRESS STRIP */ function PressStripV2() { const quotes = [ { q:'"You can find your own front door."', a:'Iona Galloway · Architect, Glasgow' }, { q:'"Mine is a square kilometre of Hampstead Heath. It looks like a fossil."', a:'Dev Patel · London' }, { q:'"The detail is unreasonable — and exactly right."', a:'Studio Notes · April 2026' }, ]; return (
FIELD NOTES FROM READERS
{quotes.map((p, i) => (

{p.q}

{p.a}
 ))}
); } Object.assign(window, { useV2, HomePage, HeroV2, HeroModel, HeroPhotoStack, HeroPlan, HeroTriptych, MarqueeStripV2, SignatureProcess, ProcessStage, FeaturedCollection, TheTwelveGrid, CommissionPreviewV2, ARShelfModule, PullQuoteV2, ArchiveSection, PressStripV2, });