Dioramas

Dioramas is a free, open-source framework for building cinematic, interactive 3D landing pages where the 3D scene itself is the page — a hyper-detailed object, real lighting, a choreographed camera, and one touchable interaction. It ships with 20 complete example sites built on top of it and requires no paid tier, account, or CLI install.

What is Dioramas?

Dioramas is a three.js-based web framework that turns AI-generated 3D models into scroll-driven landing pages. It takes a text prompt as input and produces an optimized GLB model plus a full interactive site; it runs in the browser on a desktop GPU tuned for 60 fps, and it is distributed on GitHub at blendi-remade/dioramas under an MIT code license, with generated assets under CC BY 4.0.

Key Features

• Asset pipeline — Nano Banana 2 on fal renders a clean product plate, Meshy 7.1 image-to-3D produces a 60k–250k-triangle PBR model at 4K geometry (optionally rigged and animated), and scripts/optimize.mjs welds, meshopt-compresses, and converts textures to WebP, cutting a 25 MB raw model to 3–8 MB.
• Engine (src/core/) — an HDR post stack with N8AO ambient occlusion, mip-chain bloom, AgX tone mapping, grain, and vignette, plus raymarched volumetric spotlights, planar reflections with roughness blur, GPU-baked procedural textures, Lenis and GSAP scroll choreography, a custom cursor, and a preloader.
• 20 complete example sites — from a lantern-lit museum (Reliquary) and an 11 km submersible dive (Abyssal) to a koi pond with real ripple simulation, 200k-particle flowers, and a watch-movement teardown.
• Review tooling — scripts/review.mjs runs a headless-GPU screenshot battery for iteration.
• Reproducible prompts — every prompt used for the 20 examples lives in assets/jobs/ and assets/manifest.json.
• Models in the repo — optimized GLBs ship in plain git (~330 MB, no LFS).

How does Dioramas work?

Generation is a repeatable four-step loop: write a one-page brief in docs/briefs/, run scripts/gen.mjs with a FAL_KEY to produce images and meshes (resumable), run scripts/optimize-all.mjs to output GLBs into public/models/, then hand the brief plus docs/ENGINE.md to an AI coding agent that builds the example against the engine and revises it using the screenshot battery until each scroll stop is a composed frame.

Who is it for?

• Creative developers building a portfolio or product launch page who want a 3D hero without modelling skills.
• AI coding agent users who want a documented engine spec (docs/ENGINE.md) plus briefs to generate new scenes.
• three.js engineers who need a prebuilt post-processing and scroll-choreography layer to re-theme.

Use cases

• Product launches: generate a hero object from a prompt and ship a scroll-choreographed landing page with one click interaction.
• Studios evaluating a style: run the gallery of 20 examples locally (npm run dev, port 5190) to gauge the look before committing.
• Learning 3D web technique: read the engine guide and reuse the N8AO, bloom, and volumetric spotlight setup.

Pros and cons

• Pro: entirely free with no account, paid tier, or CLI install.
• Pro: all 20 prompts and briefs are included, so results are reproducible.
• Con: a desktop GPU is recommended, and scenes are tuned for 60 fps on that hardware.
• Con: a textured model costs about $1.20, and the full 65-model, 111-image collection ran roughly $90.

Pricing

Free and open source. No paid tier and no account. Generation costs are paid to fal per asset — approximately $1.20 per textured model.

FAQ

Is Dioramas free?

Yes. The code is MIT-licensed, there is no paid tier or account, and everything runs locally after npm install. The only cost is fal API usage if you generate new assets — the models for the 20 examples already ship in the repo.

What software do I need to run it?

Node.js with npm to install and run npm run dev, which serves the gallery at http://127.0.0.1:5190 with each example under /examples/<name>/. A desktop GPU is recommended for the 60 fps target.

Do I need a fal API key?

Only to generate new assets. Copy .env.example to .env and add FAL_KEY, then run scripts/gen.mjs. Browsing and re-theming the 20 included examples requires no key.

What formats does the asset pipeline output?

Optimized GLB models with meshopt-compressed geometry and WebP textures, written to public/models/<example>/ at an effective 3–8 MB per model after optimization.