StellarMind

# Prompt: StellarMind "signalfieldOS" hero

Build a single-file, one-screen **launch hero for a fictional AI product, signalfieldOS 0.5.1 by StellarMind**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The idea is a digital *Creation of Adam*:
- A coral wireframe 3D hand reaches in from the upper left.
- A real human hand reaches in from the lower right.
- They meet at a small round play button in the centre.

The background is a dark charcoal film-grain starfield. The hands only reach for each other as the cursor gets close to the button.

## Media

- **Noise background:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/d8028a2b-cd0c-4202-bb9d-6afa55dac617.mp4` (1920×1080, 3s, no audio).
  - Dark charcoal film grain with tiny flickering stars.
  - Plays full-bleed (`object-fit: cover`), autoplay, muted and looped as is: a hard loop with no crossfade and no reverse.
- **Reach clip:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/28e4758d-ebe5-4bc1-8a43-05299af3e3f7.mp4` (1920×1080, 24fps, 19 frames, 0.79s, every frame a keyframe so seeking is instant).
  - Frame 0: both hands pulled back to the edges. Only the curled wireframe fingers show at the left edge and the real fingertip at the bottom right.
  - Frame 18 (t = 0.75s): both index fingertips almost touching at **(47.2%, 42.5%)** of the frame.
  - The background is flat, very dark charcoal (#141414–#161616).
  - It is **never played, only scrubbed**.
- **Poster for the reach clip (frame 0):** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/2c309342-f74d-498f-83ea-48adc10503c1.jpg`
- **Rule:** the hands are never drawn, moved or transformed in code. All hand motion comes from the clip's frames.

## Layering

1. Page background `#1c1c1c`.
2. The noise video, full-bleed.
3. The reach clip with `mix-blend-mode: lighten`. Its flat dark background is darker than the noise, so only the hands show and the grain keeps moving around them.
4. The UI.

**Stage:** the reach clip sits on a 16:9 stage that covers the viewport. Width = max(viewport width, viewport height × 16/9).
- It is positioned so the fingertip gap sits at the horizontal centre and 46% down the viewport, clamped so the stage always covers the screen.
- A second stage with the same size and position holds the play button and caption, so they stay locked to the gap.

## Type and colour

- **Font:** JetBrains Mono 400/500 everywhere.
- **Colours:**
  - ink `#ecebe8`
  - caption white at 30%
  - outlines white at 42%

**Desktop scale:** `--k = clamp(.8px, min(100vw/1440, 100vh/960), 1.6px)`.

## Layout (1440×960)

- **Top bar** (20k from the top, 24k side padding):
  - left: "StellarMind" at 11k
  - right: an outlined "join waitlist →" (26k tall, 10k text, 1px outline). On hover it fills ink with dark text, and the arrow nudges 3px.
- **Play button:** centred on the fingertip gap.
  - 46u round, frosted grey (`rgba(140,140,140,.38)` with a 6px backdrop blur) and a white play triangle. The unit u = min(vw/1440, vh/960) px.
  - When the hands touch, it turns near-white (`rgba(236,235,232,.92)`) with a dark triangle, over 0.3s.
- **Caption:** 38u below the button centre, three centred lines at 11.2u on a 1.7 line height, in dim white: "signalfieldOS 0.5.1 / by / StellarMind".
- **Footer:** bottom centre, 22k from the bottom.
  - "hello@stellarmind.example" (11k, weight 500, underlines on hover)
  - "copyright StellarMind, Inc 2026" (6.6k, white at 60%)

## Interaction (copy exactly)

1. **Distance:** each frame, measure the distance *d* from the cursor to the fingertip gap.
2. **Proximity target:** q = 1 − clamp((d − 30) / r, 0, 1), with r = 0.24 × max(viewport width, 900). Smoothstep it: pt = q²(3 − 2q).
   - pt = 1 while hovering the play button.
   - pt = 0 when the pointer leaves the window.
3. **Easing:** p += (pt − p) × 0.09 per animation frame.
4. **Scrub:** set the reach clip to `currentTime = p × 0.75s`. Seek only when the difference is over 0.02s and the clip isn't already seeking, and seek again on `seeked`.
5. **Result:** far from the button, the hands stay pulled back to the edges. Moving toward it, they glide in. On it, the fingertips meet and the button turns white (p > 0.96). Moving away, they slide back out.
6. **Touch screens** (no hover): the hands rest touching (p = 1). Tapping the button toggles between touching and pulled back.
7. **Reduced motion:** the noise is hidden and the clip is held on its last frame (touching).

## Phones (under 768px)

- Same stage logic, so the gap stays centred and the hands crop large.
- Fixed type: 12px wordmark, a 30px-tall waitlist button with 11px text, 12px email, 8px copyright.
- The button unit is max(vw/430, .9) px.

## Acceptance check (1440×960)

- On load, the hands sit at the screen edges over moving grain.
- Moving the cursor toward the centre makes them reach in. Hovering the button makes the fingertips meet and the button turn white. Moving away pulls them back.
- No doubled stars or bright rectangle around the hands. No opacity fades on any video.
- **Content:** no real brands or logos.