TerraGrid

TerraGrid is a concept I art-directed and built in two prompts. It is a premium real-estate-intelligence brand and an immersive single-page site, designed end to end to test one question: if I write a brief precise enough, can an AI build tool execute taste at production quality. The brand, the data and the numbers on the site are illustrative. There is no client and no real company behind it. What is real is the site itself, the art direction behind it, and the engineering it took to make a single 3D scene carry a whole marketing narrative.

The brief was the work

I built TerraGrid in two prompts with Fable 5, an AI design and build tool I had brief access to. The first prompt was not a one-liner. It was a long, exacting creative brief, and that brief is the actual design work. The second prompt was the build, followed by a critical self-review and the top five fixes I wanted made.

The hard part was refusing the default. Ask most AI tools for a real-estate data platform and they reach for the same thing: a dark, futuristic landing page, neon accents, a glowing brain, crypto-grid science fiction. I directed away from all of it. The brief demanded the opposite register, because the product promise is evidence over instinct and the design has to feel like considered judgment, not a hype machine.

The art-direction calls

• Light, premium, architectural, calm and editorial. Never dark, never science fiction.
• A warm off-white, soft grey, muted beige and pale blue-grey palette, with charcoal text.
• Clay-rendered architectural massing models with soft ambient-occlusion shadows.
• An orthographic, axonometric camera, so the city reads like a study model on a table rather than a game.
• Abstract building forms with data layers floating above them. No neon, no crypto, no generic AI-brain imagery.

None of this is decoration. The visual restraint is the positioning. Writing a brief precise enough that an AI could hold that restraint, then editing what came back, was the job.

The line I wrote for the site is the line for the whole brief: spatial intelligence for the built world.

The problem TerraGrid answers

The concept starts from a real frustration in commercial real estate. The signals exist. They just never arrive in one place. Leasing events live in one system, footfall in another, ESG audits in a third. By the time someone assembles the full picture, the market has already moved.

The site shows the disorder before it resolves it. Data chips scatter across the scene, loose and unconnected, so you watch the mess rather than read about it. Only then does the pitch land: TerraGrid pulls those scattered signals into one model.

One spatial model

The answer the concept proposes is a single spatial model. One model, every signal in context. TerraGrid binds every data stream to the physical asset it describes, then lets you query the city like a database. In the site this is the moment the scattered chips converge and snap onto buildings, the disorder from the previous section resolving into structure.

The supporting panel states it plainly: a unified signal layer, seven sources, normalized and asset-bound. Because the city is a calm clay model rather than a glowing dashboard, the convergence reads as order arriving, not as one more busy interface.

Built for the decisions that move portfolios

From the one model, the concept frames three jobs, the decisions that actually move a portfolio. I wrote each as a single claim with the evidence underneath, so the page argues rather than lists features.

Asset Intelligence

Every building, fully resolved. Occupancy, leases, NOI, capex and ESG bound to a living model of each asset, then benchmarked against a true peer set rather than a rough average.

Market Signals

Hear the market move first. Rents, transactions, the supply pipeline and footfall streamed and normalized at district level, with anomalies surfaced before they price in.

Portfolio Strategy

From signal to allocation. Scenario modeling and risk-adjusted recommendations that are explained and sourced, ready to take into an investment committee.

Query the city like a database

The explorer is where the concept gets specific, and it was the most demanding piece to art-direct and to build. You hover any highlighted building and the model resolves the asset under your cursor: occupancy, lease events, the read TerraGrid takes. I wrote three featured assets so the section makes an argument instead of a demo, each one a different kind of decision.

Meridian House: core, performing, fully priced

Stabilized occupancy, and a 2026 lease event already sitting in the valuation. The model says hold. Including it is a point about honesty: not every asset is a hidden opportunity, and a model worth trusting will tell you when there is nothing to do.

The Foundry: value-add, with a capex catch

Under-rented, with a roof plant renewal landing in 2027. The model nets the upside and the cost into one risk-adjusted return, so the trade-off becomes a single number rather than a hunch.

Solent Gate: the mispricing the market missed

Its vacancy reads as distress to the market. The model reads it as reposition optionality, two blocks from the strongest rent growth in the district. This is the asset that makes the case for the whole platform: the signal was always there, just never in one place.

One model, three ways to win

The same model serves three audiences, and the concept frames each as a single claim with the evidence underneath.

Investors

Find what the market has not priced. The model surfaces the mispricing and the optionality a spreadsheet flattens out.

Developers

Build where demand is provable. District-level signal shows where demand is real before ground breaks.

Occupiers

Choose space with evidence. The same asset intelligence that prices a building also qualifies it as a place to operate.

From spatial model to investment decision

The site ends its argument by turning the model into a product. The camera tilts the city up into a plan view, and that plan is masked straight into the map slot of a working dashboard, so the 3D scene and the interface are visibly the same thing seen two ways. Spatial model in, investment decision out.

The dashboard reads as a real product surface: a map panel, an asset list scored by the model, a risk gauge, a market-trend chart and a portfolio recommendation card. Every number on it is illustrative. It is there to show the shape of the decision, not to report a result.

How it was built

The output of those two prompts is a real Next.js 16 and React 19 site, with React Three Fiber for the 3D, GSAP and ScrollTrigger for the choreography, Lenis for smooth scroll, Tailwind and zustand holding it together. The decisions worth pointing at are in how it works as one scene.

One scene behind everything

There is a single persistent transparent orthographic canvas fixed behind the page. Every section scrolls over that one scene rather than mounting its own. A seeded generator builds the whole city as a single instanced mesh, so it is one draw rather than thousands.

The clay look is baked, not rendered

The soft architectural-model look uses no post-processing at all. The ambient occlusion is a gradient baked into the geometry, sitting on a painted ground texture with shadow pools, a river and a ghost-block grid. That is what keeps a heavy aesthetic cheap enough to run on scroll.

A bridge between scroll and camera

Scroll timelines never touch the 3D objects directly. A scrubbed GSAP timeline moves a plain target, and the camera eases toward that target every frame. GSAP never touches three, and React never re-renders on scroll, which is why the motion stays smooth. The pinned sections all hang off this: chips scatter then converge, the explorer casts a ray to read the building under your cursor, and the dashboard reveal tops the camera into plan view and masks it into the interface.

Built to degrade well

It also fails gracefully, which is part of the craft. On smaller screens, a coarse pointer or reduced-motion settings, the pinned sections switch off, the city drops to a lighter tier, the explorer becomes tap-cards and the dashboard shows a static clay map. If the device cannot start WebGL at all, an error boundary keeps the rest of the site working.

My contribution to all of this was direction and judgment, not hand-coding. The skill was writing a brief precise enough that an AI could execute premium restraint, then reviewing the result hard enough to know which five things to fix.

The brief was the work

TerraGrid is a concept, so the outcome is the artifact: an immersive, architecturally art-directed 3D site that went from a written brief to a production-grade build in two prompts. What the experiment actually measured was the brief. Every quality visible on the page, the restraint of the palette, the patience of the camera, which sections earned a pin and which did not, was specified before a line of code existed, and the build held because the specification did.

That is the discipline this project sharpened. When execution stops being the bottleneck, art direction stops being commentary on the work and becomes the work: one document dense enough to carry taste across the gap, and the judgment to reject what comes back wrong. I will let the site close on its own line: make better real estate decisions before the market moves.

View the live site