The AI Company

The page, section by section

1. 01

   Hero backdrop

   Silk Field

   One slow, low-contrast field behind the headline gives the brand a mood without a stock render; it renders a still frame under reduced motion and pauses offscreen.

2. 02

   The product, working

   Agent Run

   The hero's promise proven immediately: an agent plans, searches, edits and runs tests on screen, with a summary at the end.

3. 03

   Pointer, in the demo only

   Glow Pointer

   A soft glow scoped to the product demo makes that section feel live; the rest of the site keeps the system cursor.

4. 04

   What it does

   Feature Trio

   Three capabilities, each shown with a miniature working interface instead of an icon.

5. 05

   Proof in numbers

   Metric Morph

   Live, unit-labelled metrics (latency, uptime, tasks run) that update calmly, the credibility layer for technical buyers.

6. 06

   Pricing

   Usage Ruler

   One instrument instead of three cards: drag to your usage and the plan follows, so the price is never a mystery.

7. 07

   Questions

   Focus FAQ

   Security, data retention and model questions answered plainly, one at a time.

8. 08

   The ask

   Focus Pull

   A closing headline with one primary and one secondary action; focus racks to whichever you're about to choose.

9. 09

   Footer

   Index Footer

   An index of docs, changelog, security and status: the pages a careful buyer looks for.

Paste it into Claude, Cursor or ChatGPT with the component files, and ask for your own version: your name, your work, your product. It names each component and where to copy it from.

# Build brief: The AI Company

A company website for an AI product: a calm hero, the product working on screen, proof, a clear price and one confident ask.
For: AI labs, AI product companies and developer-tool startups that need to look credible to engineers and buyers at the same time.

## Direction
- Restrained colour: a near-black ground (#08070a), warm off-white text (#efe8dc) and one cool accent (#b9cce4). Colour comes from the product and one background, not from decoration.
- Strong type, generous space: a serif for headlines (Instrument Serif), a plain sans for reading (Geist), mono only for small technical labels. Big headings, short lines, long pauses between sections.
- Show, don't claim: the product is shown doing a real task (an agent run, a cited answer, a diff) before any adjective about it.
- Technical credibility: real numbers with units and timeframes, real model and API names, a changelog-dated tone. Never 'revolutionary' or 'AI-powered' as a headline.
- Calm rhythm: one moving surface at a time. Motion explains (a step completes, a number updates), it never decorates.


## Choose by product and audience
- Developer tool or API: lead with agent-run, inline-diff or a terminal-like demo; mono labels and real code; pricing by usage (usage-ruler).
- Assistant or chat product: lead with cited-answer, thinking-trace or prompt-composer; a paper palette reads warmer than black.
- Research lab or model company: a typographic hero (letterform-hero or a quiet background) and long-form writing; numbers and charts (pulse-line-chart, percentile-curve-stats) over feature grids.
- Enterprise buyers: put security, data handling and SSO in the FAQ and footer, and keep pricing honest (subtractive-pricing shows exactly what each plan leaves out).

## Curation: one of each, on purpose
- One hero treatment: a background or a typographic hero, never both competing.
- One navigation system for the whole site, and one primary button style repeated everywhere.
- One AI interaction component on the home page; others belong on product pages.
- Cursors: at most one or two styles (for example glow-pointer in the demo, highlight-sweep for a single headline), scoped to the sections that benefit; never site-wide.
- If two components are both 'the impressive one', cut one. Restraint is what makes the remaining one feel expensive.

## Backgrounds: where they help and where they hurt
- Ambient backgrounds belong behind the hero or the final call to action: moments with little text and one message.
- Never put moving backgrounds behind paragraphs, pricing, forms or tables. Reading and motion compete, and contrast becomes unpredictable.
- Check contrast at the background's brightest frame. If body text drops below 4.5:1, add a scrim or reduce the background's intensity; don't lighten the text.
- Motion supports hierarchy: the slowest, largest motion sits furthest back, and only the product demo moves in the foreground.
- Avoid fatigue: one ambient surface per page, slow (cycles of 10s or more), low contrast. Every Vitrine background pauses offscreen and in hidden tabs.
- Reduced motion: every Vitrine background renders a designed still frame; check that it still looks intentional.
- Performance: WebGL and canvas backgrounds cost GPU time and battery. Load one per page, below the LCP element's text, and confirm with /performance-pass on a throttled phone.

## Page map
1. Hero backdrop: Silk Field. One slow, low-contrast field behind the headline gives the brand a mood without a stock render; it renders a still frame under reduced motion and pauses offscreen.
2. The product, working: Agent Run. The hero's promise proven immediately: an agent plans, searches, edits and runs tests on screen, with a summary at the end.
3. Pointer, in the demo only: Glow Pointer. A soft glow scoped to the product demo makes that section feel live; the rest of the site keeps the system cursor.
4. What it does: Feature Trio. Three capabilities, each shown with a miniature working interface instead of an icon.
5. Proof in numbers: Metric Morph. Live, unit-labelled metrics (latency, uptime, tasks run) that update calmly, the credibility layer for technical buyers.
6. Pricing: Usage Ruler. One instrument instead of three cards: drag to your usage and the plan follows, so the price is never a mystery.
7. Questions: Focus FAQ. Security, data retention and model questions answered plainly, one at a time.
8. The ask: Focus Pull. A closing headline with one primary and one secondary action; focus racks to whichever you're about to choose.
9. Footer: Index Footer. An index of docs, changelog, security and status: the pages a careful buyer looks for.

## Components
Copy each component's files from its page (Code tab) into your project before you start, and use them as given: change props and content, not internals.
- Silk Field: https://tryvitrine.dev/components/silk-field (Domain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.)
- Agent Run: https://tryvitrine.dev/components/agent-run (A coding agent's work as a checklist that fills in while it happens — search, read, edit with a diff stat, run tests — where any finished step opens to show its output.)
- Glow Pointer: https://tryvitrine.dev/components/glow-pointer (A crisp arrow with softly rounded corners and a slight glow around it — light, not a shape.)
- Feature Trio: https://tryvitrine.dev/components/feature-trio (Three cards that explain a product by doing it: each card holds a tiny working piece of the UI — a build log, a live latency line, a firewall counter — that wakes up when you point at it.)
- Metric Morph: https://tryvitrine.dev/components/metric-morph (A live metric where only the place values that changed move.)
- Usage Ruler: https://tryvitrine.dev/components/usage-ruler (Pricing as an instrument: drag a marker along a ruler of seats, the tiers shade in beneath it, the price rolls, and the plan name changes the moment you cross a boundary.)
- Focus FAQ: https://tryvitrine.dev/components/focus-faq (An FAQ where choosing a question promotes it: it travels up and grows into the heading, its answer unfolds beneath, and every other question steps back into a compact list below.)
- Focus Pull: https://tryvitrine.dev/components/focus-pull-cta (A closing call to action with a camera's depth of field: whichever action you move toward racks into focus, hunting slightly before it locks, while the rest of the block falls soft.)
- Index Footer: https://tryvitrine.dev/components/index-footer (A footer set like the index at the back of a book: entries with dotted leaders running to their numbers, and pointing at one lets the rest of the page fall quiet.)

## Build
- Next.js (App Router), TypeScript, Tailwind CSS. No extra UI libraries.
- Write real content for this site: real names, dates, numbers and sentences. No lorem ipsum, no "Feature one".
- Compose the sections in the order of the page map. Keep each component's own spacing; add page rhythm with consistent section padding.
- Mobile first: every section must work at 375px wide without horizontal scrolling.
- Respect prefers-reduced-motion everywhere; every Vitrine component already does.

## Before you ship
- Run `/template-tells` (https://tryvitrine.dev/workshop/skills/template-tells) on everything you wrote yourself: copy, sections, styles.
- Run `/responsive-audit` (https://tryvitrine.dev/workshop/skills/responsive-audit) at 375, 768 and 1280.
- Run `/accessibility-pass` (https://tryvitrine.dev/workshop/skills/accessibility-pass).
- Run `/performance-pass` (https://tryvitrine.dev/workshop/skills/performance-pass) on a production build.
- Run `/technical-seo-audit` (https://tryvitrine.dev/workshop/skills/technical-seo-audit) and `/seo-auditor` (https://tryvitrine.dev/workshop/skills/seo-auditor) before launch.

Direction

• Restrained colour: a near-black ground (#08070a), warm off-white text (#efe8dc) and one cool accent (#b9cce4). Colour comes from the product and one background, not from decoration.
• Strong type, generous space: a serif for headlines (Instrument Serif), a plain sans for reading (Geist), mono only for small technical labels. Big headings, short lines, long pauses between sections.
• Show, don't claim: the product is shown doing a real task (an agent run, a cited answer, a diff) before any adjective about it.
• Technical credibility: real numbers with units and timeframes, real model and API names, a changelog-dated tone. Never 'revolutionary' or 'AI-powered' as a headline.
• Calm rhythm: one moving surface at a time. Motion explains (a step completes, a number updates), it never decorates.

Choose by product and audience

• Developer tool or API: lead with agent-run, inline-diff or a terminal-like demo; mono labels and real code; pricing by usage (usage-ruler).
• Assistant or chat product: lead with cited-answer, thinking-trace or prompt-composer; a paper palette reads warmer than black.
• Research lab or model company: a typographic hero (letterform-hero or a quiet background) and long-form writing; numbers and charts (pulse-line-chart, percentile-curve-stats) over feature grids.
• Enterprise buyers: put security, data handling and SSO in the FAQ and footer, and keep pricing honest (subtractive-pricing shows exactly what each plan leaves out).

Curation: one of each, on purpose

• One hero treatment: a background or a typographic hero, never both competing.
• One navigation system for the whole site, and one primary button style repeated everywhere.
• One AI interaction component on the home page; others belong on product pages.
• Cursors: at most one or two styles (for example glow-pointer in the demo, highlight-sweep for a single headline), scoped to the sections that benefit; never site-wide.
• If two components are both 'the impressive one', cut one. Restraint is what makes the remaining one feel expensive.

Backgrounds: where they help and where they hurt

• Ambient backgrounds belong behind the hero or the final call to action: moments with little text and one message.
• Never put moving backgrounds behind paragraphs, pricing, forms or tables. Reading and motion compete, and contrast becomes unpredictable.
• Check contrast at the background's brightest frame. If body text drops below 4.5:1, add a scrim or reduce the background's intensity; don't lighten the text.
• Motion supports hierarchy: the slowest, largest motion sits furthest back, and only the product demo moves in the foreground.
• Avoid fatigue: one ambient surface per page, slow (cycles of 10s or more), low contrast. Every Vitrine background pauses offscreen and in hidden tabs.
• Reduced motion: every Vitrine background renders a designed still frame; check that it still looks intentional.
• Performance: WebGL and canvas backgrounds cost GPU time and battery. Load one per page, below the LCP element's text, and confirm with /performance-pass on a throttled phone.