🎨 Websites & UIFREE · no sign-up

Cinematic Hero Section

A prompt for an eye-catching full-screen hero section with video or gradient background, animated headline and CTAs.

✨ Fill in the blanks

0/7 filled
Live preview — updates as you type
Create a fullscreen cinematic hero section for [BRAND NAME], a [TYPE OF BUSINESS].

Stack: React + TypeScript + Tailwind CSS + framer-motion.

Background: [CHOOSE: looping muted video / animated aurora gradient blobs / subtle WebGL-style noise] with a dark overlay so text stays readable.

Content (centred):
- A small pill badge above the headline: "[BADGE TEXT]"
- Headline: "[HEADLINE]" — very large, tight letter-spacing, with one word in an accent gradient
- Subheadline: one sentence, max 20 words
- Two buttons: a solid primary "[PRIMARY CTA]" and a glass secondary "[SECONDARY CTA]"

Animation: headline words fade and slide up one by one (stagger 0.08s), buttons appear after. Add a soft cursor-following glow on desktop only.

Must be fully responsive, respect prefers-reduced-motion and keep Lighthouse performance above 90.

More websites & ui prompts

See all →