Field noteOct 27, 20266 min read1 source

GitHub - blendi-remade/dioramas: A free, open-source framework for cinematic, interactive 3D websites with AI-generated assets (Nano Banana 2 + Meshy 7.1 on fal). 20 example sites.

In one minute

Dioramas is a free, open-source framework for building cinematic interactive 3D websites around AI-generated hero assets. It matters because it packages generation, optimization, visual rendering, and review into a reproducible workflow rather than treating a generated 3D object as a one-off design artifact.

What changed: The Dioramas project listing adds Nano Banana 2 and Meshy 7.1 on fal and notes 20 example sites.

What happened

The public Dioramas repository presents a framework for cinematic, interactive 3D landing pages. Its stated premise is that the 3D scene is the page: a detailed object, realistic lighting, a choreographed camera, and a single interaction for the visitor. The project includes 20 complete example sites, ranging from a lantern-led museum exploration and an underwater descent to a scroll-driven astronaut walk and an explorable watch movement. The repository is public, has no paid tier, requires no account, and does not require a dedicated command-line installation.

The framework has three layers. First is an asset pipeline that moves from prompt to image to 3D model. Nano Banana 2 on fal generates a clean product image on white, then Meshy 7.1 image-to-3D on fal converts that image into a 4K-geometry PBR model with roughly 60,000 to 250,000 triangles; rigging and animation are optional. The supplied optimization script welds and compresses the model with meshopt and converts textures to WebP. The project says this can reduce a 25 MB raw model to 3-8 MB. Its documented commands use a FAL_KEY to generate images and meshes from job files, then optimize all output. Every prompt used for the examples is included in the asset job files and manifest.

Second is a small Three.js engine in src/core. It provides an HDR post-processing stack, including ambient occlusion, bloom, AgX tone mapping, grain, and vignette; it also includes volumetric spotlights, planar reflections with roughness blur, GPU-baked procedural textures, Lenis and GSAP scroll choreography, a custom cursor, a preloader, and cross-site navigation. The repository points readers to docs/ENGINE.md for the engine and organizes the gallery separately from the individual examples. Each example has its own HTML, JavaScript, and CSS, while the shared core and asset scripts sit elsewhere in the repository.

Third is a working method: a one-page brief, implementation by an AI coding agent against the engine, a headless-GPU screenshot battery, and art-direction review. The repository explicitly suggests giving an agent a brief and the engine documentation, or re-theming an existing example. This makes the examples more than visual demos: the source includes the prompts and job definitions used to make assets, plus scripts for generation, optimization, screenshots, review, and thumbnails. The described workflow still places a human art-direction pass after automated screenshot review.

The economics are disclosed at project scale. A textured model is estimated at about $1.20. The complete collection of 65 models and 111 images reportedly cost about $90. Models are included directly in the roughly 330 MB repository rather than through Git LFS. A desktop GPU is recommended, and the examples are tuned for 60 frames per second. The code is MIT-licensed; generated models and images are CC BY 4.0, while third-party libraries retain their own licences.

What the archive adds

We have not covered this before; it opens a new thread.

Trend signal

This supports Generative media becomes application infrastructure. Dioramas treats generated imagery and 3D meshes as inputs to a controlled web-production pipeline: prompt files, conversion scripts, asset optimization, a rendering layer, and review steps are all part of the package. That is closer to composable application infrastructure than a standalone image-generation session.

Why it matters

For AI product and web teams, the useful contribution is not the claim that a model can make a visually impressive object. It is the exposed chain around that claim. Teams can inspect the prompts, generation jobs, model optimization, engine effects, and review method, then decide which pieces fit their own workflow. The cost figures also turn an otherwise vague creative experiment into a budgetable prototype path.

The release also exposes a division of labor that is often hidden in generated-media demonstrations. Image and mesh generation supply the raw hero asset, but compression, texture conversion, rendering effects, interaction design, screenshot checks, and human review determine whether that asset can participate in a web experience. Teams already using coding agents can evaluate the repository as a concrete reference for specifying and reviewing that surrounding system.

The trade-off is clear. A high-fidelity 3D scene imposes performance, browser, and device constraints that ordinary landing pages do not. Builders should treat Dioramas as a starting architecture for selected experiences where motion and interaction carry product meaning, not as a default interface layer for every marketing or application surface.

Limits and uncertainty

The repository describes the framework and its reported generation costs, but it does not establish conversion performance, accessibility outcomes, mobile behavior, or operating costs at sustained production volume. The stated 60 fps tuning and desktop-GPU recommendation are not independent performance measurements across devices. The $1.20 per textured model and roughly $90 collection total are project-reported figures and may vary with prompts, retries, provider pricing, and desired quality. The source also does not show how reliably an AI coding agent can reproduce the examples from a brief without human art direction.

The included assets and examples demonstrate one authored collection, not a comparison against conventional modelling, photography, or other image-to-3D pipelines. The repository does not establish that its stack is suitable for lower-end devices, production accessibility requirements, or every category of product site. Its licensing statement also distinguishes project code from generated assets and third-party libraries, so adopters still need to examine the applicable files for their intended use.

Skill to build now

Choose one product object and run a bounded prototype: write a one-page visual brief, generate one clean asset, convert and optimize it, then define one visitor interaction that communicates a product property. Capture repeatable screenshots at planned scroll positions before reviewing the result. This turns subjective visual iteration into an inspectable loop, and it lets a team measure asset size, loading behavior, and review time before committing to a full 3D site.

Reader takeaway

Dioramas makes a cinematic AI-generated 3D website reproducible enough to study: it ships prompts, generation and optimization scripts, an engine, examples, costs, and licences. Its lesson is that polished generative media on the web depends on the surrounding production system as much as on the model that creates the initial asset.

Evidence / sources

  1. 1github.com/blendi-remade/dioramas
All Field Notes

Next reads

Read next

Open the graph
  1. 01topicGithubExplore the github topic hub.
  2. 02topicGenerative MediaExplore the generative-media topic hub.
  3. 03archiveField NotesOpen the latest editorial analysis.
  4. 04source ledgerSource LedgerInspect the public source evidence graph.
Who read this page?Machine requests, hidden until opened

Loading the privacy-safe route aggregate...

Open the JSON contract