launchreel Harness

launchreel 终端

终端片：近黑舞台，钩子像命令一样逐字打出，光标闪烁，结尾 $ open <domain>。

A terminal film: near-black stage, the hook typed as a command with a blinking cursor, proof as a parameter table, end card `$ open <domain>`.

LAUNCHREEL HARNESS112–124 bpm

$ open launchreel.ai

status: ready · 12ms

16:9 frame mock · dark

Palette

Type

标题 Display 永正文 Body — 好的界面不抢内容 123456789000:12:04:18 monoPreviews use your installed fonts; webfonts are not bundled.

Display	"JetBrains Mono", ui-monospace, monospace
Body	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
Mono	"JetBrains Mono", ui-monospace, monospace
super	144px
chapter	64px
ui title	40px
body	28px
label	22px

Display JetBrains Mono, body Geist. Chinese films: Noto Sans SC. Sizes at 1920×1080.

Shape & surface

radius · card	12px
radius · screen	18px
shadow	none
glass	none

Motion

Entrance: typewriter (out-cubic).
Tempo 112–124 bpm (picked per domain inside the range); hold 1200ms.
Transitions: cut, flash-scan, wipe.

Film parameters

Resolution	1920×1080
Stage	dark neutral base
Grain / vignette	off / off
Device	scanlines
Entrance	typewriter
Tempo	112–124 bpm
Hold	1200ms
Layouts (stats / steps / features / screens)	params / commands / commands / framed
Transitions	cut, flash-scan, wipe
Openings	kicker-wordmark, hero-screen
End cards	wordmark, tile
Best for	dev-tool

Do / Don't

Do

Use one red error phase for the pain point, nowhere else.
Show proof numbers as a parameter table.
Product name as dot matrix.

Don't

No voice-over.
Don't use dissolves.
Needs its own kits (vendor/launchreel-kits).

Used in

launchreel look menu

Sources

launchreel: src/lib/style/look-menu.ts (LOOK_MENU), src/lib/style/look.ts, src/lib/style/defaults.ts

Updated 2026-10-13

Export

/* launchreel Harness / launchreel 终端 — A terminal film: near-black stage, the hook typed as a command with a blinking cursor, proof as a parameter table, end card `$ open <domain>`. */
:root {
  --launchreel-harness-bg: #0B0D12;
  --launchreel-harness-surface: color-mix(in oklab, #ECEFF4 6%, #0B0D12);
  --launchreel-harness-ink: #ECEFF4;
  --launchreel-harness-muted: #8B93A5;
  --launchreel-harness-accent: #6B95FF;
  --launchreel-harness-accent-ink: #0B0D12;
  --launchreel-harness-line: color-mix(in oklab, #ECEFF4 14%, #0B0D12);

  --launchreel-harness-pal-stage-bg: #0B0D12;
  --launchreel-harness-pal-ink: #ECEFF4;
  --launchreel-harness-pal-muted: #8B93A5;
  --launchreel-harness-pal-accent-example: #6B95FF;
  --launchreel-harness-pal-accent-2-example: #ABC0F5;

  --launchreel-harness-font-display: "JetBrains Mono", ui-monospace, monospace;
  --launchreel-harness-font-body: Geist, Inter, "Noto Sans SC", system-ui, sans-serif;
  --launchreel-harness-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --launchreel-harness-text-super: 144px;
  --launchreel-harness-text-chapter: 64px;
  --launchreel-harness-text-ui-title: 40px;
  --launchreel-harness-text-body: 28px;
  --launchreel-harness-text-label: 22px;

  --launchreel-harness-radius-card: 12px;
  --launchreel-harness-radius-screen: 18px;
  --launchreel-harness-shadow: none;
}

/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
  --color-bg: #0B0D12;
  --color-surface: color-mix(in oklab, #ECEFF4 6%, #0B0D12);
  --color-ink: #ECEFF4;
  --color-muted: #8B93A5;
  --color-accent: #6B95FF;
  --color-accent-ink: #0B0D12;
  --color-line: color-mix(in oklab, #ECEFF4 14%, #0B0D12);
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-sans: Geist, Inter, "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-card: 12px;
  --radius-screen: 18px;
}

// Tailwind v3 — tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        "bg": "#0B0D12",
        "surface": "color-mix(in oklab, #ECEFF4 6%, #0B0D12)",
        "ink": "#ECEFF4",
        "muted": "#8B93A5",
        "accent": "#6B95FF",
        "accent-ink": "#0B0D12",
        "line": "color-mix(in oklab, #ECEFF4 14%, #0B0D12)",
      },
      fontFamily: {
        display: ["\"JetBrains Mono\", ui-monospace, monospace"],
        sans: ["Geist, Inter, \"Noto Sans SC\", system-ui, sans-serif"],
        mono: ["\"JetBrains Mono\", ui-monospace, monospace"],
      },
      borderRadius: {
        "card": "12px",
        "screen": "18px",
      },
    },
  },
};