blendi-remade/dioramas

What it solves

Building a high-end 3D landing page typically requires a 3D artist, a web developer, and a lot of time. Dioramas makes this accessible by providing a complete framework that generates the 3D hero object from a textual description, optimizes it for the web, and provides a cinematic experience out of the box. It solves the problem of making 3D websites affordable and quick to build, without compromising on visual quality.

How it works

Dioramas has three layers:

1. Asset pipeline: It uses AI to generate a 3D model from a prompt. First, a text-to-image model renders a clean product image, then an image-to-3D model converts that into a textured 3D mesh. A script optimizes the mesh and textures for web use, reducing file size significantly. The README includes example commands to generate and optimize assets.

2. Engine: A small three.js layer that adds visual polish: post-processing effects like ambient occlusion, bloom, tone mapping, grain, and vignette. It also includes volumetric spotlights, planar reflections, procedural textures, and scroll-driven animations, plus a custom cursor and preloader.

3. Method: Each example site starts from a one-page brief, and an AI coding agent builds it against the engine. A review system with headless-GPU screenshots ensures every scroll position looks good.

The README includes 20 complete example sites that showcase a variety of interactive experiences, such as exploring a museum with a lantern, diving 11 km, or steering a submersible.

Who it’s for

This is for web developers and designers who want to create immersive, cinematic 3D landing pages without being 3D artists. It’s also useful for agencies or creators who want to produce high-quality 3D web experiences quickly. Since it’s free and open-source, anyone can use it, but a desktop GPU is recommended for smooth performance.

Highlights

• 20 complete example sites demonstrating different interactions and styles.
• AI-generated 3D models from text prompts, costing about $1.20 per textured model.
• Optimized assets: 25 MB raw models become 3–8 MB for fast loading.
• A small but powerful three.js engine with cinematic post-processing effects.
• Scripts for asset generation, optimization, and automated visual review.
• MIT code license, CC BY 4.0 for generated assets.