Clovoso: cinematic website templates and the AI prompts behind them

Build a single-screen hero section for {{BRAND}}, {{NICHE}}.

Scroll-driven website templates, and the AI prompts that build them.

Browse the libraryHow it works

“Build a single-screen hero section for {{BRAND}}, {{NICHE}}.”

Cinematic websites,one prompt away.

See the prompt behind BrocadeBrowse the library

Pick a title.Watch it move.

Each preview is a real site built from a single prompt. Choose one to put it on the screen.

Nimbus Aero

Fly-in landing hero + subject-over-wordmark

Open the prompt

The library

Every preview comes with the prompt that made it. Open one, copy it, and paste it into Claude, Cursor or v0.

39 templates. Lifetime access unlocks every Pro prompt.

Copy. Paste.Launch.

  1. Step 1

    Pick a prompt

  2. Step 2

    Paste it into your AI

  3. Step 3

    Launch it

Website prompt, Nimbus Aero

Build ONLY a single-screen cinematic HERO SECTION for {{BRAND}} ({{NICHE}}) in the "fly-in landing + subject-over-wordmark" style — one 100svh block, no other sections, no page scroll. It must drop into an existing page as-is. Stack: plain HTML/CSS/JS (or React) + GSAP 3, Google Fonts. The centerpiece is my clip `asset.mp4` ({{DURATION}}, 16:9): {{SUBJECT}} travels in from far away, grows toward camera and lands/settles dead-center in the foreground, then holds still.…

yourbrand.com

Want one built for you?

Our studio takes on a few client sites each month. Those builds never go into the library.

Start a project

Every prompt.Pick your plan.

Join 6,100+ builders shipping cinematic sites with Clovoso.

  • Every template, component, shader, section and UI screen
  • New prompts every Friday, for as long as Clovoso runs
  • Use them for yourself and for client work

  • FREE

    $0

    3 copies a day

    Free templates only

  • MONTHLY

    —/mo

    Unlimited copies

    Every template

  • ANNUAL

    —/yr

    Unlimited copies

    Every template

  • LIFETIME

    $299

    Unlimited, forever

    Every template

One email a week. Unsubscribe any time.

Hero SectionPro

Gullmar Glass

Forming-object autoplay hero: one-shot pour-to-product clip, letter-by-letter headline, numbered index and corner product card

A single-screen product hero where the page opens on a full-bleed clip that plays once: raw material pours in and forms itself into the finished product, then holds. While it takes shape, the headline writes itself letter by letter, a CTA with colour swatches and a stat row settle in, a numbered index slides in on the right and a frosted product card rises out of the bottom-right corner. A replay pill rewinds the whole sequence.

  • Layout: one 100svh hero, no scroll, no other sections. Nav on a 3-column grid (small custom glyph drawn from the brand idea + spaced-caps brand, four centred links, sign-in + outlined caps pill). Copy column left (~32vw), numbered index on the right edge, product card flush in the bottom-right corner, replay pill bottom-left.
  • Stage: a 5-6s frame sequence on a full-bleed canvas that plays once from the moment the loader lifts and holds its last frame: the material pours in, gathers, rises into the product's shape and finishes (e.g. cools / hardens / changes colour). Product right of centre; left scrim, top/bottom vignette, faint grain.
  • Intro beats (t = loader lift): 0.15s nav drops in; ~38% of the clip the kicker rule draws in; ~40% the uppercase headline writes itself letter by letter (rise 0.32em + blur 8px to sharp, 45ms stagger) with two italic serif accent words in a gradient fill; then paragraph, CTA row and stats rise in; the index rows slide in from the right one by one; the card slides up from the corner. Everything is settled as the clip lands on its final frame.
  • Interactive inventory: (1) replay pill, bottom-left, visible from the first frame to the end, restarts clip + intro; (2) nav links with growing underline, outlined caps pill that warms on hover; (3) solid pill CTA with arrow, lifts on hover, presses on active; (4) three round colour swatches as a radio group with a double-outline active state and a caps label naming the selected finish, which also re-tints the card's close-up; (5) numbered index 01-04 on the right, one active row (italic serif number in the accent, larger), rows are buttons that switch the active step and crossfade the card's value; (6) product card, static once in, no hover motion. Native cursor, no drags, no pointer-follow.
  • No flash on load: .js-intro guard added in <head>, every intro element hidden by CSS and set to its start state with gsap.set before the guard lifts; frame 0 is drawn before the loader fades; clip and intro start in the loader's fade onStart.
  • Example palette (Gullmar Glass): ink #081016, frost #eef3f2, ember #f0a254, hot ember #ffcf8a, teal #6fc2c0, frosted card #e8f1f0. Type: Familjen Grotesk 400-600 (UI, uppercase headline), Instrument Serif italic (accent words, active index number, loader).
  • Mobile (<=760px): native 9:16 crop with the product in the upper half, vertical scrim, copy stacked at the bottom, compact index top-right, card hidden, replay bottom-left.
  • Reduced motion: final frame shown at once with everything visible, slow crossfades between key frames, no letter animation or grain.
The full prompt unlocks when you copy it

Fill these in to make it yours