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

Cragling

2D cursor-follow mascot hero with a gaze-readout HUD

A single full-screen hero where a skeptical 3D mascot stands on stage and follows a custom object cursor with its head and eyes, turning left, right, up and down to keep it in sight. A glass HUD card reads the gaze live on a small radar (dot, trailing ghost, direction label, mood with signal bars), a card carousel auto-advances in the corner, and a marquee ticker runs along the bottom. Idle visitors get an automatic look-around; a button replays it on demand.

  • Scope: one 100svh hero, no other sections, no page scroll, no footer. Everything sits over a full-bleed canvas.
  • Layout: floating glass nav pill (logo, three links with an accent dot under the active one, accent CTA with an arrow) top centre; a thin left rail with a vertical label, a hairline and three small social squares; copy block on the left (pill badge with a pulsing dot, two-line headline mixing a heavy condensed sans and a big italic serif in the accent colour, a short paragraph, a primary button with a dark arrow tile and a text button with a replay icon); gaze HUD card top right; carousel card bottom right; accent marquee band across the bottom.
  • Mascot: a frame sequence drawn on a canvas, never a <video>. Four real head moves (left, right, up, down), each its own clip, all four starting on the identical front pose (no mirroring). Each move is cut where it peaks and resampled evenly by measured motion; the manifest stores the four index runs and the subject box. Changing axis eases the head back through the front frame, so no pose ever pops.
  • Gaze logic: the pointer's horizontal offset from the head (normalised by ~30% of width) sets a target from −1 to 1; the amount is lerped (~0.085/frame) and indexes the left or right run, with neighbouring frames cross-faded. Both runs share frame 0, so passing through the centre never pops. The layout keeps the mascot clear of the copy and the cards at every size.
  • Custom cursor: the visitor's pointer becomes a small illustrated object (the thing the mascot distrusts). It follows the pointer with a light lerp and tilts with horizontal velocity; it hides when the pointer leaves the window, and is hidden for reduced motion. The system cursor is hidden only on fine pointers.
  • Gaze HUD (top right): a live label and a camera tag in the header; a radar circle with UP/DN/L/R ticks, a dashed inner ring, an accent dot at the eased gaze direction, a hollow ghost ring that trails it, and a short fading trail; a 'Looking' readout in italic serif (Dead ahead, Left, Up right, Down left…, wrapping to two lines in its column); a 'Mood' readout that changes with how close the cursor is to the face (far = curious, mid = suspicious, close = on guard, idle = unimpressed) and 4 signal bars that light to match.
  • Carousel card (bottom right): thumbnail crop, small accent tag, two-line title, meta line; segmented progress dots where the active one fills over ~5s and past ones stay filled; prev/next square buttons; pauses on hover and resumes where it was; the text swaps with a short fade.
  • Auto look-around: after ~3s without input (and on touch screens until the first touch) the cursor object flies an eased loop of 8 waypoints around the head with a short hold at each, so the hero never idles. The text button toggles a single pass and shows a pressed state.
  • Touch & keyboard: on touch, pressing anywhere on the stage (not on links/buttons) places the object there and the mascot follows while you drag; pointerdown calls preventDefault and setPointerCapture, the stage has touch-action:none and user-select:none, so drags never select text or scroll. Arrow keys nudge the object around the head.
  • Load: themed loader (a little route of six holds lighting up, brand, percent counter, progress line) preloads every frame in chunks, frame 0 first. An inline <head> script adds .js-intro, CSS hides every intro element, gsap.set applies their start states before the guard is lifted, frame 0 is painted, then #loader gets .is-done and the intro timeline starts that same moment: canvas settles from 1.035 scale, nav drops, badge, masked headline lines rise, paragraph and buttons, HUD slides in from the right, carousel rises, rail fades, ticker slides up.
  • Reduced motion: no follow, no auto loop, no ticker motion; 3–4 key poses cross-fade slowly as stills.
  • Responsive: under 760px the nav links and rail hide, the copy stacks at the top, buttons pin above the ticker, the HUD shrinks to a compact radar + label above them and the carousel hides; the mascot uses a portrait crop, width-fitted and bottom-anchored, with the seamless backdrop extended above it.
  • Example asset runs (for reference): 97 frames — the shared front pose, 48 frames turning left and 48 turning right, each resampled evenly by motion from its clip.
The full prompt unlocks when you copy it

Fill these in to make it yours