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

Kaamos

Ambient-loop horizon wordmark hero

One full-screen hero, no scroll: an enveloping scene keeps moving in a slow, endless loop behind a tiny lone figure at the centre, while one giant, ultra-thin word is spread letter by letter across the full width of the screen right at the horizon. A quiet nav sits on top with a circular search button, and a short list of facts with a vertical label sits in the bottom-left corner.

  • Layout: one 100svh block, overflow hidden, user-select none. Full-bleed canvas frame sequence (cover fit, anchored on the subject). Nav: wordmark left (letter-spaced caps), 5 plain text links centred, a 40px outline circle search button right. One giant word, letters justified edge to edge (flex, space-between) at ~50% height, weight 200, ~9.4vw. Bottom-left: a vertical label (writing-mode, rotated, letter-spaced caps) beside 5 short mono-caps fact lines in muted colour.
  • The scene is the only thing that moves. A tiny figure stands dead centre on a reflective ground; around and above it the scene swirls slowly and constantly (in the example: an aurora corona rotating overhead, mirrored in black ice). The figure stays the same size and in the same place, so the eye rests on it while everything around it drifts.
  • Loop: the clip is played as frames, forward only at a slow constant rate (~20fps), so the scene drifts one way forever. The seam is hidden by a dissolve: the loop is N − B steps long (B ≈ 24 frames, ~1.2s) and during its first B steps the clip's last B frames fade out (smoothstep) over its first B frames, so frame L − 1 flows straight into the dissolve with no jump or brightness pop.
  • Wordmark over the scene: pure white with a faint coloured glow (text-shadow in the accent), sitting just above the horizon line so the letters cross the brightest part of the sky. It is real HTML text (aria-label on the h1, letters aria-hidden).
  • Interactive elements: nav links (an accent underline wipes in from the left on hover/focus, out to the right); the circle search button (fills solid on hover, presses to 0.94) toggles a pill search field that expands leftwards out of the circle (aria-expanded, focus moves into the field, Escape or a click outside closes it; on phones it spans the full nav width). Nothing is draggable and no custom cursor is used; dragging across the hero never selects text.
  • Intro: themed loader (three nested arcs drawing, brand name, 0–100% counter, 1px progress line). Frame 0 is drawn and the intro start state is set before the loader fades; as it lifts, the loop starts, the letters come in from blur and below with a stagger from the centre outward, then the nav drops in and the facts rise line by line. An inline head script adds .js-intro so none of these paint before their beat.
  • Readability: a top and bottom gradient scrim plus a soft vignette over the canvas, and a light grain overlay to hide upscaling softness.
  • Mobile: native 9:16 crop of the clip centred on the figure (its own frame set), nav links hidden (brand + search only), the word re-sized to ~13.4vw so it still spans the full width, fact lines wrap. Reduced motion: no intro, no loop, three key frames crossfading every 6s.
  • Palette (example): polar night #04080b, ice white #e9f3f0, aurora green #7cf2c4, violet #b9a2ff. Type (example): Jost 200/400/500 for the word, nav and brand; IBM Plex Mono for the facts and loader.
The full prompt unlocks when you copy it

Fill these in to make it yours