pulsewatch

Landing page for an uptime & latency monitoring platform. Next.js 14 (App Router) + TypeScript + Tailwind, dark/technical aesthetic in the Better Stack × Vercel × Linear space. Builds and type-checks clean.

---

Quick start

npm install
cp .env.example .env.local   # set NEXT_PUBLIC_APP_URL / NEXT_PUBLIC_API_URL
npm run dev

Open http://localhost:3000.

Production: npm run build && npm run start.

---

Stack

Framework	Next.js 14, App Router
Language	TypeScript, strict
Styling	Tailwind CSS
Fonts	Inter (sans) + JetBrains Mono (mono), via next/font
Hero background	Three.js (custom CRT/plasma shader)
Cursor trail	ogl (custom WebGL glow-trail shader)
Icons	lucide-react

No CSS-in-JS, no animation library, no UI kit — everything is Tailwind utilities and two hand-written WebGL components for the effects that actually need a shader.

---

Structure

app/
  layout.tsx             fonts, metadata
  globals.css            tailwind directives, reduced-motion handling
  page.tsx                composes every section below, top to bottom

components/
  CRTWarp.tsx             Three.js hero background — plasma warp, scanlines, bloom,
                           pointer-reactive curvature
  WarpText.tsx             SVG feDisplacementMap headline, warps toward the pointer
  GlowCursor.tsx           ogl glow-trail cursor, wraps the hero content
  StartMonitoringButton.tsx  "Start Monitoring" — syncs then redirects (see below)

  Logo.tsx                wordmark
  Navbar.tsx               nav + CTA
  Hero.tsx                 wires CRTWarp + WarpText + GlowCursor + copy + CTAs
  DashboardPreview.tsx      live-jittering monitor table, gradient-border panel
  Features.tsx              regional checks, latency, incidents, API, history
  HowItWorks.tsx            Website → Poller → Regions → Time-series DB → Dashboard
  FinalCTA.tsx
  Footer.tsx

---

Environment variables

Variable	Required	Purpose
NEXT_PUBLIC_APP_URL	yes	Where "Start Monitoring" redirects — your actual product/dashboard. Defaults to http://localhost:3001.
NEXT_PUBLIC_API_URL	no	If set, the button POSTs to ${NEXT_PUBLIC_API_URL}/sync before redirecting (best-effort, never blocks the redirect). Unset = no sync call.

See .env.example.

---

Design notes

• Palette: magenta #c755f7 + cyan #67E8F9 as the two accents, near-black #05030a base. The hero background and the cursor trail are tuned to the same pair on purpose — the trail isn't a generic cyan/violet default, it's pulled from the warp's own colors so the two effects read as one system instead of two demos bolted together.
• Monospace is functional, not decorative: region codes, latency numbers, uptime percentages, and status labels are all font-mono — it's the one place a monitoring tool should feel like a terminal.
• How it works is the only numbered section — everywhere else avoids 01 / 02 / 03 markers since the features aren't sequential; the architecture pipeline actually is.
• All motion respects prefers-reduced-motion.

---

Swapping in your own CRTWarp / WarpText / GlowCursor

CRTWarp and GlowCursor here are the real shader implementations (Three.js and ogl respectively) — not placeholders. If you iterate on your own versions, drop the file into components/ under the same name with the same default export and prop names; nothing else in the tree needs to change.