Skip to content
VibeFather
Join
↗

2 cases built from this template

Same prompt, different [VARIABLES]. Click one to preview it above.

About this template

A dark, single-page landing site for an AI agent startup that shows how the product works instead of describing it. The hero pairs a short pitch with a live node graph: six agent nodes joined by curved, glowing paths, and small task cards that travel between them, stop at a node, change status and move on in an endless loop. Further down, a pinned Plan, Act, Review section holds the screen while the same graph rearranges itself for each step, with a progress rail and crossfading step copy. Then come the standard sections: usage metrics that count up with sparklines, a six-card feature grid, an integrations wall of invented tools with a diagonal glow sweep, three pricing tiers with a monthly and annual toggle that animates prices and shows the saving, an accordion FAQ, a closing call to action and a compact footer.

It suits founders and small teams launching an agent, automation or workflow product who want a page that explains multi-step work at a glance. The look is near-black with a faint dot grid, one cyan accent for active paths, violet for finished tasks, thin borders, glassy cards and monospace labels for agent and task names. The graph is plain inline SVG driven by requestAnimationFrame, GSAP handles the pinned section and counters, and Lenis smooths the scroll. Motion stays on transform and opacity, the graph pauses off screen, and reduced-motion visitors get a static graph and no pinning.

To adapt it, change the brand, the one-line product, the audience and the list of agent roles. Node labels, task cards, metrics, pricing copy and FAQ follow, and all copy lives in one content file, so a support crew can become a finance-close crew, or a research pipeline without touching the layout.

The template prompt

The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# AI Agent Startup Landing Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A dark, motion-led single-page landing site for [BRAND], [PRODUCT]. A live SVG node graph in the hero shows task cards traveling between six agent nodes; a scroll-pinned Plan, Act, Review section rearranges the same graph for each step; then usage metrics, a feature grid, an integrations wall, pricing with a monthly/annual toggle, FAQ, a closing CTA and a footer.

- Audience: Visitors are [AUDIENCE] evaluating whether to hand repetitive multi-step work to AI agents. They are technical enough to want to see how the agents coordinate and where humans stay in control, and they compare plans before starting a trial.
- Goal: Make the agent workflow understandable in ten seconds without a video, build trust through visible human checkpoints and an audit trail, and drive visitors to start a 14-day free trial (primary CTA 'Start free') or compare plans in the pricing section.
- Tone: Calm, precise and technical. Short declarative sentences, concrete numbers and task names, no hype words, no exclamation marks. The interface feels like a well-instrumented control room: near-black, thin lines, mono labels, one glowing accent.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), gsap 3 (with ScrollTrigger plugin) (GSAP Standard License (free, including commercial use)), lenis (MIT), lucide-react (ISC), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource-variable/space-grotesk (OFL-1.1), @fontsource-variable/inter (OFL-1.1), @fontsource-variable/jetbrains-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. One page: index.html at the project root with entry src/main.tsx.
  - vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0 }. Do not copy src/ into dist/.
  - Tailwind 3.4 through PostCSS (tailwindcss + postcss + autoprefixer), content ['./index.html', './src/**/*.{ts,tsx}']. In tailwind.config.ts add every color under Design to theme.extend.colors with kebab-case keys (void, panel, raised, line, line-strong, text, muted, faint, signal, signal-deep, done, done-deep, amber) and fontFamily display ['Space Grotesk Variable', 'system-ui', 'sans-serif'], sans ['Inter Variable', 'system-ui', 'sans-serif'], mono ['JetBrains Mono Variable', 'ui-monospace', 'monospace']. Add maxWidth { container: '1200px' } and borderRadius { card: '14px', btn: '10px' }.
  - src/fonts.ts imports '@fontsource-variable/space-grotesk', '@fontsource-variable/inter' and '@fontsource-variable/jetbrains-mono'; src/main.tsx imports src/fonts.ts and src/index.css. index.css holds the Tailwind layers, the dot-grid background, the .glass recipe, the 'sweep' and 'pulse' keyframes and a @media (prefers-reduced-motion: reduce) block that disables CSS animations.
  - File layout: src/content.ts (all copy and data, typed), src/lib/brand.ts (brandSlug, taskPrefix, emailDomain), src/lib/useReducedMotion.ts (matchMedia hook), src/lib/motion.ts (registers ScrollTrigger once, creates Lenis unless reduced motion, wires lenis.on('scroll', ScrollTrigger.update), gsap.ticker.add(t => lenis.raf(t * 1000)), gsap.ticker.lagSmoothing(0), exports scrollToId and the shared fadeUp helper), src/graph/geometry.ts (node and edge definitions, edgePath, the hero layout and the three step layouts), src/graph/Graph.tsx (SVG defs with the glow filter, edges, nodes; accepts positions, litEdges and highlighted props), src/graph/TaskCards.tsx and src/graph/useTaskLoop.ts (hero loop), src/components/ (Header.tsx, MobileMenu.tsx, Hero.tsx, HowItWorks.tsx, Metrics.tsx, Sparkline.tsx, Features.tsx, Integrations.tsx, Pricing.tsx, BillingToggle.tsx, Faq.tsx, FinalCta.tsx, Footer.tsx, SectionHeader.tsx, Button.tsx), src/App.tsx composing them in page order.
  - All GSAP and ScrollTrigger instances are created inside useLayoutEffect with gsap.context() and reverted on unmount; call ScrollTrigger.refresh() after fonts load (document.fonts.ready). Use gsap.matchMedia() so the pin only exists at (min-width: 768px) and (prefers-reduced-motion: no-preference).
  - index.html: lang en, <meta name='theme-color' content='#07090D'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>, <title>[BRAND] — Agent crews for [AUDIENCE]</title>. public/favicon.svg is the logo mark on a #07090D rounded square.
  - Write ASSETS.md at the project root as described under Assets.
  - dist/ holds index.html, hashed JS/CSS, the woff2 files and favicon.svg; it should stay under 2 MB.

## Variables
- [BRAND] — Brand name (default: "Orbitask"). Invented product name. Used in the wordmark, title, hero subhead, FAQ, footer, task id prefix (first two letters) and the email domain. Never a real AI company or agent platform.
- [PRODUCT] — What the product is (default: "a multi-agent workspace that turns support and ops tickets into finished work"). One lowercase phrase that completes '[BRAND] is ...'. Drives the hero, the step descriptions, task card titles, features, plan descriptions and FAQ answers.
- [AUDIENCE] — Who it is for (default: "support and operations teams at SaaS companies"). Plural noun phrase. Used in the page title, the footer line and the plan descriptions; the brief's tone adapts to it.
- [AGENT_ROLES] — Six agent roles (default: "Triage, Planner, Researcher, Builder, Reviewer, Dispatcher"). Exactly six comma-separated single-word roles in workflow order: intake first, the fifth reviews, the sixth delivers. They label nodes N1 to N6 in every graph; pick a matching Lucide icon for each.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/ai-agent-startup-landing-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.

Join Pro early access →

DESIGN.md

The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.

---
name: "AI Agent Startup Landing Page"
colors:
  void: "#07090D"
  panel: "#0D1218"
  raised: "#121922"
  line: "#1E2833"
  line_strong: "#2B3846"
  text: "#E8EEF5"
  muted: "#8A97A8"
  faint: "#566375"
  signal: "#2EE6D6"
  signal_deep: "#14A99C"
  done: "#8B7CFF"
  done_deep: "#5B4BDB"
  amber: "#F5B84B"
typography:
  display_h1_h2_step_titles_tier_names_card_titles_the_wordmark: { family: "Space Grotesk", weights: [500, 600] }
  text_body_leads_nav_buttons_faq_form_fields: { family: "Inter", weights: [400, 500, 600] }
  mono_eyebrows_node_labels_task_ids_and_chips_metric_values_prices_billing_lines_footnotes: { family: "JetBrains Mono", weights: [400, 500, 600] }
spacing: "8px base grid. Container max-width 1200px with 20px (mobile) / 32px (>=640px) side padding. Section padding 128px top and bottom on desktop, 88px below 768px. Card padding 28-32px, grid gaps 12-20px, header 64px tall."
radius: "Cards and panels 14px, CTA panel 20px, buttons and inputs 10px, integration tiles 12px, monograms and icon tiles 10px, task cards 10px, chips, pills and the billing toggle 999px."
---

# AI Agent Startup Landing Page — Design System

Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.

## Colors
- **Void** `#07090D` — Page background, input background, text on Signal buttons.
- **Panel** `#0D1218` — Node cores, card base (as rgba(13,18,24,0.72) in the glass recipe), toggle track.
- **Raised** `#121922` — Icon tiles, monograms, toggle thumb, eyebrow pill fill, hover fills.
- **Line** `#1E2833` — 1px borders, dividers, base edge strokes, rail track.
- **Line Strong** `#2B3846` — Node strokes, button outlines, input borders, logo connector lines.
- **Text** `#E8EEF5` — Headlines, body emphasis, metric values, prices.
- **Muted** `#8A97A8` — Body copy, leads, nav links, node labels, queued chips.
- **Faint** `#566375` — Mono meta text, task ids, footnotes, column titles.
- **Signal** `#2EE6D6` — The one electric accent: active paths and their glow, running chips, primary buttons, eyebrows, checks, rail fill, highlighted nodes, sparklines, focus rings.
- **Signal Deep** `#14A99C` — Primary button hover and pressed state; end stop of the edge glow gradient.
- **Done** `#8B7CFF` — Second hue for completed work: done chips, finished-task dots, Reviewer badge, 'Save 20%' badge, end of the headline gradient.
- **Done Deep** `#5B4BDB` — Secondary glow behind the hero graph (as rgba(139,124,255,0.11)) and pressed state of violet elements.
- **Amber** `#F5B84B` — Only for the 'review' task status and form validation messages.

## Typography
- **Display: H1, H2, step titles, tier names, card titles, the wordmark** — Space Grotesk (OFL), weights 500/600. Self-host the font files.
- **Text: body, leads, nav, buttons, FAQ, form fields** — Inter (OFL), weights 400/500/600. Self-host the font files.
- **Mono: eyebrows, node labels, task ids and chips, metric values, prices, billing lines, footnotes** — JetBrains Mono (OFL), weights 400/500/600. Self-host the font files.

## Spacing & shape
- Spacing: 8px base grid. Container max-width 1200px with 20px (mobile) / 32px (>=640px) side padding. Section padding 128px top and bottom on desktop, 88px below 768px. Card padding 28-32px, grid gaps 12-20px, header 64px tall.
- Radius: Cards and panels 14px, CTA panel 20px, buttons and inputs 10px, integration tiles 12px, monograms and icon tiles 10px, task cards 10px, chips, pills and the billing toggle 999px.

## Motion
- Performance rule: animate only transform and opacity on HTML (plus SVG stroke-opacity, transform and path d inside the graph); target 60fps; never animate layout properties or box-shadow directly (use pseudo-element opacity).
- Lenis smooth scroll (duration 1.1, default easing) synced to ScrollTrigger through the GSAP ticker; not created under reduced motion.
- Hero graph loop on requestAnimationFrame with getPointAtLength, paused off screen and in hidden tabs.
- Pinned Plan/Act/Review section: ScrollTrigger pin, scrub 0.6, snap to step labels; node positions tweened and edge paths recomputed every frame.
- Entrance: fade up 24px, 0.7s power3.out, stagger 0.08s, once per element.
- Counters and sparkline draw on enter; pricing numbers tween on toggle; CSS keyframe glow sweep across the integrations wall every 6s.
- prefers-reduced-motion: no Lenis, no pin (stacked steps with static graphs), static hero graph with parked cards, no loops or pulses, values shown at final state.

## Imagery
No photographs or bitmaps. Everything visual is drawn in code: the node graphs, glow filters, dot grid, radial glows, sparklines, decorative CTA graph, logo mark and favicon, with Lucide icons for agent roles, features and UI glyphs. Integration tiles use two-letter monograms of invented tool names, never real logos.

## Tone
Calm, precise and technical. Short declarative sentences, concrete numbers and task names, no hype words, no exclamation marks. The interface feels like a well-instrumented control room: near-black, thin lines, mono labels, one glowing accent.

---
— Prompt by VibeFather · https://vibefather.ai/t/ai-agent-startup-landing-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown