<aside> 🎬
The creative material to build cinematic websites with AI. 85+ ready-made prompts (site, image, copy) + the formula to create your own. Paste it into the tool and generate.
</aside>
Cinematic DNA (in every prompt): dark/near-black · dramatic light · depth and parallax · giant serif · film grain · Awwwards "Site of the Day" level.
Compatible with: v0 · Lovable · Bolt · Cursor · Claude Code · Base44
<aside> ✅
How to use: paste the prompt into the tool → generate 3–4 and pick the best → change the palette to match the brand → in code tools (Cursor/Claude Code) the stack is already included in the prompt.
</aside>
The site prompts are in English on purpose — AI tools (v0, Cursor, Claude Code…) perform better that way. Only change the
[BRACKETS]and the palette.
1.1 — "Site of the Day" hero — Best for: SaaS, app, tool.
Create a cinematic dark-mode SaaS hero, full viewport. Near-black background (#0a0a0b) with a slow-drifting gradient mesh (amber→magenta) behind everything. Oversized serif display headline (clamp 56–120px, tight leading) on the left, thin sans subheadline below, and a single glowing CTA. On the right, a glassmorphic floating product card with soft inner glow and subtle scroll parallax. Add fine film grain, edge vignette, and a slow staggered fade-in on load. Fonts: Inter + Instrument Serif. Framer Motion for entrance + parallax. Make it feel like an Awwwards Site of the Day.
💡 swap amber→magenta for blue→cyan for a "cold tech" vibe.
1.2 — Scroll-driven SaaS landing (full) — Best for: an entire SaaS page.
Build a full cinematic SaaS landing in Next.js + Tailwind + Framer Motion + Lenis smooth scroll. Dark, dramatic, Apple × Awwwards. Sections: (1) hero with looping muted background video + gradient scrim + staggered word-reveal headline; (2) scroll-pinned feature showcase with horizontal parallax cards; (3) bento grid of product shots with hover glow; (4) glassmorphic pricing; (5) cinematic footer with giant CTA + film grain. Reduced-motion fallback, fully responsive, semantic HTML, swappable placeholder assets.
💡 ask for "swappable placeholder assets" to change images without touching the code.
1.3 — SaaS with a 3D product — Best for: hardware, gadget, an app with an "object".
Cinematic SaaS hero with an interactive 3D product centerpiece (Spline or React-Three-Fiber). Black stage, single dramatic key light on the object, soft floor reflection. Thin uppercase headline with wide tracking orbiting the object. Cursor-reactive parallax on the 3D model, drifting particle dust, floating glass nav on top. Weightless, premium, cinematic.
💡 no 3D? swap it for a product PNG with a dramatic shadow + mouse tilt.
1.4 — Dashboard reveal (bento + motion) — Best for: data-driven SaaS, analytics, fintech.
Design a cinematic "dashboard reveal" section. The dashboard UI starts blurred and tilted in 3D perspective, then snaps sharp and upright on scroll-into-view. Surround it with floating bento cards (metrics, charts, avatars) animating in with staggered springs. Dark theme, neon data accents, glass surfaces, ambient glow under the dashboard. Framer Motion scroll-linked animation.