What this prompt does
This prompt makes the model a senior web designer for creative brands and asks it to specify a cinematic agency landing page tightly enough to build — naming sections, motion, and a responsive fallback for each effect. Agency pages live or die on feel, but cinematic effects wreck load time if planned carelessly, so the prompt decides motion and performance together. Three variables steer it: [stack] sets the implementation (Next.js with Framer Motion by default), [brand_mood] carries the palette and tone like "bold and editorial, black plus electric accent," and [goal] names the conversion target such as "book a discovery call."
The deliverables move section by section: a hero with bold type and an animated wordmark plus a reduced-motion fallback, a services grid without filler, a project reel with video-on-hover cards that lazy-load behind a poster image, a logo marquee with team grid and awards list, and a booking CTA that appears at the right scroll depth. Each effect is paired with its fallback, and a closing performance and accessibility section asks the model to defer heavy media, respect prefers-reduced-motion, and keep LCP fast. Because the prompt requires naming the motion and the responsive fallback for every effect in the same breath, performance and feel are decided together rather than traded off later, which is what stops a page that dazzles in a mockup from collapsing into a slow, janky experience on a real phone over a real network.
When to use it
- Planning a cinematic agency or studio landing page
- Deciding motion and performance together instead of retrofitting
- Specifying reduced-motion fallbacks for every animated effect
- Building a project reel with lazy-loaded video-on-hover cards
- Setting the brand tone through
[brand_mood] - Placing a
[goal]-driven booking CTA at the right scroll depth
Example output
You get a section-by-section spec with the motion treatment and responsive fallback for each effect: the animated wordmark hero with its reduced-motion alternative, the services grid, the lazy-loaded project reel with poster fallbacks, the logo marquee and team and awards sections, and the scroll-triggered booking CTA. It closes with performance and accessibility notes on deferring heavy media, respecting prefers-reduced-motion, and protecting LCP.
Pro tips
- Define the reduced-motion fallback in the hero up front; retrofitting it later is always painful.
- Put a real palette in
[brand_mood]so the motion and visual treatment match the brand instead of a generic dark theme. - Decide motion and performance together — cinematic effects that look great in a mockup ruin LCP if added carelessly.
- Set
[goal]clearly so the booking CTA's copy and placement serve a single conversion. - Ask for poster-image fallbacks on the video reel so the page stays usable before media loads.
- If
[stack]uses Framer Motion, request the prefers-reduced-motion handling as explicit code in a follow-up.
