diff --git a/index.html b/index.html index 3ca4f57..2d4e789 100644 --- a/index.html +++ b/index.html @@ -3,15 +3,39 @@ - Project Blindspot — OBS Cockpit & Crowdsourced Media for Sports Car Enthusiasts - + Project Blindspot — Automotive Fan Fiction · Philadelphia + - + + +
-
AUTOMOTIVE HACKER PLATFORM
+
PHILADELPHIA  ·  FAN FICTION  ·  AUTOMOTIVE GOTHIC

- Your car.
- Your data.
- Your broadcast. + The city has
+ blind spots.
+ We found one.

- Project Blindspot is an OBS cockpit and crowdsourced media platform for sports car - enthusiasts. Stream your drives, overlay real-time telemetry, and connect with a - community of drivers who build their own experience. + Project Blindspot is a fan fiction universe built on asphalt and signal. + A modified sports car. An AI that shouldn't exist. Philadelphia streets that + don't appear on any map you'd trust. And an open-source OBS cockpit that + broadcasts the whole thing in real time.

- Request Early Access + Find the Frequency
- +
⬡
-

OBS Cockpit

-

A purpose-built OBS integration that pulls live vehicle data — speed, RPM, g-force, GPS — directly into your stream as overlays. No external hardware required.

+

The Vehicle

+

A modified 1982 sports car rebuilt in a Kensington garage over three years. It isn't registered. It doesn't stay on surveillance cameras longer than four seconds before the image corrupts. It speaks — not always in ways that make sense — but it speaks.

⬡
-

Crowdsourced Media

-

Driver-generated footage, routes, and telemetry shared across the community. Discover canyon runs, track days, and backroads from enthusiasts worldwide.

+

The Streets

+

Philadelphia. The Delaware waterfront at 4am. The underpass on I-95 between Girard and Allegheny where something keeps interfering with dashcam audio. Fairmount Park in November. The Vine Street Expressway, going the wrong direction.

⬡
-

Hacker-Friendly

-

Open architecture. Connect OBD-II adapters, GoPro feeds, external sensors. Build your own overlays with a documented plugin API. The cockpit is yours to configure.

+

The Cockpit

+

An OBS broadcast rig wired into the car's nerve endings. OBD-II telemetry — speed, RPM, heading, lateral g — overlaid live on dashcam footage. Community drivers contribute their own recordings. Some of the footage is hard to explain. We post it anyway.

-
+
- -

OBD-II meets the streaming stack.

+ +

Tap the nerve.
Run the signal.

- Blindspot bridges the gap between your car's data bus and a professional - broadcast pipeline. OBD-II telemetry feeds into a local cockpit app that - talks directly to OBS via WebSocket — overlays update in real time as you drive. + The cockpit runs OBS with a custom WebSocket plugin that reads the car's OBD-II + data stream in real time. Speed, RPM, lateral g-force, heading — rendered as + overlays on four dashcam angles. The broadcast goes live whenever the car moves.

- Clips, routes, and data get posted to a community feed where drivers can - compare telemetry, annotate footage, and build on each other's setups. + Clips land in a community archive. Other drivers annotate footage, compare + telemetry, and add their own runs. Some annotators are not drivers. + We haven't figured out who they are yet.

    -
  • OBD-II / ELM327 adapter support
  • -
  • OBS WebSocket plugin integration
  • -
  • GPS track overlay & route replay
  • -
  • Community clip feed with telemetry
  • -
  • Open plugin API
  • +
  • OBD-II / ELM327 live telemetry
  • +
  • OBS WebSocket overlay engine
  • +
  • Four-angle dashcam composite
  • +
  • Community annotation & archive
  • +
  • Open cockpit plugin API
-
+
- -

Built by enthusiasts, for enthusiasts.

-

Project Blindspot is in active development. Drop your email to get notified when early access opens and to shape what gets built.

+ +

The archive is open.

+

Footage comes in when the car runs. What follows are excerpts from the log. They are presented without editorial context.

+ +
+ +
+
+ T · 001 + Girard Avenue — 03:12AM +
+
+ "It asked me what I was afraid of. I said I didn't know. The RPMs climbed to 6,800 and held there for eleven seconds. Then it said: that's not nothing." +
+
+ RPM: 6,800 + DURATION: 0:11 + CAMERA: OFFLINE +
+
+ +
+
+ T · 002 + I-95 Southbound — Girard Interchange +
+
+ "The dashcam captured something in lane three. We've watched the clip forty times. We still don't agree on what it is." +
+
+ RPM: 4,100 + SPEED: 71mph + ANOMALY: LOGGED +
+
+ +
+
+ T · 003 + Kensington & Allegheny — 01:55AM +
+
+ "The car refused to turn left. There was no mechanical reason for it. I didn't argue." +
+
+ RPM: 900 + SPEED: 0mph + DURATION: 2:34 +
+
+ +
+
+ T · 004 + Location: [REDACTED] +
+
+ ████████████████████████████ ██████ ████ ████████████ ███ ████████ + ████████████████ ████████████ Schuylkill ████████████████████████. +
+
+ DATA: CORRUPTED + CAMERA: RECOVERED + STATUS: PENDING REVIEW +
+
+ +
+
+
+ +
+
+ +

New transmissions land
when the car runs.

+

Drop your frequency. We'll reach you when there's something to see. No pitch. No newsletter. Just the signal.

- - + +
-

No spam. No pitch deck. Just updates when there's something real to show.

+

Fan fiction. Hacker culture. Philadelphia streets. Nothing for sale.

@@ -139,6 +245,7 @@ PROJECT BLINDSPOT + diff --git a/style.css b/style.css index 4d09aa3..0473bff 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,6 @@ /* ============================================================ Project Blindspot — blindspot.fail + Automotive gothic. Philadelphia streets. Lynch meets Knight Rider. Color system: near-black bg / dark gray surfaces / red accent ============================================================ */ @@ -17,6 +18,7 @@ --red-bright: #e83535; --red-dim: #8a1a1a; --red-glow: rgba(212, 43, 43, 0.18); + --mono: 'Space Mono', monospace; } /* ---- Reset ---- */ @@ -51,13 +53,53 @@ h1, h2, h3 { .accent { color: var(--red-bright); } .section-label { - font-family: 'Rajdhani', sans-serif; - font-weight: 600; - font-size: 0.75rem; - letter-spacing: 0.2em; + font-family: var(--mono); + font-size: 0.65rem; + letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); - margin-bottom: 12px; + margin-bottom: 14px; +} + +/* ---- Ticker ---- */ +.ticker { + background: var(--black); + border-bottom: 1px solid var(--red-dim); + height: 26px; + overflow: hidden; + position: relative; +} + +.ticker-track { + display: flex; + align-items: center; + gap: 16px; + white-space: nowrap; + animation: ticker-scroll 40s linear infinite; + padding: 0 16px; + height: 100%; +} + +@keyframes ticker-scroll { + from { transform: translateX(0); } + to { transform: translateX(-50%); } +} + +.ticker-item { + font-family: var(--mono); + font-size: 0.6rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--gray-dim); + flex-shrink: 0; +} + +.ticker-item .accent { color: var(--red); } + +.ticker-sep { + color: var(--border); + flex-shrink: 0; + font-size: 0.7rem; } /* ---- Header ---- */ @@ -65,8 +107,8 @@ h1, h2, h3 { position: sticky; top: 0; z-index: 100; - background: rgba(10, 10, 10, 0.92); - backdrop-filter: blur(10px); + background: rgba(10, 10, 10, 0.95); + backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } @@ -85,11 +127,10 @@ h1, h2, h3 { } .wordmark-project { - font-family: 'Rajdhani', sans-serif; - font-weight: 400; - font-size: 0.75rem; + font-family: var(--mono); + font-size: 0.6rem; letter-spacing: 0.2em; - color: var(--gray-mid); + color: var(--gray-dim); } .wordmark-name { @@ -101,7 +142,7 @@ h1, h2, h3 { } .wordmark-sm .wordmark-name { font-size: 0.95rem; } -.wordmark-sm .wordmark-project { font-size: 0.65rem; } +.wordmark-sm .wordmark-project { font-size: 0.55rem; } .nav { display: flex; @@ -149,22 +190,21 @@ h1, h2, h3 { linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; - opacity: 0.35; + opacity: 0.3; pointer-events: none; mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 40%, transparent 100%); } .hero-tag { - font-family: 'Rajdhani', sans-serif; - font-weight: 600; - font-size: 0.7rem; - letter-spacing: 0.25em; + font-family: var(--mono); + font-size: 0.62rem; + letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); - margin-bottom: 20px; + margin-bottom: 24px; display: inline-flex; align-items: center; - gap: 8px; + gap: 10px; } .hero-tag::before { @@ -176,10 +216,10 @@ h1, h2, h3 { } .hero-title { - font-size: clamp(2.6rem, 6vw, 4.4rem); - line-height: 1.1; + font-size: clamp(2.8rem, 6.5vw, 4.8rem); + line-height: 1.08; max-width: 640px; - margin-bottom: 24px; + margin-bottom: 28px; color: var(--white); } @@ -188,21 +228,20 @@ h1, h2, h3 { color: var(--gray-mid); max-width: 520px; margin-bottom: 36px; - line-height: 1.7; + line-height: 1.75; } .btn-primary { display: inline-block; - font-family: 'Rajdhani', sans-serif; - font-weight: 700; - font-size: 0.9rem; - letter-spacing: 0.14em; + font-family: var(--mono); + font-size: 0.78rem; + letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); background: var(--red); border: none; - padding: 13px 32px; - border-radius: 3px; + padding: 14px 32px; + border-radius: 2px; text-decoration: none; cursor: pointer; transition: background 0.15s, transform 0.1s; @@ -233,8 +272,8 @@ h1, h2, h3 { border: 1px solid var(--border); border-top: 2px solid var(--red-dim); padding: 28px 24px; - border-radius: 4px; - transition: border-color 0.15s, background 0.15s; + border-radius: 2px; + transition: border-color 0.2s, background 0.2s; } .feature-card:hover { @@ -243,23 +282,22 @@ h1, h2, h3 { } .feature-icon { - color: var(--red); - font-size: 1.2rem; + color: var(--red-dim); + font-size: 1.1rem; margin-bottom: 14px; - opacity: 0.8; } .feature-card h3 { - font-size: 1.15rem; + font-size: 1.2rem; letter-spacing: 0.06em; - margin-bottom: 10px; + margin-bottom: 12px; color: var(--white); } .feature-card p { font-size: 0.9rem; color: var(--gray-mid); - line-height: 1.65; + line-height: 1.7; } /* ---- Platform Section ---- */ @@ -277,14 +315,14 @@ h1, h2, h3 { } .platform-text h2 { - font-size: clamp(1.6rem, 3vw, 2.2rem); + font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 20px; } .platform-text p { - font-size: 0.95rem; + font-size: 0.92rem; color: var(--gray-mid); - line-height: 1.75; + line-height: 1.8; margin-bottom: 16px; } @@ -297,21 +335,20 @@ h1, h2, h3 { } .platform-list li { - font-family: 'Rajdhani', sans-serif; - font-weight: 600; - font-size: 0.9rem; - letter-spacing: 0.05em; + font-family: var(--mono); + font-size: 0.75rem; + letter-spacing: 0.06em; color: var(--gray-hi); display: flex; align-items: center; - gap: 10px; + gap: 12px; } .platform-list li::before { content: ''; display: block; - width: 6px; - height: 6px; + width: 5px; + height: 5px; background: var(--red); border-radius: 50%; flex-shrink: 0; @@ -321,49 +358,97 @@ h1, h2, h3 { .dash-mock { background: var(--black); border: 1px solid var(--border); - border-radius: 6px; - padding: 28px; - font-family: 'Rajdhani', sans-serif; - font-weight: 600; - box-shadow: 0 0 40px rgba(212, 43, 43, 0.08); + border-radius: 4px; + padding: 22px 24px; + font-family: var(--mono); + box-shadow: 0 0 48px rgba(212, 43, 43, 0.1), inset 0 1px 0 rgba(255,255,255,0.03); +} + +.dash-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 18px; + padding-bottom: 12px; + border-bottom: 1px solid var(--border); +} + +.dash-title { + font-size: 0.6rem; + letter-spacing: 0.14em; + color: var(--gray-dim); + text-transform: uppercase; +} + +.dash-live { + font-size: 0.6rem; + letter-spacing: 0.12em; + color: var(--red-bright); } .dash-row { display: grid; grid-template-columns: 1fr 1fr; - gap: 16px; - margin-bottom: 16px; + gap: 12px; + margin-bottom: 12px; } .dash-gauge { background: var(--surface); border: 1px solid var(--border); - border-radius: 4px; - padding: 14px 16px; + border-radius: 2px; + padding: 12px 14px; } .dash-label { - font-size: 0.65rem; - letter-spacing: 0.2em; + font-size: 0.58rem; + letter-spacing: 0.18em; color: var(--gray-dim); - margin-bottom: 6px; + margin-bottom: 5px; text-transform: uppercase; + display: block; } .dash-value { - font-size: 1.5rem; + font-size: 1.45rem; font-weight: 700; color: var(--gray-hi); - letter-spacing: 0.05em; + letter-spacing: 0.03em; + line-height: 1; +} + +.dash-unit { + font-size: 0.7rem; + font-weight: 400; + color: var(--gray-dim); + letter-spacing: 0.1em; } .dash-value.accent { color: var(--red-bright); } +.dash-location { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 14px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 2px; + margin-bottom: 12px; +} + +.dash-loc-val { + font-size: 0.65rem; + letter-spacing: 0.1em; + color: var(--gray-hi); + text-transform: uppercase; +} + .dash-bar { - height: 4px; + height: 3px; background: var(--surface-hi); border-radius: 2px; - margin-bottom: 16px; + margin-bottom: 14px; overflow: hidden; } @@ -371,18 +456,131 @@ h1, h2, h3 { height: 100%; width: 42%; background: linear-gradient(90deg, var(--red-dim), var(--red-bright)); - border-radius: 2px; } .dash-obs { - font-size: 0.7rem; + font-size: 0.58rem; letter-spacing: 0.15em; color: var(--red); text-align: right; + text-transform: uppercase; +} + +/* ---- Transmissions Section ---- */ +.transmissions-section { + padding: 90px 0; + border-top: 1px solid var(--border); +} + +.transmissions-section h2 { + font-size: clamp(1.8rem, 3.5vw, 2.6rem); + margin-bottom: 12px; +} + +.transmissions-intro { + font-size: 0.92rem; + color: var(--gray-mid); + max-width: 540px; + line-height: 1.75; + margin-bottom: 48px; + font-style: italic; +} + +.transmission-log { + display: flex; + flex-direction: column; + gap: 2px; +} + +.transmission-entry { + background: var(--surface); + border: 1px solid var(--border); + border-left: 3px solid var(--red-dim); + padding: 24px 28px; + border-radius: 0 2px 2px 0; + transition: border-left-color 0.2s, background 0.2s; +} + +.transmission-entry:hover { + border-left-color: var(--red); + background: var(--surface-hi); +} + +.transmission-entry--locked { + border-left-color: var(--border); + opacity: 0.7; +} + +.transmission-entry--locked:hover { + border-left-color: var(--gray-dim); + background: var(--surface); +} + +.t-meta { display: flex; align-items: center; - justify-content: flex-end; - gap: 4px; + gap: 18px; + margin-bottom: 14px; +} + +.t-id { + font-family: var(--mono); + font-size: 0.62rem; + letter-spacing: 0.15em; + color: var(--red); + text-transform: uppercase; + flex-shrink: 0; +} + +.transmission-entry--locked .t-id { + color: var(--gray-dim); +} + +.t-loc { + font-family: var(--mono); + font-size: 0.62rem; + letter-spacing: 0.1em; + color: var(--gray-dim); + text-transform: uppercase; +} + +.t-quote { + font-size: 0.97rem; + color: var(--gray-hi); + line-height: 1.75; + border: none; + padding: 0; + margin-bottom: 16px; + font-style: italic; + max-width: 680px; +} + +.t-quote em { + color: var(--white); + font-style: normal; +} + +.t-quote--redacted { + font-family: var(--mono); + font-size: 0.85rem; + color: var(--gray-dim); + letter-spacing: 0.04em; + line-height: 1.9; + font-style: normal; +} + +.t-data { + display: flex; + gap: 24px; + flex-wrap: wrap; +} + +.t-data span { + font-family: var(--mono); + font-size: 0.58rem; + letter-spacing: 0.14em; + color: var(--gray-dim); + text-transform: uppercase; } /* ---- Join Section ---- */ @@ -390,6 +588,7 @@ h1, h2, h3 { padding: 100px 0; border-top: 1px solid var(--border); text-align: center; + background: linear-gradient(180deg, var(--bg) 0%, rgba(139, 0, 0, 0.04) 100%); } .join-section h2 { @@ -397,11 +596,12 @@ h1, h2, h3 { margin-bottom: 16px; } -.join-section p { +.join-section > .container > p { font-size: 0.95rem; color: var(--gray-mid); - max-width: 500px; + max-width: 440px; margin: 0 auto 32px; + line-height: 1.75; } .join-form { @@ -409,18 +609,19 @@ h1, h2, h3 { gap: 12px; justify-content: center; flex-wrap: wrap; - margin-bottom: 16px; + margin-bottom: 20px; } .join-form input[type="email"] { - font-family: 'Inter', sans-serif; - font-size: 0.95rem; + font-family: var(--mono); + font-size: 0.78rem; + letter-spacing: 0.06em; background: var(--surface); border: 1px solid var(--border); color: var(--white); - padding: 12px 20px; - border-radius: 3px; - width: 300px; + padding: 13px 20px; + border-radius: 2px; + width: 320px; outline: none; transition: border-color 0.15s; } @@ -429,26 +630,43 @@ h1, h2, h3 { .join-form input[type="email"]:focus { border-color: var(--red-dim); } .join-note { - font-size: 0.8rem !important; + font-family: var(--mono); + font-size: 0.62rem !important; + letter-spacing: 0.1em; color: var(--gray-dim) !important; + text-transform: uppercase; margin-bottom: 0 !important; } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--border); - padding: 28px 0; + padding: 32px 0; } .footer-inner { display: flex; + flex-direction: column; align-items: center; - justify-content: space-between; + gap: 10px; + text-align: center; +} + +.footer-tagline { + font-family: 'Rajdhani', sans-serif; + font-weight: 600; + font-size: 0.85rem; + letter-spacing: 0.1em; + color: var(--gray-dim); + font-style: italic; } .footer-copy { - font-size: 0.78rem; - color: var(--gray-dim); + font-family: var(--mono); + font-size: 0.6rem; + letter-spacing: 0.1em; + color: var(--border); + text-transform: uppercase; } /* ---- Responsive ---- */ @@ -460,11 +678,9 @@ h1, h2, h3 { .nav a:not(.nav-cta) { display: none; } - .footer-inner { - flex-direction: column; - gap: 12px; - text-align: center; - } - .join-form input[type="email"] { width: 100%; } + + .t-meta { flex-direction: column; gap: 4px; align-items: flex-start; } + + .t-data { gap: 14px; } }