GoodCase.aiGoodCase.aiAI Case Evidence Library
CasesDailySkillsCreatorsFavoritesSubmit
中文EN
Agent Access →
GoodCase.ai · AI Case Evidence LibraryLoading the case library.
ChangelogFeedback
GoodCase.aiGoodCase.aiAI Case Evidence Library
CasesDailySkillsCreatorsFavoritesSubmit
中文EN
Agent Access →
AI Coding (UI)XEvidence L1#web#human-reviewed#Fable 5Fable 5

Fable 5 Recreation of a 3D Cloud Infrastructure Website

ghosstty_ avatarCreatorghosstty_ →

A web case by @ghosstty_ created with Fable 5, including the public result, full prompt, and original source.

View original source ↗
Source ♥ 74

Prompt

Rebuild the web app shown in the attached video as closely as possible. It's a dark, cinematic 3D "intent → infrastructure" city-visualization ("Intent to infrastructure with Gemini Cloud Assist") — an AI agent builds a glowing neon city on a dark 3D map that the user flies around, hovers, and inspects while a live agent log streams. Recreate the look, layout, motion, and interactions faithfully.

MATCH THIS EXACTLY:
- 3D scene: a dark near-black city — flat street grid with low dark extruded building blocks fading to a hazy horizon with faint mountains + stars. A central CLUSTER of structures glowing in vivid neon (magenta, electric green, cyan, blue, orange) with heavy bloom. Animated dashed route lines (blue/green/yellow) flowing through the streets. Glowing vertical light-beam beacons (blue), a pulsing green ground ring, floating pins.
- POI hover: a rounded Material pill tooltip with an icon + label fades in (e.g. "Spectators", "Medical Station").
- UI chrome (Material style, rounded/glassy, over the canvas):
  · top bar: hamburger menu + dim title "Intent to infrastructure with Gemini Cloud Assist"
  · left vertical tool rail: favorite (heart), location/shield, camera, orbit/recenter, fullscreen + camera-preset toggles "A / B / C"
  · bottom-center action bar: a rainbow Gemini-style gradient orb, a compare/swap icon, a ">_" terminal/log toggle
  · bottom-right: settings gear + refresh
  · right "LOG" panel (slides in on ">_"): tabs PLANNER / RUNNER; table columns TIME · AGENT · TYPE · MESSAGE; rows streaming (PLANNER·TOOL, SIMULATOR·RUN, PLANNER·RUN) with colored type tags (red TOOL / blue TOOL / green RUN) + a colored dot per row.

BEHAVIOR TO REPRODUCE:
- Free orbit / pan / zoom camera; smooth camera fly between top-down overview and low horizon angle.
- Camera presets A/B/C: click to smoothly fly (GSAP) between framed viewpoints.
- Hover POI → tooltip pill; toggle the Log panel; new log rows stream in with a subtle highlight.
- A cinematic "build" reveal: structures rise and light up neon cluster-by-cluster, routes draw in, beacons pop.
- Heavy bloom on neon emissives, animated dashed routes, pulsing beacons, slow idle camera drift, smooth eased transitions (no snapping).

STACK: Next.js + TypeScript + Tailwind, React Three Fiber (Three.js) + drei (OrbitControls, GLTF Draco), GSAP for camera, Framer Motion for UI panels, postprocessing (bloom on emissive layer, vignette, faint grain). 60fps, responsive, prefers-reduced-motion fallback.

I'll supply the city as a GLTF — scaffold everything around a placeholder /public/city.glb (or generate a procedural dark grid city with extruded blocks if none), and make the neon cluster, routes, beacons, POIs, camera presets, and streaming Log panel fully working around it. Build the complete app.

Reusable method

Key decisions

Check whether information hierarchy, module order, and CTA clarity all hold in the final result.

Adapt it to your subject

Extract “target result → the product name, audience, page modules, and primary button → constraints” as a reusable template for similar work.

Where it breaks

Run single-variable comparisons around module order, value proposition, and CTA placement. Record the model, cost, and failures; turn it into a Skill only after it repeats reliably.

Recommended models

Fable 5
Stability
Cost
Medium

Derived Skill

Reusable methods evidenced by this Case.

Skills are derived from repeated patterns in published cases. They are not a separate submission type.

Shared skill3D and motion heroView evidence →Shared skillLanding-page information structureView evidence →
ghosstty_ avatar

Creator

ghosstty_

ghosstty_ focuses on production-ready AI interfaces and is active on X. “Fable 5 Recreation of a 3D Cloud Infrastructure Website” is the current representative case, built with Fable 5 with its stability retest open to votes.

Editor’s pickAI Coding (UI)
View creator →

Keep exploring

Explore related cases.

View all AI Coding (UI) Case →
3D Supermarket-Packaging-Style Creative Agency Website
AI Coding (UI)X@Oluwaphilemon1 →

3D Supermarket-Packaging-Style Creative Agency Website

A webpage case by @Oluwaphilemon1 using Claude Fable 5 · Three.js · Blender · GSAP, including the public result, full prompt, and original source.

Skill · 3D and motion heroSkill · Portfolio story architecture

Prompt

Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render al

Source heat
48
Stability
View case →
3D Invoice Printer SaaS Component
AI Coding (UI)X@uxsweta →

3D Invoice Printer SaaS Component

A webpage case by @uxsweta using AI UI Builder, including the public result, full prompt, and original source.

Skill · 3D and motion heroSkill · Product and commerce conversion page

Prompt

Few people asked for the prompt, so here it is 👇 PS: Tweak it based on your use case. Create a modern, minimal 3D Invoice Generator Machine component with a premium SaaS-style aesthetic. Visual Design - Design a wid

Source heat
45
Stability
View case →
Minimal AI Consultant Personal Portfolio
AI Coding (UI)X@shushant_l →

Minimal AI Consultant Personal Portfolio

A webpage case by @shushant_l using AI Website Builder, including the public result, full prompt, and original source.

Skill · Portfolio story architectureSkill · Product and commerce conversion page

Prompt

Here's how to create your website in minimalist design style with AI. Use this prompt: Design a modern minimalist portfolio website for a digital creator and AI consultant. Use a clean black, white, and neutral color pa

Source heat
43
Stability
View case →
GoodCase.ai · AI Case Evidence LibraryEach detail page keeps the work, method, creator, and retest evidence in one reading path.
ChangelogFeedback