Open Connector × HyperFrames Demo

English | 简体中文

▶ Watch the finished film on YouTube

Connect Any AI Agent to 1,000+ SaaS Apps with OpenConnector

A 30-second product film built as a deterministic HTML composition with HyperFrames, GSAP, Three.js, and procedurally generated sound. The repository contains the composition source, the isolated sound effects, the synthesis scripts, and runtime checks that protect its camera and handoff geometry.

The YouTube release is the final branded cut. This repository also includes a public-safe 1080p preview that can be reproduced from source. The hosted cut received additional post-production and music that are not included in this repository. The reproducible public build remains SFX-only. Third-party marks visible in the hosted cut remain outside this repository's MIT license; see Attribution for the exact boundary.

Read with an agent · Animation breakdown · Sound design · HyperFrames patterns

What this demonstrates

• A single uninterrupted DOM camera chain from typing to send, launch, reply, and absorption.
• A frame-exact handoff from DOM elements into a Three.js ecosystem scene.
• Seventy-two deterministic public-safe connector nodes released in three timed waves.
• A topology-to-ginkgo transformation without runtime randomness or network requests.
• A 30-second SFX timeline synthesized locally from JavaScript.
• Runtime assertions for camera continuity, high-density canvas output, and semantic carriers.

How I made this film

I set the product story and motion direction, then made the visual calls in each iteration. The agent turned those decisions into HTML animation addressed by absolute frame. I reviewed key frames, transition boundaries, and object continuity while iterating, then rendered the full film once the picture was settled. Programmatic sound and picture share one timeline. HyperFrames can also create background music in a chosen style and place it on that timeline. This repository keeps the public composition SFX-only. The published YouTube cut received additional post-production and music outside this repository.

Requirements

• Node.js 22 or newer
• npm 10 or newer
• FFmpeg, including ffprobe

No API key, hosted service, or private account is required to preview or render locally.

Quick start

npm ci
npm run dev

npm run dev builds the deterministic textures and JavaScript bundle, then starts the HyperFrames preview server. It is a long-running process; stop it with Ctrl+C.

Read with an agent

Start an agent in this repository and paste:

Read AGENTS.md and docs/agent-reading-guide.md first. Stay read-only. Explain how this
composition uses HyperFrames, absolute-frame state, DOM-to-Three.js handoff, and procedural
sound. Cite the exact files and symbols I should study next. Do not summarize files that are
unrelated to my question.

The agent reading guide also includes shorter routes for motion, sound design, customization, and release verification.

Useful commands:

npm test                 # motion/data checks plus repository-contract checks
npm run lint             # build and run HyperFrames lint
npm run check:runtime    # browser-level camera and handoff verification
npm run check            # full local release check
npm run render:preview   # write the curated 1080p demo
npm run render           # write a high-quality 1080p master under renders/
npm run render:4k        # write a high-quality 4K master under renders/

Timeline

Time	Sequence	Primary source
00:00-03:00	Type the Slack-to-Linear request and follow the caret	src/timeline.js
03:00-04:47	Press send, launch the message shell, and follow it upward	src/timeline.js
04:47-08:47	Relay Claude → Hermes → Codex while one reply continues growing	src/timeline.js
08:47-13:00	Collapse four semantic carriers into Codex and build resonance	src/timeline.js
13:00-20:87	Release 72 apps, migrate them to the topology, and assemble the ginkgo	src/orbit-scene.js
20:87-25:20	Hold the topology and reveal the product end card	src/orbit-scene.js
25:20-30:00	Resolve the final Open Connector brand lockup	src/timeline.js

The cue sheet in assets/audio/sfx/cues.json uses the same absolute timeline.

Source map

• index.html defines the HyperFrames composition contract, the DOM layers, and the audio clip.
• src/timeline.js owns absolute-frame state and the DOM/Three.js handoff.
• src/orbit-scene.js owns the Three.js torus, burst, topology, and ginkgo scene.
• src/icon-data.js holds frozen geometry, timing, app layout, and pure state derivations.
• scripts/build-public-safe-assets.mjs generates the neutral connector and Agent glyphs.
• scripts/build-textures.mjs converts the frozen vector/raster sources into deterministic RGBA textures.
• scripts/audio/ synthesizes the isolated effects and final SFX timeline without external samples.
• scripts/verify-runtime.mjs checks the composition through the public browser preview.
• tests/ protects motion geometry, asset integrity, determinism, and the public repository contract.

Rebuild the audio

npm run audio:generate:sfx
npm run audio:encode

Or run both steps with npm run audio:build. The generator writes a lossless WAV first; FFmpeg encodes the MP3 used by the composition. See Sound design for the cue map and synthesis vocabulary.

Customize and remix

Start with Customization. Keep all production state derived from the absolute frame, register a paused timeline on window.__timelines, and run npm run check after changing geometry or timing.

Licensing

• Composition source, scripts, tests, and documentation: MIT, see LICENSE.
• Rendered isolated SFX and the SFX-only timeline: CC0 1.0. They may be copied, changed, redistributed, or used commercially without permission or attribution. See assets/audio/LICENSE.md.
• Manrope and IBM Plex Mono font files: SIL Open Font License 1.1, see the license files under assets/fonts/.
• The bundled OOMOL and Open Connector artwork is included with OOMOL's approval for identifying this repository and demo. It is excluded from MIT and the CC0 audio dedication.
• No third-party application or Agent logo artwork is bundled. Their visible nodes are generated neutral geometry; names retained in source data are nominative identifiers.
• GSAP is installed under its own Standard “No Charge” License, not MIT.

Open Connector, OOMOL, and third-party names and trademarks remain the property of their respective owners. References identify the demonstrated integration flow and do not imply endorsement. See assets/ATTRIBUTION.md and THIRD_PARTY_NOTICES.md for the exact boundary.

About HyperFrames

HyperFrames authors video as HTML and renders it deterministically through a browser and FFmpeg. Install its agent skills with npx skills add heygen-com/hyperframes, or read the official project for the CLI and composition contract.