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

Tallyhaus

Mascot walk-and-sit scroll hero + stacking sheet sections (word-reveal manifesto, pinned service accordion, draining-gauge process carousel, contact)

A full mascot-led landing page for a small service studio. The hero is a scroll-scrubbed canvas clip of a plush 3D mascot on a saturated colour backdrop: it walks across the set and flops into a seat while a giant edge-to-edge wordmark blurs away letter by letter, then a headline and three frosted-glass cards stack in from the left in a staircase. Every next section slides up as a rounded dark sheet with a little grab handle while the previous stage sinks back, blurs and dims. A manifesto sharpens word by word over a marquee; a pinned services accordion drives a sticky media card with a huge outlined number; a pinned process section drains a big counter on a vertical gauge while the background cools from hot to calm and three step cards slide past; a contact sheet with a glass form, a rotating circular badge and a giant footer word closes the page.

  • Fixed chrome on every screen: top-left a round light logo badge plus a 2-line tagline in small type; top-right 4 text links (hover: underline wipes in from the left) and an accent pill CTA (hover: lifts 2px, brightens; press: scales .97). No hamburger: on phones the links hide and the logo, tagline and pill stay.
  • Hero (~480vh desktop / 420vh phone, sticky 100svh stage). Canvas frame sequence, cover fit. Beats as fractions of the hero scroll that ends when the next sheet starts covering it: 0-0.04 the two small corner labels above the wordmark fade; 0.01-0.11 the wordmark letters blur (16px), rise slightly and fade one after another left to right; 0.03-0.58 the clip scrubs from the standing pose to the seated pose; 0.46-0.54 a small eyebrow + 2-line headline blur in from the left; 0.52-0.80 three frosted cards slide in from the left (xPercent -115 → 0, blur 10 → 0, stagger) and sit as a staircase (each next card indented ~6%). Scrolling up reverses everything.
  • Intro on load (after the themed loader lifts): header drops in, wordmark letters rise in from a 18px blur with a 60ms stagger, corner labels fade in. Everything the intro reveals is hidden by a .js-intro guard set from an inline <head> script, gsap.set applies the start state, then the guard lifts; frame 0 is drawn before the loader fades.
  • Stacking sheets: the manifesto and contact sections have margin-top:-100svh, z-index above the previous pinned stage, a 28px top radius, a 58x4px grab handle centred at the top, and a sticky 100svh inner. While a sheet rises, the stage under it scales to .92, blurs 6px and dims to 50% brightness (scrubbed).
  • Manifesto (~280vh, sticky): dark sheet, accent eyebrow with a glyph, a ~45-word paragraph (2.35vw display type) where 4-5 key phrases are bold and underlined in the accent colour; every word starts at 12% opacity + 6px blur and sharpens in reading order as you scroll. A moody still of the mascot fills the right ~60%, masked into the dark on its left edge, easing from scale 1.08 to 1. A full-width uppercase marquee of services runs along the bottom (32s loop, accent glyph between items, hairline on top).
  • Services 'desk' (~420vh, sticky): title + short lede on top; left a numbered list of 4 services, right a sticky portrait media card (accent 1.5px border, 26px radius). Scroll progress picks the active item (floor(p*4)); the active item becomes a filled accent card (dark text), expands (grid-template-rows 0fr→1fr) to show a sentence and 3 outline tag pills, and gets a dark round arrow button; inactive items are dim, hover brightens them, slides the name 6px and turns the arrow 45°. The media card crossfades to that service's image (scale 1.08→1), shows a huge outlined number (text-stroke, accent) top-right, a frosted caption bar (short line + uppercase tag in accent) and 4 progress segments that fill up to the active one. Clicking an item smooth-scrolls (Lenis) to that item's slice of the pin.
  • Process (~520vh, sticky, ends where the contact sheet starts covering it): left the title, bottom-left a vertical gauge (14px track, fill + glowing knob in the current colour, max/min labels) next to a giant number that drains from {{GAUGE_FROM}} to 0 (holds, drops to the mid value by ~0.48, reaches 0 by ~0.86) with a dot + state label ({{GAUGE_STATES}}). The gauge colour tweens hot → accent → calm and the stage background tweens from a dark hot tone to a dark calm tone. Particles on a canvas behind: fast, spinning paper scraps falling while hot, slow round motes drifting up when calm. Right: a horizontal track of 3 step cards (image with a chip of the current count and a caption, outlined step number, title, sentence); the active card is full opacity with a border in the current colour, the next one sits dimmed and scaled .9, passed ones fade out to the left. A '01 / 03' counter with a progress hairline at the bottom.
  • Contact + footer: a jade sheet rises over the process stage; a full-height still of the mascot waving fills the right ~70% (masked on its left edge); top-right a circular badge: a cream disc whose ring text rotates (18s, 5s on hover) around a round crop of the mascot's face. Left: eyebrow, a 2-line invitation, a frosted email input and textarea (focus: accent border + 4px accent glow; invalid email: red ring + note), an accent pill submit and a mailto link. A giant light footer word, fitted to the viewport width, rises in at the bottom, then a thin footer bar.
  • Interactive elements inventory: (1) header links: hover underline wipe, click = Lenis smooth scroll to the section; (2) CTA pill: hover lift, press scale, scrolls to contact; (3) 'scroll' hint label with a bobbing arrow, fades on first scroll; (4) service list items: hover dim→bright + name nudge + arrow turn; click jumps the pin to that item; active state expands; buttons with aria-expanded; (5) sticky media card follows the active item; (6) process gauge, counter and cards follow scroll only (no drag); (7) rotating badge speeds up on hover; (8) form: focus rings, inline validation, local success state ('Sent ✓' + note), no navigation; (9) marquee loops on its own. Nothing is draggable; clicks never select text.
  • Palette (example): backdrop jade #4f9571, dark ink #07140f, butter accent #f4c24a with ink #2a1d05, cream text #f6f1e4, hot #ef7a3c → calm #8fe0bd for the gauge, stage background #2a1109 → #062019. Type: one variable grotesk for display (light 300 wordmark, 400-600 headings) + one clean sans for body.
  • Reduced motion: no pins and no guard; the hero shows the last (seated) frame with the cards in place, manifesto words fully sharp, services switch on click, the process shows all 3 cards with the gauge at 0, the marquee and badge stop. Phones: native 9:16 frame set that pans with the subject, stacked services (list above the media card), process cards 74vw wide above the gauge, contact image behind the form.
The full prompt unlocks when you copy it

Fill these in to make it yours