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.

Landing PagePro

Dunefall

Scroll-scrubbed story landing page: one fixed full-bleed canvas plays a chained frame sequence while hero, statement, glass card stage, night chapter and a rounded footer panel scroll over it

A cinematic product landing page where the whole background is one long frame sequence scrubbed by scroll. The visitor rides through the product's story in five numbered chapters: a hero with a glass stat card that counts up, a quiet statement, four glass video cards that rise into a 2x2 around a centred title while the background blurs, a darker after-dark chapter, and finally a rounded panel with a signup form and footer that slides up over the footage and ends on a giant gradient wordmark.

  • Layout, top to bottom: fixed nav (logo glyph + bold wordmark left, 4 uppercase links centred, sign-in link right); 01 hero (100svh); 02 statement (~120svh); 03-04 sticky card stage (~260svh, pinned with position: sticky); 05 after-dark chapter (~190svh, sticky bottom copy); then a rounded panel (margin ~2vw, radius ~32px, deep ink) holding the CTA + email form and the full footer, ending with a giant wordmark in a top-to-bottom fading gradient.
  • Background: a fixed full-bleed <canvas> under everything draws ONE frame sequence made of two chained clips ({{CLIP_A_MOTION}}, then {{CLIP_B_MOTION}}) joined with a ~0.5s crossfade. Scroll position maps to the frame index piecewise per section: hero top -> ~12%, statement -> ~27%, card stage start -> ~40%, 62% through the card stage -> end of the crossfade (~53%), after-dark start -> ~62%, end of the after-dark chapter -> last frame. The frame lerps toward its target (0.22/frame) for a scrubbed feel; scrolling up plays it backwards.
  • Intro after the loader: the first ~12% of the sequence autoplays over ~1.9s (the shot is already moving when the page appears), nav items drop in, each headline line slides up out of its own mask (staggered 0.1s, expo out), body and buttons rise with a blur-to-sharp, the glass stat card rises, its bar fills and every number counts up from 0. Scroll then takes over from the exact frame the intro stopped on.
  • Hero: 3-line headline in a wide, heavy display face (~6.4vw, line-height .9) top-left; a short dimmed paragraph; two pill buttons (solid light 'primary', ghost with hairline border and a round play icon). Bottom-right: a frosted glass stat card (backdrop blur 18px, 1px light border, radius 28px) with a 2-line label, a huge light-weight percentage, an accent progress bar with glow, a small uppercase note, and a row of 3 stats split by a hairline. On scroll the copy lifts and blurs out; the card lifts faster (parallax).
  • Chapter index: 01-05 stacked on the right edge at mid-height, dim by default, the active chapter in the accent colour and nudged 4px left. It tracks scroll (03 = cards rising, 04 = title settled) and each number is a button that smooth-scrolls to its chapter. It fades out with the nav when the footer panel reaches the top.
  • Card stage (03-04): a sticky 100svh stage. Four frosted cards (~18vw, aspect 1.18, radius 26px) rise from below the fold with a slight counter-rotation, top pair first, settling into a loose 2x2: two on the left (outer one higher), two on the right, leaving the centre open. Each card shows a thumbnail cut from the story frames with a 2-line title top-left and a round glass play button. A centred title + one-line subtitle rises in with a blur-to-sharp under them. While they settle the background canvas blurs to ~9px and dims (this hides the crossfade between the two clips), then sharpens again for chapter 05.
  • Interactions: native cursor, no drag surfaces. Nav links brighten and grow an accent underline; primary pill lifts with a warm glow; ghost pill's border and play circle turn accent; buttons press to .97. Cards: hover (mouse) or tap/click (touch, keyboard) plays a short looping range of the story frames inside the card at 24fps and turns the play button accent (aria-pressed toggles); leaving or tapping again returns to the card's key frame. Cards are user-select: none. The secondary pill (with the play icon) auto-scrolls the whole story (~7s, eased). Email form validates inline and swaps its note for a success line; no network call.
  • After-dark chapter (05): copy pinned at the bottom of the viewport: a short accent rule that draws in, a 2-3 line heavy headline bottom-left, a dimmed paragraph bottom-right; both rise in on entry and scroll away as the panel arrives.
  • Footer panel: a small status chip with a glowing dot, a single-sentence CTA heading (several lines, one key number in the accent colour), a one-line sub; on the right an uppercase label, email input + accent button and a short reassurance note. Below: brand + one-line blurb, 3 link columns grouped by the brand's own topics, a slim base row (copyright + 2 legal links) and the giant gradient wordmark that rises in as it enters.
  • Palette (Dunefall example): ink #0b0d10, panel #12151b, input #191d24, text #f4efe6, dimmed text rgba(244,239,230,.66), signal cyan accent #5fe3d6 (index, bar, form button, underline), warm sand #f0b27a (italic emphasis, primary glow).
  • Type (Dunefall example): Archivo at width 125 and weight 800-900 for display, 300 for the big stat number; Hanken Grotesk 400-600 for body, labels and buttons.
  • Mobile (<=760px): native 9:16 frame crops whose crop window follows the subject (it slides between the two clips' subject positions during the crossfade) so the subject sits right of centre, clear of the copy; headline and paragraph stay top-left, the two pills drop to a bottom stack just above a compact full-width stat card; links hidden, cards 40vw in a staggered 2x2, shorter sections, the chapter index shrinks to the lower right, the footer stacks.
  • Reduced motion: no smooth scroll, no intro, no scrub; each chapter shows one key frame with a 0.4s crossfade, cards and titles sit in their final positions, the grain stops.
  • No flash of the settled state: an inline <head> script adds .js-intro before first paint; CSS hides nav, headline lines, body, buttons, stat card and index; the intro's start state is applied with gsap.set and frame 0 is drawn before the loader fades; the loader gets .is-done the moment it starts lifting, which also starts the intro.
  • sectionPrompts (both scenes in one shoot): 1) the hero image in the image prompt below; 2) the second scene: 'Cinematic low-angle side tracking shot at {{NIGHT_LIGHT}}, close to the ground: {{SUBJECT}} {{CLIP_B_ACTION}}, {{NIGHT_PALETTE}}, dark moody contrast, shallow depth of field, subject centred slightly right, empty dark space on the left. Photorealistic, 35mm film still, no text, no logos.' Card thumbnails reuse ranges of the story frames, so no extra stills are needed.
The full prompt unlocks when you copy it

Fill these in to make it yours