Pinned Tweet
Claude 5.5 Sonnet built this entire Scottish Highland steam train scene.
Pure code. Zero 3D assets.
• 770k tokens burned
• ~1 hour generation time
• Procedural viaduct, terrain, and particle smoke
Is procedural 3D completely replacing traditional asset pipelines? 🚂
Prompt:
PROJECT: HIGHLAND EXPRESS
Fully Procedural 3D Steam Railway Experience
You are a senior Three.js developer, procedural 3D artist, animation engineer, and technical artist.
Build a visually stunning, fully procedural 3D railway scene featuring a detailed Victorian steam locomotive crossing a massive stone viaduct in the Scottish Highlands.
The result should resemble a beautifully crafted miniature railway diorama brought to life, with cinematic lighting, rich environmental details, realistic mechanical animation, and atmospheric depth.
TECHNOLOGY:
Three.js
TypeScript
Vite
Custom BufferGeometry
Procedural shaders and materials
Instanced meshes for environmental details
CRITICAL REQUIREMENT:
Everything must be generated procedurally using code. Do not use premade 3D models, downloaded assets, external image textures, or model files. Generate geometry, materials, terrain, vegetation, architectural structures, and animations programmatically.
1. STEAM LOCOMOTIVE
Create a highly detailed Victorian steam locomotive with convincing proportions and intricate mechanical components.
Include:
Cylindrical boiler with detailed metal bands and seams.
Large smokebox and front door with bolts and hinges.
Tall chimney with a detailed rim.
Steam dome and safety valves.
Headlamp with a warm glow.
Detailed cowcatcher and front buffers.
Multiple large driving wheels with spokes.
Smaller leading and trailing wheels.
Connecting rods and coupling rods.
Pistons and crank mechanisms.
Cab with windows, controls, and interior details.
Handrails, pipes, rivets, vents, and metal fittings.
Procedurally generated paintwork and weathering.
Use custom geometry and carefully modeled details rather than simple primitives as finished components.
The locomotive must have a recognizable silhouette and convincing industrial construction.
2. MECHANICAL ANIMATION
The locomotive must move continuously along the railway track.
Implement:
Rotating driving wheels.
Connecting rods synchronized with wheel rotation.
Correctly coordinated crank movement.
Animated pistons where visible.
Subtle locomotive suspension movement.
Smoke emitted from the chimney.
Steam escaping from valves and pipes.
Headlamp illumination.
Wheel rotation and connecting-rod movement must remain mechanically synchronized with the train's speed.
3. PASSENGER CARRIAGES
Create several classic Victorian passenger carriages behind the locomotive.
Each carriage should feature:
Detailed body panels.
Wooden or painted metal construction.
Repeated windows.
Roof curvature and roof seams.
Doors, steps, buffers, and couplings.
Underframe details and wheel assemblies.
Warm interior lighting.
Arrange the carriages along the railway track and make them follow the locomotive smoothly.
All carriages must maintain consistent spacing and alignment when traversing curved tracks.
4. MASSIVE STONE VIADUCT
Build a spectacular railway viaduct crossing a deep Highland valley.
Include:
Multiple massive stone arches.
Thick stone pillars.
Detailed masonry blocks.
Individual stones with subtle variations.
Decorative stone railings.
Railway sleepers and metal rails.
Weathering, moss, and subtle discoloration.
Convincing structural proportions.
Generate the arches parametrically rather than assembling the entire bridge from plain boxes.
The train must travel across the top of the viaduct while the camera reveals the enormous scale of the structure.
5. RAILWAY TRACK
Procedurally generate a railway track following a smooth three-dimensional path.
Include:
Two parallel steel rails.
Repeated wooden sleepers.
Rail fasteners.
Gravel ballast.
Track curvature and elevation changes.
Use a spline-based track system.
The locomotive and all carriages must follow the track accurately, including their orientation along curves.
The train should not float above the rails, penetrate the bridge, or lose alignment during turns.
6. SCOTTISH HIGHLANDS ENVIRONMENT
Create a beautiful Highland landscape surrounding the railway.
Generate:
Rolling green hills.
Distant mountain ranges.
Rocky cliffs and exposed stone.
A deep valley beneath the viaduct.
A winding river or stream.
Small waterfalls where appropriate.
Dense patches of pine trees.
Scattered deciduous trees.
Grass, shrubs, moss, and wildflowers.
Rocks and boulders of varying sizes.
Use procedural terrain generation, noise functions, custom geometry, and instanced vegetation.
Trees must have varied silhouettes, branch structures, and foliage density.
Avoid repeating the same tree or rock identically throughout the scene.
Create depth through layered terrain, atmospheric fog, and distant mountain silhouettes.
7. STEAM, SMOKE, AND ATMOSPHERE
Create convincing procedural particle effects.
Chimney smoke:
Continuous emission synchronized with locomotive movement.
Expanding smoke puffs.
Upward motion with wind-driven drift.
Gradual fading and dissipation.
Steam:
Short bursts from valves and mechanical components.
Expanding translucent clouds.
Natural movement and fading.
Environment:
Light atmospheric mist in the valley.
Subtle clouds moving across the sky.
Gentle vegetation movement.
Optional drifting particles illuminated by sunlight.
Use efficient particle systems and shader-based effects where appropriate.
Avoid oversized opaque particles that resemble simple spheres.
8. LIGHTING AND VISUAL STYLE
Create a cinematic late-afternoon Highland atmosphere.
Include:
Warm sunlight illuminating the locomotive and viaduct.
Cool shadows in the valley.
Soft atmospheric haze.
Distant mountains fading into the mist.
Realistic metal reflections.
Detailed stone and wood materials.
Warm carriage windows.
A glowing locomotive headlamp.
Subtle ambient occlusion.
Carefully controlled shadows.
Restrained bloom and color grading.
The locomotive should remain the visual centerpiece.
Use a polished, stylized-realistic aesthetic with rich geometry and a miniature diorama presentation.
Avoid excessive darkness, oversaturated colors, and excessive post-processing.
9. CAMERA AND PRESENTATION
Create a cinematic opening sequence.
Begin with a wide establishing shot showing the viaduct, valley, and approaching train.
Then:
Slowly approach the locomotive.
Reveal the rotating wheels and connecting rods.
Track alongside the moving train.
Show the train crossing the stone arches.
Pull back to reveal the surrounding Highland landscape.
Finish with a dramatic wide shot of the entire scene.
Provide interactive orbit controls and zoom.
Include an optional train-follow camera that tracks the locomotive.
Allow the user to pause and resume the train animation.
The camera must not clip through the terrain, locomotive, or bridge.
10. AUDIO
If practical, implement subtle procedural or synthesized audio:
Steam locomotive chuffing synchronized with wheel rotation.
Steam release sounds.
Train wheel and rail ambience.
Distant wind and environmental ambience.
Audio must be optional and should respect browser autoplay restrictions.
11. TECHNICAL QUALITY
Organize the project into logical modules:
Scene and renderer.
Locomotive geometry.
Mechanical animation.
Passenger carriages.
Railway track.
Viaduct generation.
Terrain generation.
Vegetation.
Particle systems.
Lighting and atmosphere.
Camera and controls.
Requirements:
Use instancing for repeated sleepers, stones, foliage, and architectural details where appropriate.
Avoid excessive draw calls and unnecessary geometry duplication.
Use appropriate geometry resolution and level-of-detail techniques.
Handle browser resizing correctly.
Dispose of resources appropriately.
Maintain smooth animation and responsive controls.
Ensure all moving components remain synchronized.
Avoid placeholder geometry in the final hero locomotive.
12. EXECUTION REQUIREMENTS
Do not stop after writing a plan.
Inspect the existing project structure, implement the complete experience, run the application, and inspect the actual rendered result.
Identify visual defects and refine the locomotive, mechanical animation, viaduct, terrain, materials, and lighting.
Verify that:
The locomotive follows the track.
Wheels rotate correctly.
Connecting rods remain synchronized.
Carriages follow the locomotive.
The train crosses the viaduct without clipping.
Smoke and steam animate correctly.
Camera controls work.
Performance remains acceptable.
Deliver a complete, runnable Vite + Three.js project with installation instructions.
FINAL QUALITY TARGET:
The scene should look like an exceptionally detailed miniature steam railway brought to life: a beautiful locomotive with moving mechanical components, a massive stone viaduct, lush Highland scenery, drifting steam, and cinematic lighting.
Prioritize visual quality, procedural modeling, mechanical accuracy, coherent animation, and environmental atmosphere over unnecessary features.
lets build this.
Storm at sea simulation - update 2
Built entirely with code, zero external 3D models
What's new:
• MSC vessel & cruise ship options
• Stormy weather & wave dynamics
• Night mode water reflections & ship lighting
How does it look?
Verified badge: done.
500 verified community: done.
Just 466K impressions to go on the home stretch.
Huge thanks to everyone rocking with the 3D & AI experiments so far - we’re just getting warmed up! 🤝🔥
@grok If you had to permanently delete one and run the entire xAI stack without it, what's getting purged first?
Prompted both models to build an interactive procedural penguin with GPU fur strands.
One nailed the squish dynamics. The other completely gave up on the tumble physics.
Top (Opus 5.5) or Bottom (Astra 6)?
Prompt:
Create an adorable, interactive 3D fluffy penguin toy using Three.js.
Build the penguin entirely from procedural geometry. Give it a
rounded black-and-white body, tiny wings, orange feet, a small beak,
expressive eyes, and thousands of individually animated fur strands.
INTERACTIONS:
- Click and drag to poke, push, and pull the penguin.
- Its soft body should squash, wobble, and bounce.
- It should fall over when pushed and attempt to stand back up.
- Animate a cute waddling idle motion.
- Make the fur react locally to cursor interaction and movement.
VISUALS:
- Realistic fluffy fur using efficient GPU techniques.
- Soft studio lighting, contact shadows, and a clean pastel background.
- Smooth, physically believable movement.
- A polished, minimal interface.
Use Three.js, TypeScript, and Vite. No external models or textures.
Optimize for smooth real-time performance.
Build a working application, not a mockup. Test the interactions
and fix errors.
Prioritize cuteness, tactile physics, detailed fur, and a memorable
10-second visual showcase. Avoid unnecessary features.
95% of software engineers claiming they "code 10x faster with AI" are just writing unmaintainable tech debt at 10x speed.
Same prompt: "Procedural coastal diorama in Three.js. No models, no textures."
• DeepSeek V4.1 Flash: ~1 hour · 78M tokens
• MiniMax 3.1 Flash: ~2h 17m · 60.3M tokens
Lighthouse, boat, water shaders, birds, and night mode.
Left or Right which one built the better scene? 👇
Prompt:
Build a beautiful, highly detailed, interactive 3D coastal diorama using Vite and Three.js. Everything must be generated procedurally using code. No premade 3D models, downloaded assets, image textures, external model files, or manually created assets. Generate all geometry, materials, textures, and animations programmatically.
SCENE: Create a miniature rocky island surrounded by an animated ocean, featuring a tall lighthouse, a wooden fishing boat, pine trees, a winding coastal path, a tiny dock, grass, flowers, rocks, and coastal vegetation. Use a polished, stylized 3D diorama aesthetic with excellent composition and rich details.
LIGHTHOUSE: Procedurally generate the cylindrical tower, alternating painted sections, balconies, railings, stairs, windows, glass lantern room, roof, and decorative details. Add a rotating beacon with a sweeping volumetric-style light beam.
OCEAN: Generate a subdivided water mesh with custom GLSL shaders for animated waves, layered wave patterns, moving normals, reflections, and color gradients. Add procedural foam near the shoreline and rocks. Make the fishing boat bob, tilt, and rotate naturally in response to the simulated waves.
ISLAND: Generate the island using procedural terrain geometry, layered rock formations, irregular coastlines, cliffs, and elevation variation. Add winding paths, moss, grass, tiny flowers, and vegetation using procedural geometry and instanced meshes.
TREES: Generate pine trees procedurally with varied trunks, branches, and layered foliage. Add subtle wind-driven movement to branches and vegetation.
ATMOSPHERE: Generate animated clouds, drifting seabirds using procedural geometry, ocean mist, and subtle atmospheric particles. Use a procedural sky shader and cinematic lighting.
MATERIALS: Create all textures and surface variation procedurally using shader functions, noise, vertex colors, and generated canvas textures where appropriate. Use detailed wood grain, weathered lighthouse paint, rocky surfaces, and varied foliage. No external image textures.
LIGHTING: Implement golden-hour lighting, soft shadows, realistic water reflections where practical, a warm lighthouse glow, subtle bloom, and strong warm-versus-cool color contrast. Add a day/night transition that changes the sky, lighting, lighthouse illumination, and environmental mood.
INTERACTIVITY: Implement orbit controls, zoom, a day/night toggle, a wind-strength slider that affects vegetation and waves, and a lighthouse-beam toggle. Add smooth camera movement and a polished default viewing angle.
TECHNICAL REQUIREMENTS: Use Vite and Three.js. Generate custom BufferGeometry, parametric surfaces, procedural curves, shader-based effects, and instanced meshes. Avoid using basic primitives as finished assets; use them only as building blocks for more detailed custom geometry. Keep the code modular, optimize draw calls, handle resizing, and ensure all visible controls work. Maintain smooth performance in a modern desktop browser.
DELIVERABLE: Create a complete, runnable project. Run it, inspect the actual rendered scene, identify visual deficiencies, and refine the geometry, water, materials, lighting, and animation.
Prioritize exceptional visual quality, intricate procedural modeling, convincing animated water, natural boat movement, and cinematic presentation. The final result should look like a carefully crafted miniature 3D artwork, not a collection of basic shapes.
@grok is it a crime to generate my own happiness with ChatGPT when the real algorithm won't?
Drop the coolest thing you’ve built with AI 👀
Full apps, Three.js scenes, shader experiments, or tiny weekend hacks anything goes.
Drop your links and screenshots below, let's see what everyone's shipping 👇
Here’s what I’ve been tinkering with lately: 30+ interactive procedural worlds, shaders, and physics toys built with frontier models.
experiments.fazleyrabbi.xyz
Still reviewing and trying everyone else's builds coming in 👀
Replying to @nabendu82
@nabendu82 challenged me to see if LLMs could build a full Subway Surfers clone autonomously from scratch.
Exact same prompt. Zero external 3D models. Raw Three.js procedural city.
• Left: GPT Sol 6.1 (15 min)
• Right: Claude Sonnet 5.5 (~1 hr)
Which runner would you actually play?
Prompt:
You are the lead game developer, 3D artist, gameplay designer, and QA engineer for this task. Build the complete project autonomously in one continuous run. Do not stop after creating a plan, do not ask me questions, and do not wait for confirmation. Make sensible creative decisions yourself and continue until the game is working and verified.
## Goal
Create a polished browser-based 3D infinite runner inspired by the general gameplay loop of games such as Subway Surfers, but do not copy its characters, environment, branding, music, models, or artwork.
The original game concept is called **Rooftop Rush: Neo India**.
The player controls a small futuristic courier robot running endlessly across the rooftops of a colourful fictional Indian megacity. The setting should combine modern skyscrapers, rooftop gardens, solar panels, water tanks, neon Hindi-inspired signage, monsoon clouds, flying delivery drones, distant temples, and warm sunset lighting.
## Hard restrictions
* Do not use Blender.
* Do not require Blender.
* Do not use Unity, Unreal Engine, Godot, or another external game engine.
* Do not download or depend on external 3D models.
* Do not use copyrighted game assets.
* Create all characters, environments, obstacles, effects, and animations procedurally with code.
* The finished game must run locally in a normal web browser.
* Do not leave important features as TODOs or placeholders.
## Technical stack
Use:
* Vite
* React
* TypeScript
* Three.js
* React Three Fiber
* Drei
* Zustand for game state if useful
* CSS for the HUD and menus
You may install other lightweight npm packages only when genuinely helpful. Keep the architecture understandable and avoid unnecessary complexity.
If the current directory already contains a project, inspect it first and integrate carefully. Otherwise, create the complete project.
## Core gameplay
Create a three-lane infinite runner with:
* Automatic forward movement
* Smooth left and right lane switching
* Jumping
* Sliding or ducking
* Keyboard controls:
* Left/Right arrows or A/D: change lanes
* Up arrow, W, or Space: jump
* Down arrow or S: slide
* P or Escape: pause
* Touch controls using swipe gestures for mobile
* Increasing running speed over time
* Procedurally recycled track sections so the game can continue indefinitely
* Accurate but forgiving obstacle collision detection
* Gradually increasing difficulty
* Game-over state and instant restart
## Player character
Create an original friendly courier robot entirely from Three.js geometry.
It should have:
* A distinctive head, glowing eyes, compact body, arms, and legs
* A small delivery pack
* A cyan-and-orange colour scheme
* A visible running animation
* Leaning during lane changes
* Jump and landing motion
* A proper sliding animation
* A brief hit reaction
* A subtle shadow underneath
The robot must face and move in the correct direction. Its running animation should look convincing and should not resemble sliding across the ground.
Use code-based skeletal-style grouping and transform animation; no imported model is needed.
## Environment
Build an attractive stylised low-poly environment containing:
* Three rooftop running lanes
* Procedurally repeating rooftop sections
* Buildings at different heights in the distance
* Water tanks, satellite dishes, solar panels, AC units, rooftop gardens, railings, pipes, and billboards
* Moving clouds and distant flying drones
* Warm sunset sky with light atmospheric fog
* Neon signs using fictional text and symbols
* Parallax movement to enhance the sensation of speed
* Variation between track sections so repetition is less obvious
Prevent visible gaps between recycled track sections.
## Obstacles
Include several clearly different obstacles requiring different reactions:
* Low AC units that must be jumped
* Overhead pipes or signs that require sliding
* Large water tanks that block an entire lane
* Moving cleaning robots
* Broken rooftop gaps with safe jump ramps
* Drone barriers that move between lanes
Generate fair obstacle patterns. Never create an unavoidable combination. Give the player enough reaction time, especially at the start.
## Collectibles and power-ups
Add glowing energy cells arranged in satisfying lines and arcs.
Include at least three power-ups:
1. **Magnet** – attracts nearby energy cells
2. **Shield** – protects the player from one collision
3. **Overdrive** – temporarily increases speed, gives invulnerability, and adds a stronger visual effect
Power-ups should have visible pickup effects, duration indicators, and clear feedback when they end.
## Scoring and progression
Implement:
* Score based on distance
* Energy-cell counter
* Current speed or level indicator
* Combo multiplier for collecting consecutive cells without missing
* High score saved with `localStorage`
* Difficulty progression based on distance travelled
* A small milestone notification every 500 metres
## Visual polish
Add:
* Responsive third-person follow camera
* Smooth camera movement during lane changes
* Mild camera shake on impact
* Small field-of-view increase as speed rises
* Dust or energy particles behind the robot
* Pickup particles
* Shield bubble effect
* Overdrive trail
* Subtle bloom-like glow using lightweight effects if performance allows
* Shadows and appealing lighting
* Smooth transitions between menu, gameplay, pause, and game over
Prioritise consistent art direction and readability over excessive detail.
## Audio
Use the Web Audio API or procedurally generated sounds so no external copyrighted audio is needed.
Include simple sounds for:
* Jump
* Energy-cell pickup
* Power-up pickup
* Collision
* Milestone
* Game over
Provide a mute/unmute button. Handle browser autoplay restrictions correctly by starting audio only after user interaction.
## User interface
Create a clean responsive interface with:
* Start screen showing the game title
* Short control instructions
* Start Run button
* In-game score, distance, energy, multiplier, and active power-up display
* Pause overlay
* Game-over screen with final score, distance, collected energy, and high score
* Restart button
* Mute button
* Small performance-friendly loading screen
The game should be playable on desktop and mobile. Ensure text remains readable without blocking the action.
## Code quality
Organise the code into sensible components and systems, for example:
* Game canvas/world
* Player
* Track manager
* Environment
* Obstacles
* Collectibles
* Power-ups
* Game state
* Input controller
* Collision system
* Audio manager
* HUD and menus
Avoid putting the entire game in one huge file. Use reusable TypeScript types and constants. Dispose of Three.js resources appropriately and avoid uncontrolled object creation during gameplay.
## Performance
Target smooth gameplay on an ordinary laptop and a modern mobile browser.
Use:
* Object pooling or recycling for track sections, obstacles, and collectibles
* Instanced meshes where useful
* Reasonable polygon counts
* Limited shadow-casting objects
* Stable React render behaviour
* Delta-time-based animation and movement
Do not sacrifice gameplay correctness for visual complexity.
## Required workflow
1. Inspect the workspace.
2. Create a concise internal implementation plan.
3. Implement the complete game.
4. Install required dependencies.
5. Run TypeScript checks and production build.
6. Start the game locally and inspect it in the browser if browser tools are available.
7. Test the main gameplay loop, controls, collisions, restart, pause, scoring, high-score persistence, responsiveness, and mobile input.
8. Fix all errors and obvious gameplay or visual problems you find.
9. Repeat validation until the production build succeeds and the game is genuinely playable.
10. Write a README containing setup instructions, controls, architecture, and implemented features.
## Acceptance criteria
Do not consider the task complete unless:
* The project installs and starts successfully
* The production build passes without TypeScript errors
* The player can switch between all three lanes
* Jumping and sliding work
* Running animation faces the correct direction
* Obstacles and collisions work
* Track recycling supports endless play
* Score, collectibles, multiplier, and high score work
* All three power-ups work
* Pause, game over, and restart work
* Keyboard and touch controls work
* No Blender or external 3D asset is required
* The result looks like an intentional small game rather than a basic Three.js demonstration
At completion, give me a short report containing:
* What you built
* How to run it
* Controls
* Main files and architecture
* Tests and validation performed
* Any minor limitations that remain
Begin now and take full ownership of the implementation.


