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

Velella

Arrival hero: a living subject flies or swims into frame and settles, then a giant wordmark rises behind it (subject matte over type)

A single-screen hero built around one living subject. After the loader, a frame sequence plays once: the subject enters from the right and settles in the middle of the screen, then keeps hovering on a ping-pong loop. While it settles, a serif headline rises out of line masks on the left and two folder-tab stat cards slide in from the right with a blur-to-sharp fade. Last, a huge wordmark fades up behind the subject: the subject is cut out of the type with a per-frame matte, so it always sits in front of the letters.

  • Scope: one 100svh hero block. No other sections, no page scroll, no footer.
  • Layout: top bar on a 3-column grid (logo mark + wordmark left, 4 uppercase tracked links centred, a text sign-in link and a solid pill CTA right). Copy column bottom-left (~30% of the width). Social proof row + two stat cards bottom-right. The subject owns the centre and upper half; a giant wordmark spans ~80% of the width at about 45% of the height, behind the subject.
  • Asset: a clip with a locked camera where {{SUBJECT}} enters from the right third and comes to a hover in the centre. Drawn as a frame sequence on a full-bleed canvas (cover fit, anchored a little above centre). The intro plays frames 0 to N once at 24fps; after that the last ~1.5s ping-pongs at 0.8x speed as an idle hover, so the subject never freezes and never jumps.
  • Wordmark behind the subject: the wordmark is drawn on an offscreen canvas (serif, vertical gradient from near-white at the top to transparent at the baseline), then a per-frame subject matte is drawn over it with destination-out and the result is composited on top of the video frame. The matte frames are small alpha-only WebPs (640px) built with ffmpeg: a colour key works when the subject is pale on a saturated background (e.g. 1.6R - 0.6B on blue water), otherwise run a segmentation model per frame. A translucent subject lets the letters show through softly.
  • Intro timeline (starts when the loader lifts, never before): nav drops in from -14px at 0.15s. At ~55% of the clip the eyebrow rises, each headline line slides up out of its own overflow mask with an 8px blur clearing (stagger 0.12s, expo out), body and CTAs follow 0.3s later. In parallel the proof row and the two cards slide in from +80px on x with a 10px blur clearing (stagger 0.12s). When the clip settles (~clip length - 0.5s) the wordmark fades up from +40px with an 18px blur and its letter spacing tightening, over 1.8s.
  • Cards: two light frosted cards with a folder tab on the top-left (tab label in bold small caps, a concave corner where the tab meets the body), an image crop of the subject with a 2-line caption on a dark gradient, a large light-weight stat ({{STAT_1}}, {{STAT_2}}) and 3 pagination dots. The second card uses a slightly deeper tint.
  • Interactive elements: no drag handles, no custom cursor, no pointer-driven video. (1) Nav links brighten and grow an accent underline from the left on hover/focus. (2) The primary CTA is a glowing pill that lifts 2px and widens its glow ring on hover, presses to 0.97. (3) The secondary link nudges its arrow up-right. (4) Cards lift 6px with a deeper shadow and their image crop zooms in slowly on hover. (5) The card dots are real buttons (aria-pressed): clicking one swaps the caption and stat with a short fade/slide, the active dot stretches into a pill. Touch targets grow on coarse pointers. All of it is reachable by keyboard with visible focus rings.
  • Load sequence: a guard class added by an inline head script hides nav, copy and cards before first paint; GSAP sets their start states, frame 0 is drawn under the loader, and only then the loader fades (#loader gets .is-done). The finished layout never flashes.
  • Palette ({{BRAND}} example): abyss #06121f, deep #0b2340, pearl #eef3f7 (text, nav pill), dim pearl rgba(238,243,247,.72), lilac #b8b2ff (primary CTA, italic accent), cyan #7fe3f0 (eyebrow, underline, focus), card tints rgba(214,226,247,.86) and rgba(176,190,238,.86).
  • Type ({{BRAND}} example): Instrument Serif for the headline (second line italic) and the giant wordmark; Manrope 400-700 for nav, body, buttons, cards.
  • Mobile (<=760px): links and sign-in collapse; the 16:9 frames fill the top ~54% of the screen centred on the settled subject and fade into the background colour below; the wordmark sits at ~26% of the height; cards sit in a row above the copy (captions hidden), copy at the bottom with the CTA row.
  • Reduced motion: no playback, no intro, no guard; three key frames crossfade slowly with the wordmark and all copy visible.
The full prompt unlocks when you copy it

Fill these in to make it yours