{ "schema_version": 1, "generated": "2026-10-20", "id": "blendi-remade-dioramas--build-cinematic-3d-landing-page", "repo": "blendi-remade/dioramas", "repo_url": "https://github.com/blendi-remade/dioramas", "repo_slug": "blendi-remade-dioramas", "title": "Build a cinematic 3D landing page from a brief", "page_title": "How to build a cinematic 3D landing page from a brief with Dioramas", "summary": "Turn a one-page brief into a scroll-driven 3D product site using the Dioramas engine.", "who": "A front-end developer or designer who needs a visually striking 3D landing page for a single product and has a short creative brief.", "problem": "Building a cinematic scroll-driven 3D page from scratch means wiring lighting, camera moves, post effects and scroll timing by hand.", "outcome": "A working local 3D landing page that follows the same structure as the 20 example sites, with one signature interaction.", "steps": [ "Run `git clone https://github.com/blendi-remade/dioramas && cd dioramas`", "Run `npm install`", "Run `npm run dev` and open http://127.0.0.1:5190 to browse the gallery and the example sites.", "Write a one-page brief for your product, following the examples in docs/briefs/.", "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/." ], "agent_prompt": "Work in the blendi-remade/dioramas repo. Read docs/ENGINE.md and the brief at , then build a new example site under examples/ for with one signature interaction. Expected output: an examples// folder with index.html, main.js and style.css that loads at /examples// on the dev server. Verify by running npm run dev and confirming the new page renders without console errors.", "agents": [ "any" ], "difficulty": "Intermediate", "time": "1 hour", "basis": "readme", "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.", "category": "Software and DevOps", "tags": [ "Software and DevOps" ], "lang": "javascript", "requirements": [ "Git and Node.js with npm, to clone the repo and run the dev server", "A desktop GPU, which the README recommends for 60 fps", "About 330 MB of disk space for the repo, since models ship in the clone (no LFS)", "A fal account and FAL_KEY, only if you want to generate new models or images" ], "risk": "none", "seen_in_the_wild": false, "mentioned_publicly": false, "risks": [], "best": true, "score": 1.0, "evidence": [], "url": "https://dedupedai.com/use-cases/blendi-remade-dioramas/build-cinematic-3d-landing-page/", "md": "https://dedupedai.com/use-cases/blendi-remade-dioramas/build-cinematic-3d-landing-page/index.md", "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.", "api": "https://dedupedai.com/api/v1/usecases/blendi-remade-dioramas--build-cinematic-3d-landing-page.json", "api_version": "v1" }