Hero
Hero — Vesper.ai Operational AI Landing

Full single-viewport build spec for a black, liquid-glass SaaS hero: exact tokens, fonts, entrance-animation keyframes and every responsive breakpoint included — paste straight into Claude, ChatGPT, v0, or Cursor.
Hero — Vesper.ai Operational AI Landing is a copy-ready build prompt for hero pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
If something here is out of date, the source link below is always the canonical reference.
Use case	Hero
Works with	ChatGPT, Claude, v0, Cursor
Source	motionsites.ai (community-submitted)
Recreate this exact single-viewport landing page for **Vesper.ai**. Document title: `Vesper.ai — Operational AI Infrastructure`. `lang="en"`. One HTML file with inline CSS and a small IIFE for the menu + animation fallback. Pure black `#000000`. No extra sections, cards, forms, pricing tables, or footer beyond the three stats. Do **not** add a video, WebGL, Three.js, or Lottie. Do **not** invent a CloudFront URL.

Force black immediately so the page can never flash white:

- First CSS rule: `html, body { background: #000000 !important; color: #ffffff; }`
- Body attribute: `style="background:#000;color:#fff"`
- Then again: `html, body { background: #000000; background: var(--bg, #000000); color: #ffffff; color: var(--text, #ffffff); }`

### Fonts (exact)

Self-hosted WOFF2s sitting next to `index.html`:

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("instrument-serif-italic.woff2") format("woff2");
}

Stacks:
- UI / logo / nav / buttons / badge / lede / stats: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
- Only the H1 words "AI agents": "Instrument Serif", "Times New Roman", Times, serif

If those files are missing, load this exact Google Fonts CSS (Inter variable roman + Instrument Serif italic only):
https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900&family=Instrument+Serif:ital@1&display=swap

Body: -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative. html { scroll-behavior: smooth }. Universal reset: box-sizing: border-box; margin: 0; padding: 0. Links color: inherit; text-decoration: none. Buttons font-family: inherit.

### Tokens (default / ~1440px)

--bg: #000000
--text: #ffffff
--muted: #9a9a9a
--stat: #d8d8d8
--border: rgba(255, 255, 255, 0.16)
--border-soft: rgba(255, 255, 255, 0.12)
--logo: 15.5px
--logo-mark: 22px
--nav: 14px
--nav-h: 40px
--btn: 13.5px
--btn-h: 40px
--hero-btn-h: 42px
--h1: 48px
--lede: 15.5px
--badge: 12.5px
--stat-size: 13.5px
--header-y: 22px
--header-x: 40px
--stats-x: 72px
--stats-y: 36px
--hero-gap: 85px
--copy-max: 860px
--lede-max: 470px

### Layer stack (back to front)

1. html/body black
2. .hero-photo + ::after scrim
3. .page — position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh / 100dvh
4. .grain at z-index: 100

Markup order inside body:
.grain
.hero-photo
.page
  .menu-backdrop
  header.header
  main.hero#top
  footer.stats
script

### Header — 3-column grid

display: grid; grid-template-columns: 1fr auto 1fr; align-items: center. Padding: var(--header-y) var(--header-x) 10px. z-index: 50; position: relative.

Left — logo a.logo.appear.appear--scale to #top, aria-label="Vesper.ai". display: inline-flex; align-items: center; gap: 9px; justify-self: start; font-size: var(--logo); font-weight: 600; letter-spacing: -0.03em; color: #fff.

Mark SVG 22x22, viewBox="0 0 24 24", fill="currentColor", group transform="rotate(-30 12 12)":
- circle cx="7.3" cy="3.2" r="1.45"
- rect x="5.5" y="4.7" width="3.6" height="14.6" rx="1.8"
- rect x="14.9" y="4.7" width="3.6" height="14.6" rx="1.8"
- circle cx="16.7" cy="20.8" r="1.45"

Wordmark: Vesper + <span class="logo-suffix">.ai</span> at font-weight: 400.

Center — nav #site-nav, aria-label="Primary", display: flex; align-items: center; gap: 8px; justify-self: center.

Label | href | appear class
Benefits | #benefits | appear--scale
How It Works | #how-it-works | appear--soft
FAQs | #faqs | appear--scale
Pricing | #pricing | appear--soft

Each link is a liquid-metal pill: height: var(--nav-h); padding: 0 18px; border-radius: 7px; overflow: hidden; position: relative;
border: 1px solid rgba(198,198,198,0.55)
background: linear-gradient(105deg, #050505 0%, #2a2a2a 48%, #4a4a4a 100%)
color #f3f3f3, font-size: var(--nav), weight 400, letter-spacing: -0.01em, white-space: nowrap.
Transition: background / border-color / box-shadow 0.35s ease.

Shine ::before: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%), idle translateX(-120%), hover translateX(120%) over 0.6s ease.

Hover: border rgba(235,235,235,0.9), gradient #111 -> #3a3a3a 45% -> #6a6a6a, glow 0 0 18px rgba(200,210,230,0.18).

Right — header CTA: a.btn.btn-solid.header-cta.appear.appear--scale "Start for Free" to #start.

Burger (hidden >=901px, display: none -> display: grid on phone): 42x42, border-radius: 6px, border: 1px solid var(--border), background: rgba(8,8,8,0.55), z-index: 60, aria-controls="site-nav", aria-expanded="false", label "Open menu". Three white bars 16x1.5px, gap 5px, border-radius: 1px. Hover: border rgba(255,255,255,0.32), bg rgba(255,255,255,0.05). Open (body.menu-open): bar 1 translateY(6.5px) rotate(45deg), bar 2 opacity: 0, bar 3 translateY(-6.5px) rotate(-45deg), 0.25s / 0.2s.

### Buttons (shared liquid-glass language)

.btn: position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 16px; border-radius: 6px; font-size: var(--btn); font-weight: 500; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; cursor: pointer. Transitions 0.35s on background, border, shadow, color, filter.

Shine ::after: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.45) 48%, transparent 76%), idle translateX(-130%), hover translateX(130%) in 0.65s ease.

Solid:
background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 48%, #cfcfcf 100%)
color: #111; border: 1px solid #fff
box-shadow: inset 0 1px 0 rgba(255,255,255,0.95)
Hover: #fff -> #f3f6ff 42% -> #d5def2, border #f2f6ff, inset 0 1px 0 #fff, 0 0 22px rgba(186,208,255,0.35), 0 8px 18px rgba(255,255,255,0.12)

Hero solid hover glow is slightly stronger: 0 0 26px rgba(186,208,255,0.4), 0 8px 18px rgba(255,255,255,0.14).

Ghost (header-level):
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.45) 50%, rgba(160,175,200,0.08))
color: #fff; border: 1px solid rgba(198,198,198,0.45)
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12)
Hover: rgba(210,225,255,0.18) -> rgba(0,0,0,0.35) 48% -> rgba(180,195,220,0.16), border rgba(220,230,255,0.75), inset 0 1px 0 rgba(255,255,255,0.22), 0 0 20px rgba(170,200,255,0.22)

Hero ghost (stronger frost):
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.5) 46%, rgba(150,170,200,0.1))
border: 1px solid rgba(198,198,198,0.55)
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px)
Hover glow 0 0 24px rgba(170,200,255,0.28), border rgba(220,230,255,0.8).

Hero action buttons: height var(--hero-btn-h), padding 0 18px.

### Hero (bottom-centered, NOT vertically centered)

.hero: display: flex; align-items: flex-end; justify-content: center; padding: 8px 24px var(--hero-gap); min-height: 0.
.hero-copy: position: relative; z-index: 1; flex-direction: column; align-items: center; text-align: center; max-width: var(--copy-max); width: 100%.

Badge .badge.appear.appear--pop — text "Operational AI Infrastructure"
inline-flex; gap: 8px; margin-bottom: 22px; padding: 9px 15px; border: 0; border-radius: 5px
background: linear-gradient(90deg, #7d7d7d 0%, #2a2a2a 52%, #0a0a0a 100%)
color #f2f2f2, font-size: var(--badge), weight 400, letter-spacing: -0.01em.

Sparkle SVG 18x20, white, filter: drop-shadow(0 0 3px rgba(255,255,255,0.45)), path:
M12 2.6C12.55 2.6 12.88 3.15 13.08 4.7c.62 4.7 1.52 5.6 6.22 6.22 1.55.2 2.1.53 2.1 1.08s-.55.88-2.1 1.08c-4.7.62-5.6 1.52-6.22 6.22-.2 1.55-.53 2.1-1.08 2.1s-.88-.55-1.08-2.1c-.62-4.7-1.52-5.6-6.22-6.22C3.15 12.88 2.6 12.55 2.6 12s.55-.88 2.1-1.08c4.7-.62 5.6-1.52 6.22-6.22C11.12 3.15 11.45 2.6 12 2.6Z

H1 two masked lines, Inter 500, letter-spacing: -0.045em, line-height: 1.12, #fff, column, centered:
Line 1: Train <em>AI agents</em> on your
Line 2: workflows in minutes.

.headline-line: display: block; overflow: hidden; padding: 0.06em 0.15em 0.14em.
em: Instrument Serif italic 400, font-size: 1.08em, letter-spacing: -0.03em, color #9a9a9a (not white).

Lede .lede.appear.appear--soft, max-width: var(--lede-max), margin-top: 18px, color #9a9a9a, 15.5px, weight 400, line-height: 1.55, letter-spacing: -0.015em:
"Deploy adaptive AI agents that learn, execute, and scale operational tasks across your business."

Actions .hero-actions: flex, wrap, center, gap 10px, margin-top: 26px.
1. Solid .appear.appear--btn: "Start for Free" to #start
2. Ghost .appear.appear--side: "See it in action" to #demo

### Stats footer

.stats: flex, align-items: center; justify-content: space-between; gap: 24px; padding 0 var(--stats-x) var(--stats-y) and padding-bottom: max(var(--stats-y), env(safe-area-inset-bottom)), color #d8d8d8.

Each .stat.appear.appear--stat: inline-flex; align-items: center; gap: 14px; font-size: var(--stat-size); letter-spacing: -0.015em; white-space: nowrap. Icon 20x20 (#e8e8e8). Wide avatar icon 38x21.

1. Dual-pill / workflow icon (viewBox="0 0 24 24"): left rect x=3.4 y=2.6 w=7.2 h=18.8 rx=3.6 fill linear #ffffff@0.38 -> #3a3a3a@0.62 (x1=3 y1=2 x2=14 y2=22). Right rect x=13.4 y=2.6 same size, inverted #3a3a3a@0.38 -> #ffffff@0.62. Connector x=9.2 y=10.9 w=5.6 h=2.2 rx=1.1 fill #4a4a4a. Label: "4.2M+ workflows automated"

2. Download tile: white rounded square x=2.4 y=2.4 w=19.2 h=19.2 rx=6.2 fill #ffffff. Arrow #111 stroke-width 1.85 round: vertical M12 7.1v7.4, chevron M8.15 12.35L12 16.2l3.85-3.85. Label: "92% reduction in manual operations"

3. Three avatars (viewBox="0 0 40 22", class stat-icon-wide): dark circle cx=10.2 cy=11 r=9.2 #2b2b2b + pale ellipse face cx=10.2 cy=12.1 rx=4.15 ry=3.7 #f4f4f4 + two ear triangles + eyes r=0.7 #1a1a1a. White circle cx=20.2 #ffffff + black eyes r=1.7 + nose ellipse + smile path stroke #111 width 1.2. Orange circle cx=30.2 #f26b1d + white Inter 700 "e" at x=30.2 y=15.1 font-size=12.5 text-anchor=middle. Label: "180+ operational teams onboarded"

### Entrance motion (exact)

.appear resting opacity is 1 (so the page is never blank if animations fail). animation-duration: 1.05s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-delay: var(--d, 0.08s). "both" applies the 0% keyframe during the delay, so they still hide then fade in when animations run.

On each element's own animationend, add .is-in (animation: none; opacity: 1; transform: none; clip-path: none; filter: none). Same for .hero-photo.is-in.

JS fallback: after two requestAnimationFrames, if el.getAnimations() has nothing running or finished, add .is-in to every .appear and .hero-photo.

Element | Modifier | --d
Logo | appear--scale | 0.08s
Nav 1 Benefits | appear--scale | 0.16s
Nav 2 How It Works | appear--soft | 0.28s
Nav 3 FAQs | appear--scale | 0.40s
Nav 4 Pricing | appear--soft | 0.52s
Header CTA + burger | appear--scale | 0.34s
Badge | appear--pop | 0.22s
H1 line 1 | appear--mask | 0.42s
H1 line 2 | appear--mask | 0.62s
Lede | appear--soft | 0.82s, duration 1.25s
Solid CTA | appear--btn | 0.96s
Ghost CTA | appear--side | 1.10s
Stat 1 | appear--stat | 1.12s
Stat 2 | appear--stat | 1.28s
Stat 3 | appear--stat | 1.44s

Keyframes (all end at opacity 1 / identity transform):
- in-scale: opacity 0, scale(0.84) -> 1
- in-soft: opacity 0, translateY(14px) -> 0
- in-mask: opacity 0, translateY(40%) -> 0 (clipped by .headline-line overflow)
- in-pop: 0 scale(0.9) -> 70% scale(1.03) -> 100% scale(1)
- in-btn: translateY(18px) scale(0.94) -> rest
- in-side: translateX(22px) -> 0
- in-stat: translateY(20px) -> 0
- in-star on .badge-star, 0.9s, delay 0.28s, both: scale(0.2) rotate(-50deg) -> 65% scale(1.2) rotate(8deg) -> rest
- in-em on h1 em, 1.2s, delay 0.72s, both: opacity 0.35; filter: blur(4px) -> sharp

prefers-reduced-motion: reduce: transition: none !important; animation: none !important on *, *::before, *::after. Force .appear, .hero-photo, .hero h1 em, .badge-star to opacity: 1; transform: none; clip-path: none; filter: none.

### Responsive (copy these breakpoints)

>=1600: logo 17 / mark 24 / nav 15 / nav-h 44 / btn 15 / btn-h 44 / hero-btn 48 / h1 64 / lede 18 / badge 13.5 / stat 15 / header 28x64 / stats 96x44 / copy 980 / lede-max 540. Nav pad 0 20px. Badge mb 26, lede mt 22, actions mt 30 gap 12. Icons 22, wide 45x24.

>=1920: logo 18 / mark 26 / nav 16 / nav-h 48 / btn 16 / btn-h 48 / hero-btn 52 / h1 76 / lede 20 / badge 14.5 / stat 16 / header 32x80 / stats 120x52 / copy 1120 / lede-max 620. Nav gap 10, pad 0 22px. Buttons pad 0 22px. Badge pad 10px 15px. Wide icon 48x26.

>=2560: h1 88, lede 22, header-x 120, stats-x 160, copy 1280, lede-max 680.

1280-1599: h1 54, lede 16, header-x 48, stats-x 80, copy 900.

901-1279: logo 15, nav 13, nav-h 36, btn 13, btn-h 38, hero-btn 40, h1 42, lede 15, badge 12, stat 12.5, header 16x28, stats 36x28, hero-gap 64, copy 760, lede-max 440. Nav pad 0 14px. Badge mb 16, lede mt 14, actions mt 20.

>=901 and max-height 850: header-y 14, stats-y 24, hero-gap 48, h1 40; badge mb 12, lede mt 12, actions mt 16.

>=901 and max-height 720: h1 34, lede 14, hero-gap 32, stats-y 18, nav-h 30, btn-h 34, hero-btn 36, badge mb 8.

>=901 desktop lock: html, body { height: 100%; overflow: hidden }. .page { height: 100vh / 100dvh; overflow: hidden }. One frame, no scroll.

<=900 phone: no 100vh lock; html/body height: auto; overflow-y: auto. Header grid-template-columns: 1fr auto auto, gap 8, safe-area padding. Logo / CTA / burger z-index: 80. Burger shown.

Full-screen menu: .menu-backdrop display: block; position: fixed; inset: 0; z-index: 40; background: rgba(8,8,8,0.42), idle opacity: 0; visibility: hidden. Open: opacity 1 + backdrop-filter: blur(24px), 0.28s. Nav becomes full-viewport column, z-index: 45, transparent, centered, gap 12, padding 96px 22px 32px with padding-top: max(96px, calc(env(safe-area-inset-top) + 88px)). Links full-width, height 56, font-size: 19px, border-radius: 10px. Escape / nav click / resize >=901 closes. Toggle aria-expanded and label Open/Close menu. body.menu-open { overflow: hidden }.

Hero pad 20px 20px 64px, still align-items: flex-end. Stats column, centered, gap 16, white-space: normal. Copy/lede max-width 100%. Tokens: logo 16, btn 15 / 46, hero-btn 48, h1 36, lede 16.5, badge 13.5, stat 15, header 16x18, stats 20x28, hero-gap 36.

<=560: h1 34, lede 16, header-x 16. Hero actions column, buttons width: 100%.

### JS (only this)

1. Each .appear -> own animationend -> add is-in (once: true).
2. If animations are not running after two rAFs, force .is-in on all .appear and .hero-photo.
3. Burger toggles body.menu-open.
4. Nav links and Escape close the menu.
5. Resize to (min-width: 901px) closes the menu.
How to use it

Copy the full prompt with the button above.
Paste it into your model and add your brand, copy and colours.
Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources.
← Back to Website Prompts
Hero — Vesper.ai Operational AI Landing

How to use it

Related in Hero
