Loading…
Creator · ghosstty_
View original source ↗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.Models & stability
Recommended models
Independent retest evidence
Aug 9, 2026
Keep exploring
A webpage case by @Oluwaphilemon1 using Claude Fable 5 · Three.js · Blender · GSAP, including the public result, full prompt, and original source.
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
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「3D Animated Pin」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…

Prompt
First search for the "/unlazy" skill, read it fully, and use it throughout the entire task. Treat this as a major visual build lasting at least {argument name="minimum duration" d