JSON Render Three.js
AI-generated 3D scenes using @json-render/react-three-fiber. Describe environments, meshes, and lighting to stream live Three.js renders you can orbit immediately.
View Full Pattern on Desktop
Problems Solved
- Turn natural language prompts into orbitable Three.js scenes
- Stream JSON specs into React Three Fiber without reloads
- Blend meshes, lights, cameras, and controls from curated catalogs
Use Cases
- 3D concept explorers
- Product hero stage builders
- Immersive storytelling demos
- Rapid prototyping for motion shoots
AI SDK APIs
Tags
Requirements
- Node.js
- 24+
- Memory
- 512MB
- Other
- Vercel AI Gateway or Anthropic API key
Environment Variables
AI_GATEWAY_API_KEYGet key →
External Services
Ready to use?
View the full interactive pattern with live preview and copy the source code.
Open Live PreviewView Pattern on DesktopRelated Patterns
JSON Render Shadcn
AI-generated UI using @json-render/shadcn. Describe a UI in natural language and watch it render with shadcn components.
JSON Render React
AI-generated UI from natural language using @json-render. Describe a UI and watch it stream in progressively with shadcn components.
JSON Render PDF
Generate PDF documents from natural language using @json-render/react-pdf. Describe a document or refine examples to create professional PDFs with streaming spec and live preview.
JSON Render Remotion
AI-generated video from natural language using @json-render/remotion. Describe a video and watch it stream in as a timeline spec, then render in a Remotion Player.