diff --git a/README.md b/README.md index 7790f83..5daf707 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ GridBash by Jason Suhari is a Windows-native Rust TUI for agent-heavy developmen Official site: [jasonsuhari.github.io/gridbash](https://jasonsuhari.github.io/gridbash/) -[![GridBash demo showing multiple CLI agents running side by side in a Windows terminal grid](https://raw.githubusercontent.com/jasonsuhari/gridbash/main/docs/assets/gridbash-openvid-demo-poster.png)](https://github.com/jasonsuhari/gridbash/blob/main/docs/assets/gridbash-openvid-demo.mp4) +[![GridBash launch teaser showing six CLI coding agents in one terminal grid](https://raw.githubusercontent.com/jasonsuhari/gridbash/main/docs/assets/gridbash-launch-teaser-poster.png)](https://github.com/jasonsuhari/gridbash/blob/main/docs/assets/gridbash-launch-teaser.mp4) GridBash is built for developers who want parallel CLI-agent work without juggling terminal windows, browser tabs, or accidental cross-pane input. @@ -82,9 +82,12 @@ Its niche is Windows-native, PTY-backed, agent-first terminal grids. Traditional ## Demo Assets +- Watch the 13-second launch teaser: [`docs/assets/gridbash-launch-teaser.mp4`](https://github.com/jasonsuhari/gridbash/blob/main/docs/assets/gridbash-launch-teaser.mp4). - Watch the OpenVid-style demo: [`docs/assets/gridbash-openvid-demo.mp4`](https://github.com/jasonsuhari/gridbash/blob/main/docs/assets/gridbash-openvid-demo.mp4). +- Rebuild the teaser from its HyperFrames source in [`docs/demo/gridbash-launch-teaser/`](docs/demo/gridbash-launch-teaser/). - See the source scene and OpenVid recreation recipe in [`docs/demo/openvid-gridbash-demo.md`](https://github.com/jasonsuhari/gridbash/blob/main/docs/demo/openvid-gridbash-demo.md). - Use [`docs/assets/gridbash-social-preview.png`](docs/assets/gridbash-social-preview.png) as the GitHub social preview image. +- Use the ready-to-post copy and publication sequence in [`docs/LAUNCH_KIT.md`](docs/LAUNCH_KIT.md). ## Install From This Repo diff --git a/docs/LAUNCH_KIT.md b/docs/LAUNCH_KIT.md new file mode 100644 index 0000000..c2d6178 --- /dev/null +++ b/docs/LAUNCH_KIT.md @@ -0,0 +1,337 @@ +# GridBash Launch Kit + +This is the reusable publication kit for GridBash. Copy should be adapted to +the conversation and community instead of posted everywhere verbatim. + +## Positioning + +### One-line pitch + +GridBash is a Windows-native Rust terminal grid for running Codex, Claude, +Gemini, and other CLI coding agents side by side. + +### Short pitch + +GridBash puts real PTY-backed agent sessions into one selectable terminal grid. +Run agents in parallel, send a prompt to one pane or selected panes, and give +each pane its own git worktree when the jobs need isolation. + +### Proof points + +- One-command install: `npm install -g gridbash` +- Real Windows ConPTY sessions rather than simulated output +- Up to 100 panes in one process +- Input routing to one, selected, or all panes +- Optional repo-local git worktree per pane +- Built-in profiles for Codex, Claude, Gemini, Aider, OpenCode, Goose, Amp, + Cursor, and Copilot +- Open source under the MIT License + +### Honest constraint + +The published v0.1.6 package is Windows x64. V1 is intentionally single-process; +closing GridBash closes its child agents. + +## Links and assets + +- Repository: https://github.com/jasonsuhari/gridbash +- Website: https://jasonsuhari.github.io/gridbash/ +- npm: https://www.npmjs.com/package/gridbash +- Launch teaser: https://github.com/jasonsuhari/gridbash/blob/main/docs/assets/gridbash-launch-teaser.mp4 +- Teaser poster: `docs/assets/gridbash-launch-teaser-poster.png` +- Product walkthrough: https://github.com/jasonsuhari/gridbash/blob/main/docs/assets/gridbash-openvid-demo.mp4 +- Social preview: `docs/assets/gridbash-social-preview.png` + +## Show HN + +### Title + +```text +Show HN: GridBash – run multiple CLI coding agents in one Windows terminal grid +``` + +### First comment + +```text +I kept ending up with six terminal windows while comparing Codex, Claude, and +Gemini or running agents against separate tasks. I built GridBash, a Rust TUI +that puts real PTY sessions into one terminal grid and lets me send input to +one, several, or every pane. + +The workflow I care about most is parallel agent work without accidental +cross-pane input. A pane can also start in its own repo-local git worktree, so +implementation, review, tests, and docs can run in isolation while remaining +visible together. + +It is open source and Windows x64 for now: + + npm install -g gridbash + gridbash 2x3 --profile codex --worktrees + +I would especially appreciate feedback on the input-routing model and what you +would expect from detach/reattach support. +``` + +Submit the repository URL, remain available to answer questions, and do not ask +people to upvote or seed comments. + +## Reddit + +Read the current rules of each subreddit before posting. Use only the version +that matches the community and stay in the thread to answer questions. + +### r/rust + +**Title** + +```text +I built a Rust TUI for running multiple coding-agent PTYs in one Windows terminal +``` + +**Body** + +```text +I wanted one terminal surface for several CLI coding agents without hiding the +process behind a web dashboard. GridBash uses Ratatui plus Windows ConPTY-backed +sessions, routes input to one or selected panes, and can start every pane in a +separate git worktree. + +The tricky parts were keeping redraws cheap with many live panes, containing +mouse selection inside a pane, and making normal terminal input coexist with +modeless routing shortcuts. + +The project is MIT licensed and installable with `npm install -g gridbash` on +Windows x64. Source and a 13-second demo: +https://github.com/jasonsuhari/gridbash + +I would love feedback on the terminal architecture and where the Rust side +could be simplified. +``` + +### r/commandline + +**Title** + +```text +GridBash: one selectable terminal grid for Codex, Claude, Gemini, and other CLI agents +``` + +**Body** + +```text +I built GridBash because parallel coding-agent work kept turning into a pile of +terminal windows. It runs real PTY sessions in one grid, lets you select exactly +which panes receive a command, and can isolate panes in repo-local git worktrees. + +Quickstart on Windows x64: + + npm install -g gridbash + gridbash 2x3 --profile codex --worktrees + +Demo and source: https://github.com/jasonsuhari/gridbash + +I am most interested in feedback from people already using tmux, Windows +Terminal, or several CLI agents at once. What would make this fit your workflow? +``` + +### Agent-specific communities + +**Title template** + +```text +I built a terminal grid for running multiple sessions in parallel worktrees +``` + +**Body template** + +```text +I often run one session for implementation, another for review, and a +third for tests or docs. GridBash keeps those real CLI sessions visible in one +terminal grid and lets me route prompts only to the selected panes. + +The built-in profile launches a grid directly, and `--worktrees` gives +each pane an isolated checkout: + + gridbash 2x3 --profile --worktrees + +It is MIT licensed and currently ships for Windows x64: +https://github.com/jasonsuhari/gridbash + +If you use multiple sessions, I would value feedback on the selection +and worktree workflow. +``` + +## Product Hunt + +### Name + +```text +GridBash +``` + +### Tagline + +```text +Run every CLI coding agent in one terminal grid +``` + +### Description + +```text +A Windows-native Rust TUI for running Codex, Claude, Gemini, Aider, and other +CLI agents side by side. Route prompts to selected panes and isolate parallel +jobs with repo-local git worktrees. +``` + +### First comment + +```text +I built GridBash after parallel coding-agent work turned my desktop into a pile +of terminals. I wanted the sessions to stay real and visible, but I also wanted +one reliable way to decide which agents receive each prompt. + +GridBash runs PTY-backed sessions in a selectable grid. You can focus one pane, +select several, broadcast when appropriate, and start each pane in its own git +worktree. It is open source, MIT licensed, and available for Windows x64 through +npm. + +I am here all day and would love blunt feedback, especially from developers who +already run several CLI agents at once. +``` + +Suggested topics: Developer Tools, Open Source, Artificial Intelligence. + +## Social posts + +Attach `gridbash-launch-teaser.mp4` directly instead of relying on a link +preview. Put the repository link in the post or first reply according to the +platform's current link treatment. + +### X / Bluesky + +```text +Running six coding agents used to mean six terminal windows. + +So I built GridBash: a Windows-native Rust TUI for running Codex, Claude, +Gemini, Aider, and other CLI agents in one selectable terminal grid. + +Each pane can even get its own git worktree. + +Open source: https://github.com/jasonsuhari/gridbash +``` + +### LinkedIn + +```text +I built the terminal workflow I wanted for parallel coding agents. + +GridBash runs Codex, Claude, Gemini, Aider, and other CLI tools in one real +PTY-backed grid. I can route a prompt to one pane or selected panes, keep every +session visible, and isolate parallel jobs in repo-local git worktrees. + +It is a Rust TUI, MIT licensed, and currently available for Windows x64: +https://github.com/jasonsuhari/gridbash + +The most useful feedback now is from developers already juggling multiple agent +sessions: where does your workflow break down? +``` + +### Short Discord post + +```text +I made GridBash, an open-source Windows terminal grid for running multiple CLI +coding agents side by side. It supports selected-pane input and optional git +worktree isolation. Demo + source: https://github.com/jasonsuhari/gridbash +``` + +## Technical article outline + +The complete publication draft lives at +[`docs/articles/building-a-windows-pty-grid-in-rust.md`](articles/building-a-windows-pty-grid-in-rust.md). + +**Title:** Building a Windows PTY grid for coding agents in Rust + +1. Why multiple coding agents create a terminal coordination problem +2. Why GridBash preserves real PTYs instead of wrapping agents behind an API +3. ConPTY lifecycle and terminal emulation constraints +4. Routing ordinary input without introducing modal friction +5. Pane-local mouse selection and redraw performance +6. Git worktrees as the isolation boundary for parallel agents +7. What V1 deliberately does not solve: daemon detach/reattach +8. Architecture diagram, performance numbers, install command, and repository + +The article should teach the terminal lessons first and mention GridBash as the +working implementation rather than reading like an advertisement. + +## Response bank + +### “Why not tmux?” + +```text +tmux is excellent. GridBash is narrower: it is built around selecting agent +panes, routing the same input safely, launching common agent profiles, and +creating repo-local worktrees. If tmux already fits your workflow, keep it. +``` + +### “Why Windows only?” + +```text +The published package started with Windows because ConPTY workflows were the +gap I personally had. Cross-platform packaging is active work, but I do not +want to claim a platform until a release artifact is actually available. +``` + +### “Is this really multi-agent orchestration?” + +```text +It is terminal-level orchestration, not an agent framework. GridBash launches +and routes input among independent CLI agents; it does not hide their native +interfaces or invent a shared agent protocol. +``` + +### “Does closing it kill the agents?” + +```text +Yes in V1. GridBash is intentionally single-process today, so closing it closes +its children. Daemon-backed detach/reattach is the major next frontier. +``` + +## Publication sequence + +Do not dump every post on the same day. A practical sequence: + +1. Publish Show HN and stay available for the first several hours. +2. Post the technical Rust version the next day if it complies with current + subreddit rules. +3. Post the workflow version to command-line and agent-specific communities on + separate days. +4. Publish the short video to social accounts with native upload. +5. Publish the technical article and submit it as a normal HN story, not a + second Show HN. +6. Schedule Product Hunt for a day when the maker can answer comments throughout + the Pacific-time launch window. + +## Tracking + +Use source-specific links when analytics are needed: + +```text +https://jasonsuhari.github.io/gridbash/?utm_source=hackernews&utm_medium=community&utm_campaign=launch +https://jasonsuhari.github.io/gridbash/?utm_source=reddit&utm_medium=community&utm_campaign=launch +https://jasonsuhari.github.io/gridbash/?utm_source=producthunt&utm_medium=launch&utm_campaign=launch +https://jasonsuhari.github.io/gridbash/?utm_source=linkedin&utm_medium=social&utm_campaign=launch +``` + +GitHub stars are a lagging signal. Track qualified questions, successful +installs, npm downloads, issue quality, returning contributors, and which +message caused people to try the product. + +## Before every post + +- Confirm the install command against the current published release. +- Confirm the advertised platforms against actual downloadable artifacts. +- Read the community's current self-promotion rules. +- Upload the video natively when possible. +- Use a title that states what was built, not “Please support my project.” +- Ask for product or architecture feedback, never coordinated votes. +- Be ready to answer questions and ship small fixes while attention is active. diff --git a/docs/articles/building-a-windows-pty-grid-in-rust.md b/docs/articles/building-a-windows-pty-grid-in-rust.md new file mode 100644 index 0000000..319b4de --- /dev/null +++ b/docs/articles/building-a-windows-pty-grid-in-rust.md @@ -0,0 +1,175 @@ +# Building a Windows PTY Grid for Coding Agents in Rust + +> Publication draft. Adapt the introduction and examples to the destination +> before publishing. + +The first time I ran several coding agents in parallel, the hard part was not +starting them. The hard part was keeping track of them. + +One terminal was implementing. Another was reviewing. A third was running tests. +A fourth had stopped to ask a question I did not notice. Adding more windows +made every session harder to scan, while broadcasting input through ordinary +terminal tooling made it too easy to send a prompt somewhere it did not belong. + +I built [GridBash](https://github.com/jasonsuhari/gridbash) to explore a narrow +idea: what if the terminal itself understood the workflow of running several +independent CLI coding agents? + +GridBash is a Rust TUI that puts real PTY-backed sessions into one terminal +grid. It does not replace Codex, Claude, Gemini, Aider, or other agents. It +launches their normal CLI interfaces, keeps them visible, and gives the user an +explicit way to choose which panes receive input. + +This article covers the engineering boundaries that mattered most. + +## Preserve the native CLI + +An early architectural choice was whether to integrate with agent APIs or keep +the agents as terminal processes. + +The API route offers deep control, but it also turns the multiplexer into an +agent framework. Every provider has different authentication, streaming, +tool-use, approval, and conversation semantics. Supporting a tool would mean +reimplementing part of its interface and keeping that adapter current. + +A PTY boundary is smaller and more durable. If a command works in a terminal, +GridBash can host it. Authentication remains the tool's responsibility. The +agent keeps its native colors, keybindings, approval prompts, and update cycle. +Custom commands work through the same path as built-in profiles. + +This is also an honest description of the orchestration involved. GridBash +orchestrates terminals and input routing; it does not claim that unrelated +agents suddenly share memory or a common protocol. + +## A pane is a terminal, not a text box + +Rendering command output is the easy-looking part of a terminal multiplexer. +The difficult part is preserving terminal behavior. + +Interactive programs expect a pseudo-terminal. They move the cursor, redraw +regions, switch screen buffers, negotiate size, emit color and style sequences, +and react to control keys. Treating their output as lines of text breaks as soon +as a program behaves like a real TUI. + +GridBash uses `portable-pty` to create PTY-backed child sessions and Ratatui for +the outer interface. On Windows, those sessions run through ConPTY. Each pane +owns its terminal state, process lifecycle, title, scrollback, and rendered +region. Resizing a pane must propagate a new terminal size to the child rather +than merely changing how many cells the parent draws. + +That boundary keeps the design understandable: + +- The child process believes it owns a normal terminal. +- The terminal parser owns the child's screen state. +- The GridBash UI decides where that screen appears. +- The input router decides which PTYs receive a user's bytes. + +## Input routing should be visible + +Broadcast input is powerful and dangerous for the same reason: one action can +affect many processes. + +GridBash separates focus from selection. Focus answers “which pane am I looking +at?” Selection answers “which panes should receive this input?” A user can send +input to one pane, a chosen set, or the whole grid, but the destination must be +visible before the bytes are written. + +This is especially important for coding agents. Two sessions may look similar +while operating on different tasks, repositories, or approval prompts. A +command intended for a test runner should not quietly become a response to an +agent asking permission to modify files. + +The outer TUI therefore needs modeless controls that coexist with normal +terminal input. Most keystrokes pass through untouched. A small set of Alt +shortcuts changes focus, toggles selection, or invokes GridBash behavior. The +goal is to make routing explicit without turning every interaction into a mode +switch. + +## Mouse selection must stop at pane boundaries + +Terminal text selection looks like a cosmetic detail until multiple terminal +surfaces share one viewport. + +The parent application receives mouse coordinates for the entire grid. The +selected child terminal only understands coordinates inside its own cell +region. Dragging across a border cannot be allowed to select text from a sibling +pane or change the input destination halfway through the gesture. + +The useful invariant is simple: a selection belongs to the pane where it began. +Coordinates are translated into that pane's local cell space and clamped to its +content area. The gesture ends there even if the pointer later crosses another +pane. + +This kind of invariant is worth expressing in code instead of relying on the UI +to “usually” behave. Agent-heavy workflows make accidental cross-pane actions +more expensive than they are in a grid of ordinary shells. + +## Parallel agents need filesystem isolation + +Running six agents in parallel is not useful if they all edit the same working +tree. + +GridBash can create a repo-local git worktree for each pane. Every agent receives +an isolated checkout while the user retains one visual surface for the whole +operation. An implementation pane can change code while a review pane examines +the base branch and a test pane validates another candidate. + +Git worktrees are a pragmatic boundary because they reuse a tool developers +already understand. There is no custom snapshot format or hidden copy of the +repository. Branches, diffs, and cleanup remain visible through normal git +commands. + +They also expose the real coordination problem: isolation prevents file +collisions, but it does not decide which result should win. Review, integration, +and merge decisions still belong to the developer. The terminal grid makes the +work observable; it does not pretend that concurrency removes the need for +judgment. + +## Many panes change the redraw budget + +A single terminal can redraw aggressively without feeling expensive. A grid of +live agents produces output in bursts across several panes, often while the user +is typing into one of them. + +The outer application has to distinguish state changes that require a redraw +from background activity that can be coalesced. It also needs to prevent noisy +panes from making the focused pane feel sluggish. Sleeping or quiet panes should +not consume the same visual attention as a pane waiting for input. + +The practical lesson is to measure the hot path around output ingestion, +terminal parsing, layout, and paint as one system. Optimizing only the Rust UI +loop will not help if every PTY event still triggers unnecessary work elsewhere. + +GridBash exposes pane state such as focus, selection, sleep, exit, and quiet +output directly in the grid. Those cues are not decoration; they let the user +scan many concurrent processes without reading every line. + +## What V1 deliberately does not solve + +GridBash V1 is single-process. Closing GridBash closes its child agents. + +That limitation keeps process ownership and cleanup straightforward, but it +means the application is not yet a durable session daemon. Proper detach and +reattach support requires a different boundary: a long-lived process must own +PTYs, buffer state, authenticate clients, recover terminal dimensions, and +reconnect the UI without losing process semantics. + +Calling that out matters. A terminal multiplexer is trusted with long-running +work, so persistence should be designed as an invariant rather than added as a +background-process trick. + +## Try it + +The currently published package supports Windows x64: + +```powershell +npm install -g gridbash +gridbash 2x3 --profile codex --worktrees +``` + +GridBash is MIT licensed. The source, demo, issues, and roadmap are available at +[github.com/jasonsuhari/gridbash](https://github.com/jasonsuhari/gridbash). + +The feedback I am most interested in is concrete workflow friction: how many +agent sessions do you actually run, how do you separate their repositories, and +where does your current terminal setup become unsafe or difficult to scan? diff --git a/docs/assets/gridbash-launch-teaser-poster.png b/docs/assets/gridbash-launch-teaser-poster.png new file mode 100644 index 0000000..9bee119 Binary files /dev/null and b/docs/assets/gridbash-launch-teaser-poster.png differ diff --git a/docs/assets/gridbash-launch-teaser.mp4 b/docs/assets/gridbash-launch-teaser.mp4 new file mode 100644 index 0000000..ecae37c Binary files /dev/null and b/docs/assets/gridbash-launch-teaser.mp4 differ diff --git a/docs/demo/gridbash-launch-teaser/.gitignore b/docs/demo/gridbash-launch-teaser/.gitignore new file mode 100644 index 0000000..4ec52df --- /dev/null +++ b/docs/demo/gridbash-launch-teaser/.gitignore @@ -0,0 +1,3 @@ +/.hyperframes/review/ +/.hyperframes/review-final/ +/gridbash-launch-teaser*.mp4 diff --git a/docs/demo/gridbash-launch-teaser/.hyperframes/expanded-prompt.md b/docs/demo/gridbash-launch-teaser/.hyperframes/expanded-prompt.md new file mode 100644 index 0000000..b246ea2 --- /dev/null +++ b/docs/demo/gridbash-launch-teaser/.hyperframes/expanded-prompt.md @@ -0,0 +1,149 @@ +# GridBash: Six Agents, One Terminal + +## Style block + +Create a silent 13-second, 1920x1080 launch teaser set inside an operator +dispatch board for coding agents. Use the exact GridBash palette: canvas +`#0b1118`, panel `#121720`, foreground `#f0f4f9`, muted copy `#8fa2b7`, +GridBash green `#29d392`, focus blue `#48a5ff`, and completion amber `#ffca5c`. +Use Archivo Black for statements and Cascadia Mono for operational copy. + +## Rhythm + +`SLAM -> proof -> PEAK -> hold` + +The hook occupies 0.0-3.4 seconds, live product proof occupies 3.4-11.1 +seconds, and the install CTA occupies 11.1-13.0 seconds. + +## Global rules + +- Three depth layers in every beat: atmospheric routing grid, primary content, + and foreground status rails/registration marks. +- Keep 8-10 visible elements per beat without allowing decoration to compete + with the message. +- Primary transition is a 0.45-second directional push with blur, + `power3.inOut`. The CTA uses a 0.55-second zoom-through, `expo.inOut`. +- All entrances are deterministic `fromTo` tweens on the paused root timeline. +- No narration or music. The asset must work muted on GitHub, Hacker News, + Product Hunt, X, LinkedIn, and Reddit. +- The real committed GridBash demo video is the only product footage. + +## Beat 1 - The dispatch order (0.0-3.4s) + +### Concept + +The frame feels like an operations board waking up for a shift. Six agent names +route into place around a massive command: "SIX AGENTS. ONE TERMINAL." The +viewer should understand the category and benefit before seeing the product. + +### Mood direction + +Airport departures board meets a disciplined terminal operations room. Precise, +compact, and credible rather than futuristic. + +### Depth layers + +- BG: offset routing grid DRIFTS horizontally; green radial wash BREATHES; + oversized grid coordinates HOLD at low opacity. +- MG: headline STAMPS from the left; subhead LOCKS under it; six agent labels + ROUTE into two uneven rows. +- FG: top status rail DRAWS across; issue-like sequence number TICKS on; + registration corners SNAP into place. + +### Choreography + +- `GRIDBASH / AGENT DISPATCH` types on in Cascadia Mono. +- `SIX AGENTS.` stamps in from the left with `expo.out`. +- `ONE TERMINAL.` rises with a small scale correction and `back.out(1.15)`. +- Agent labels cascade from alternating directions in under 450ms. +- The routing rule draws left-to-right while the background grid drifts once. + +### Transition out + +Directional push at 3.15s. Beat 1 accelerates left with 8px blur while the live +terminal window pushes in from the right and resolves sharply over 0.45s. + +## Beat 2 - Product proof (3.15-11.1s) + +### Concept + +The actual GridBash terminal grid becomes the control-room window. Operational +labels point at the three differentiators visible in the footage: multiple live +PTY panes, selected broadcast, and isolated git worktrees. + +### Mood direction + +Raw developer demo with editorial annotation. The product is not placed inside +a fake laptop or browser; it is the instrument panel. + +### Depth layers + +- BG: canvas and routing grid remain visible at the margins; blue focus wash + PULSES once behind the terminal. +- MG: terminal window PUSHES into its hero position and slowly advances through + real committed footage. +- FG: `REAL PTYS`, `SELECTED BROADCAST`, and `ISOLATED WORKTREES` labels LOCK to + frame edges; a `6 LIVE PANES` counter STAMPS in amber; a green scan rule + TRAVELS once across the product window. + +### Choreography + +- Terminal wrapper enters from x=520 with scale 0.9 and `power4.out`. +- Product video remains unmodified other than perspective-free framing and a + slow 1.00-to-1.025 child scale. +- Annotation labels enter from three different directions using expo, circ, + and power eases. +- Scan rule traverses once; no infinite loops or decorative particles. + +### Transition out + +Zoom-through at 11.15s. The terminal expands toward the viewer and blurs to +18px while the CTA resolves from 0.78 scale to full size over 0.55s. + +## Beat 3 - Install and run (11.05-13.0s) + +### Concept + +The visual noise falls away. The install command becomes a physical command +plate, with the repository URL and platform status supporting it. This is the +only centered beat, used deliberately for closure and copyability. + +### Mood direction + +Confident release card, closer to a stamped shipping label than a SaaS CTA. + +### Depth layers + +- BG: routing grid holds; amber completion wash breathes once; giant cropped + `READY` ghost type drifts by a few pixels. +- MG: `RUN THE GRID.` stamps in, command plate draws open, install command types + on as a single readable unit. +- FG: `OPEN SOURCE / MIT`, Windows x64 strip, GitHub URL, registration corners, and + a green completion rule snap into place. + +### Choreography + +- Headline drops from above with `expo.out`. +- Command plate scales from 0.92 while its border draws with `circ.out`. +- Install command enters from x=-40 with no typewriter gimmick so it remains + readable in still frames. +- URL and metadata rise on different timings; green rule resolves last. +- Final 0.4 seconds hold at full clarity. No mandatory fade to black. + +### Transition out + +None. Hold the complete CTA through the final frame. + +## Recurring motifs + +- A top-left dispatch identifier changes from `DISPATCH 01` to `LIVE GRID 06` + to `READY 01`. +- Thin green routes connect claims to the terminal frame. +- Blue appears only for active focus; amber appears only for completion. +- Cropped monospace coordinates keep the dispatch-board metaphor consistent. + +## Negative prompt + +No neon purple/blue gradient, gradient text, glassmorphism, fake charts, fake +metrics, glowing orbs, HUD circles, particle fields, tiny web typography, +equal-weight card grids, generic centered hero layout, or invented product UI. diff --git a/docs/demo/gridbash-launch-teaser/README.md b/docs/demo/gridbash-launch-teaser/README.md new file mode 100644 index 0000000..678d137 --- /dev/null +++ b/docs/demo/gridbash-launch-teaser/README.md @@ -0,0 +1,46 @@ +# GridBash Launch Teaser + +This HyperFrames composition renders the 13-second, silent launch teaser used +for GridBash publicity. It uses the existing product demo as real footage and +adds a dispatch-board motion system around it. + +## Outputs + +- `docs/assets/gridbash-launch-teaser.mp4` - final 1920x1080 MP4 at 30fps. +- `docs/assets/gridbash-launch-teaser-poster.png` - hook frame for embeds. + +## Source + +- `design.md` defines the exact palette, typography, and motion language. +- `.hyperframes/expanded-prompt.md` records the production breakdown. +- `index.html` is the composition source. +- `assets/gridbash-openvid-demo.mp4` is a keyframe-normalized copy of the + committed product demo so frame-by-frame rendering remains deterministic. +- `assets/gsap.min.js` vendors GSAP 3.14.2 so validation and rendering do not + depend on a CDN. + +## Rebuild + +Requires Node.js 22 or newer, HyperFrames 0.7.49, Chrome, FFmpeg, and FFprobe. + +```powershell +cd docs/demo/gridbash-launch-teaser +npm run check +npx --yes hyperframes@0.7.49 render ` + --quality standard ` + --workers 1 ` + --video-frame-format png ` + --no-browser-gpu ` + --output gridbash-launch-teaser.mp4 +``` + +If FFmpeg is installed but not on `PATH`, point HyperFrames at it explicitly: + +```powershell +$env:HYPERFRAMES_FFMPEG_PATH = "C:\path\to\ffmpeg.exe" +$env:HYPERFRAMES_FFPROBE_PATH = "C:\path\to\ffprobe.exe" +``` + +The one-worker and software-browser settings are deliberate. Auto-calibration +reduced this composition to one worker on the reference machine, and software +rendering prevents intermittent glyph loss in long hardware-composited captures. diff --git a/docs/demo/gridbash-launch-teaser/assets/gridbash-openvid-demo.mp4 b/docs/demo/gridbash-launch-teaser/assets/gridbash-openvid-demo.mp4 new file mode 100644 index 0000000..e53ae7b Binary files /dev/null and b/docs/demo/gridbash-launch-teaser/assets/gridbash-openvid-demo.mp4 differ diff --git a/docs/demo/gridbash-launch-teaser/assets/gsap.min.js b/docs/demo/gridbash-launch-teaser/assets/gsap.min.js new file mode 100644 index 0000000..52de8f8 --- /dev/null +++ b/docs/demo/gridbash-launch-teaser/assets/gsap.min.js @@ -0,0 +1,10 @@ +/*! + * GSAP 3.14.2 + * https://gsap.com + * + * @license Copyright 2025, GreenSock. All rights reserved. + * Subject to the terms at https://gsap.com/standard-license. + * @author: Jack Doyle, jack@greensock.com + */ + +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(",")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++ia;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,"onInterrupt"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if("hsl"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf("="))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1=r&&te)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p="get"!==i?i:s(c)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf("random(")&&(n=rb(n)),"="===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||""===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m")}),s.duration();else{for(l in u={},k)"ease"===l||"easeEach"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]="+=0",Qt(t,s),Ht=0,o?T(e+" not eligible for reset"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||Ba(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja("staggerTo,staggerFrom,staggerFromTo",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,"_pt"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2 + + + + + + + + +
+
+
+
+
+
02 x 03
+
+
+
+
+ GRIDBASH / AGENT DISPATCH + + DISPATCH 01 +
+
+

SIX AGENTS.
ONE TERMINAL.

+

Run every CLI coding agent side by side—then route each prompt exactly where it belongs.

+
+ CODEX + CLAUDE + GEMINI + AIDER + OPENCODE + COPILOT +
+
+
+ +
+
+
+
+
+
+
+ LIVE GRID / REAL PTY SESSIONS + 6 LIVE PANES +
+
+ +
+
REAL PTYS
+
SELECTED BROADCAST
+
ISOLATED WORKTREES
+
+
+
+ +
+
+
+
+
READY
+
+
+
+
+ GRIDBASH / OPEN SOURCE + + READY 01 +
+
+

RUN THE GRID.

+
+
$npm install -g gridbash
+
+
OPEN SOURCE / MITWINDOWS X64RUST TUI
+
github.com/jasonsuhari/gridbash
+
+
+
+
+ + + + diff --git a/docs/demo/gridbash-launch-teaser/meta.json b/docs/demo/gridbash-launch-teaser/meta.json new file mode 100644 index 0000000..ea9732c --- /dev/null +++ b/docs/demo/gridbash-launch-teaser/meta.json @@ -0,0 +1,5 @@ +{ + "id": "gridbash-launch-teaser", + "name": "gridbash-launch-teaser", + "createdAt": "2026-07-10T20:28:28.865Z" +} \ No newline at end of file diff --git a/docs/demo/gridbash-launch-teaser/package.json b/docs/demo/gridbash-launch-teaser/package.json new file mode 100644 index 0000000..e2a8f36 --- /dev/null +++ b/docs/demo/gridbash-launch-teaser/package.json @@ -0,0 +1,11 @@ +{ + "name": "gridbash-launch-teaser", + "private": true, + "type": "module", + "scripts": { + "dev": "npx --yes hyperframes@0.7.49 preview", + "check": "npx --yes hyperframes@0.7.49 lint && npx --yes hyperframes@0.7.49 validate && npx --yes hyperframes@0.7.49 inspect", + "render": "npx --yes hyperframes@0.7.49 render", + "publish": "npx --yes hyperframes@0.7.49 publish" + } +} diff --git a/docs/devlogs/2026-07-10-launch-publicity-kit.md b/docs/devlogs/2026-07-10-launch-publicity-kit.md new file mode 100644 index 0000000..c8f3599 --- /dev/null +++ b/docs/devlogs/2026-07-10-launch-publicity-kit.md @@ -0,0 +1,45 @@ +# Launch publicity kit + +Date: 2026-07-10 +Release target: unreleased + +## Summary + +- Added a launch-ready publicity kit and a short HyperFrames product teaser. +- Updated the README hero to make the core agent-grid workflow understandable + before a visitor reaches the install instructions. + +## What Changed + +- Added a 13-second, 1080p launch teaser, poster, reproducible composition + source, visual design system, and production breakdown. +- Added channel-specific Show HN, Reddit, Product Hunt, social, Discord, and + technical-article copy with an ordered publication checklist. +- Added response templates for common questions about tmux, platform support, + orchestration scope, and process lifetime. +- Added a complete technical-article draft about PTYs, input routing, pane-local + selection, redraw pressure, and git worktree isolation. +- Updated README demo links to lead with the new teaser and point maintainers + to the launch kit, and updated the GitHub Pages hero to use the same asset. + +## Why It Matters + +- GridBash now has a concise visual explanation that works without audio and a + consistent message that can be adapted to each developer community. +- The publication kit emphasizes useful technical context and honest product + constraints instead of coordinated voting or copy-pasted promotion. + +## Validation + +- HyperFrames lint: 0 errors, 0 warnings. +- HyperFrames validation: no console errors; 28 text elements pass WCAG AA. +- Rendered the 1920x1080 teaser at 30fps and inspected hook, product-proof, and + install frames. +- Re-encoded embedded source footage with one-second keyframes to prevent seek + freezes during deterministic rendering. +- Rendered with one worker, PNG source frames, and software browser compositing; + inspected frames at 1.5s, 6.5s, 10.0s, and 12.7s. + +## Release Notes + +- Added launch campaign assets and ready-to-publish community copy for GridBash. diff --git a/docs/index.html b/docs/index.html index 7dcfba7..ff99f5a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -10,7 +10,7 @@ - + @@ -492,8 +492,8 @@

Run every CLI coding agent side by side.

npm install -g gridbash
- - GridBash terminal grid showing multiple CLI agents and shells running side by side + + GridBash launch teaser showing six CLI coding agents in one terminal grid