Bulkhead: Motion-led AI incident response landing page template for Next.js.

A complete, motion-first launch page for an infrastructure or AI operations product. Bulkhead contains incidents the way a ship's bulkheads contain a breach, and the whole page is drawn that way: construction lines, a fixed rail, cut-corner sheets and drawings that explain the product.

• Exploded hero stack of four product screens with drafting callouts
• Incident playback: a cutaway whose doors drop shut, stage by stage, with a rolling incident clock
• A runbook that runs and waits at an approval gate the visitor can approve
• Rail index with reading progress, rolling prices, morphing labels and full reduced-motion support

• sheet#eceeea#eceeea
• board#141517#141517
• signal#ffd02e#ffd02e
• board-muted#9a9fa3#9a9fa3
• board-subtle#686d71#686d71

• AaArchivoIncluded with the template

  The quick brown fox jumps over the lazy dog

  0123456789

• AaMartian MonoIncluded with the template

  The quick brown fox jumps over the lazy dog

  0123456789

Archivo throughout, set a little wide like lettering on a drawing, with Martian Mono for labels and readouts. A graphite board, cool drafting-film sheets with two corners cut and one signal yellow. Dimension-line headings, crop marks around figures, registration crosses where the guide lines meet, and hairlines instead of shadows.

1. 01

   Hero

   The headline and calls to action beside an exploded stack of the four product screens, called out like a drawing. The plates separate as the page loads and one lifts and lights up at a time; pointing at a callout picks it.

2. 02

   Rail and navigation

   A fixed rail that lists the services during the incident, becomes a section index that fills as you read, then hands over to the seals and a way back up. A phone menu that grows out of the bar.

3. 03

   Customers

   A ruled strip of customer marks.

4. 04

   Incident playback

   An oblique cutaway of four compartments: alerts gather into an incident, every door drops shut, responders rise and the postmortem lands, while a callout glides along with a rolling incident clock. Stage tabs sit under their compartments; phones glide along the hull.

5. 05

   Halftone band

   A photograph printed as a dot screen that develops as it arrives, with a loupe that shows the real photo under the pointer.

6. 06

   Overview

   A two-tone statement whose lit phrases are numbered callouts linked to a runbook that runs in place and stops at an approval gate.

7. 07

   Platform

   A legend of the four stages beside a large product screen that swaps in behind a scan line; phone screens on phones.

8. 08

   Numbers

   A ruled grid of six figures: a countdown with a dimensioned saving, an alert funnel, a strip chart cut off at a containment line, squares that thin out, a split bar and ninety days of uptime.

9. 09

   Systems

   Three cards with line drawings that plot themselves in and move when pointed at.

10. 10

    Integrations

    Categories that play one after another and a grid of integrations that swaps tile by tile.

11. 11

    Pricing

    Three plans over a comparison table with a monthly/yearly switch and rolling prices; phones pick a plan and read its column.

12. 12

    Customers' words

    One quote at a time with results, a portrait that swaps behind a scan line and a rolling counter.

13. 13

    Field notes and FAQ

    Three posts with small drawings, then an accordion beside the heading and a way to reach a person.

14. 14

    Closing and footer

    A deck plan whose doors swing shut, then a signal-yellow plate with a live counter and the name rising into four compartments.

• Can I use it for client work?

  Yes, for any number of client projects.

  Do I need an API key?

  No. It runs as it is.
  FAQ accordionIn FaqQuestions on hairlines that open like they mean it: the answer eases to its height, the plus folds into a minus.
• $39$30 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 990 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
  Number rollIn Footer, Numbers, Playback, Runbook, TestimonialsNumbers that change like an odometer: every digit rolls in the direction the number moved.
• Book a callBook a call
  Text morphIn Hero, Integrations, Playback, Pricing, Rail, RunbookText that changes the way it should: shared letters slide over, new ones rise out of a blur, the width eases.
• MonthlyYearlySave 20%

  $39$30 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 990 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9/mo
  Pricing toggleIn PricingMonthly or yearly: the thumb slides with a little give, and every price on the page rolls to its new amount.
• Status buttonIn RunbookSave, Saving, Saved: the spinner opens in, the check draws itself, errors shake, and the label morphs between them.

Everything a visitor reads, and every destination, lives in site.config.ts. The palette is a handful of CSS variables, and the product screens are images you replace with your own at the same proportions.

$ npm install$ npm run dev

sections

1414

source files

6262

lines of code

~6,300~6,300

dependencies

44

API keys needed

00

The full text ships as LICENSE.md in the download and is on the license page.

All 39 templates for $99.

Every template in the library, including Bulkhead, and every one added later. Same license, free updates. Less than three single templates.

• Pro

  Tandem

  $39

  Light-mode AI agent and workflow landing page

• Pro

  Offscript

  $39

  Independent creative studio website

• Pro

  Plumb

  $39

  Motion-led indie SaaS landing page