# AI use cases for Dioramas (blendi-remade/dioramas)

Repo: [blendi-remade/dioramas](https://github.com/blendi-remade/dioramas) | Use cases: 3 | Page: https://dedupedai.com/use-cases/blendi-remade-dioramas/

Dioramas is a free, open-source three.js framework and set of 20 example sites for building cinematic, interactive 3D landing pages with AI-generated hero models.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Build a cinematic 3D landing page from a brief: https://dedupedai.com/use-cases/blendi-remade-dioramas/build-cinematic-3d-landing-page/
- Generate hero 3D models from text prompts: https://dedupedai.com/use-cases/blendi-remade-dioramas/generate-hero-3d-models-from-prompts/
- Study 20 interactive 3D site patterns for a design brief: https://dedupedai.com/use-cases/blendi-remade-dioramas/study-interactive-3d-site-patterns/

## How to build a cinematic 3D landing page from a brief with Dioramas

Repo: [blendi-remade/dioramas](https://github.com/blendi-remade/dioramas) | Difficulty: Intermediate | Time: 1 hour | Basis: From the README

Turn a one-page brief into a scroll-driven 3D product site using the Dioramas engine.

**Who it is for:** A front-end developer or designer who needs a visually striking 3D landing page for a single product and has a short creative brief.

**The problem:** Building a cinematic scroll-driven 3D page from scratch means wiring lighting, camera moves, post effects and scroll timing by hand.

**The outcome:** A working local 3D landing page that follows the same structure as the 20 example sites, with one signature interaction.

### Steps

1. Run `git clone https://github.com/blendi-remade/dioramas && cd dioramas`
2. Run `npm install`
3. Run `npm run dev` and open http://127.0.0.1:5190 to browse the gallery and the example sites.
4. Write a one-page brief for your product, following the examples in docs/briefs/.
5. Give the brief and docs/ENGINE.md to your coding agent and ask it to build the page in examples/ using the engine in src/core/.

### Prompt to paste into your agent

```text
Work in the blendi-remade/dioramas repo. Read docs/ENGINE.md and the brief at <path-to-brief>, then build a new example site under examples/ for <product name> with one signature interaction. Expected output: an examples/<slug>/ folder with index.html, main.js and style.css that loads at /examples/<slug>/ on the dev server. Verify by running npm run dev and confirming the new page renders without console errors.
```

### Caveat

The README says the examples were built by an AI coding agent against the engine, but it does not name a specific agent, and the models ship in the repo, so you still need to check the result on a desktop GPU.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/blendi-remade-dioramas/build-cinematic-3d-landing-page/

## How to generate hero 3D models from text prompts with Dioramas

Repo: [blendi-remade/dioramas](https://github.com/blendi-remade/dioramas) | Difficulty: Advanced | Time: 1 hour | Basis: From the README

Create product plates and optimized GLB models with Nano Banana 2 and Meshy 7.1 on fal.

**Who it is for:** A designer or developer who needs a custom 3D hero object for a page and does not have a 3D modelling workflow.

**The problem:** Modelling a detailed product object by hand is slow, and the raw AI output is too heavy for a web page.

**The outcome:** A set of generated images and an optimized GLB file in public/models/, ready for a Dioramas page.

### Steps

1. Run `cp .env.example .env` and add your key as FAL_KEY in the .env file.
2. Add your object prompts as JSON job files in assets/jobs/, following the examples there.
3. Run `node scripts/gen.mjs all assets/jobs/ .json` to generate images and meshes. The README says this step is resumable.
4. Run `node scripts/optimize-all.mjs` to weld, compress and convert the models into public/models/.
5. Point your example's main.js at the new GLB in public/models/ and check it with `npm run dev`.

### Prompt to paste into your agent

```text
In the blendi-remade/dioramas repo, add a job for <object description> to assets/jobs/ following the existing job files, then run the generation and optimize scripts from the README. Expected output: a new optimized GLB in public/models/ and the generated image in the job output. Verify by confirming the GLB file size is in the 3 to 8 MB range the README gives for optimized models.
```

### Caveat

The README gives an approximate cost of about $1.20 per textured model and says the whole collection cost roughly $90, so check your fal usage before running a full batch.

Risk, credentials: The generation step needs your fal FAL_KEY in a local .env file, so keep that file out of version control and do not paste the key into an agent prompt.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/blendi-remade-dioramas/generate-hero-3d-models-from-prompts/

## How to study 20 interactive 3D site patterns for a design brief with Dioramas

Repo: [blendi-remade/dioramas](https://github.com/blendi-remade/dioramas) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Run the gallery locally and review how each example handles scroll and interaction.

**Who it is for:** A product designer or creative lead who wants proven interaction ideas for a 3D web concept before committing to a build.

**The problem:** Interaction ideas for 3D web pages are hard to judge from screenshots alone, and the mechanics are rarely written down.

**The outcome:** A short list of reusable interaction patterns, each tied to a working example and its brief in docs/briefs/.

### Steps

1. Run `git clone https://github.com/blendi-remade/dioramas && cd dioramas`
2. Run `npm install`
3. Run `npm run dev` and open http://127.0.0.1:5190 to view the gallery.
4. Open the examples whose signature interactions fit your concept, such as the scroll-driven or press-and-hold ones in the table.
5. Read the matching brief in docs/briefs/ to see how each example was specified.

### Prompt to paste into your agent

```text
In the blendi-remade/dioramas repo, read the 20 example rows in README.md and the briefs in docs/briefs/, then list the five interaction patterns most relevant to <product or concept>. Expected output: a table with columns for example name, interaction, and the brief file that describes it. Verify that each example name in the table matches a folder under examples/.
```

### Caveat

The examples are tuned for 60 fps on a desktop GPU, so performance on a laptop or phone may differ from what the gallery shows.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/blendi-remade-dioramas/study-interactive-3d-site-patterns/