astra-chatgpt-hyperframes README

The project's README from github.com/Tejashmakwana/astra-chatgpt-hyperframes. As one markdown file: README.md.

Rajmoni | Motion Designer (@Nexaabyraj) — original tweet

Astra still can't do motion design like me .

So Astra made this ChatGPT-themed response in Hyperframes. Here are the source, raw reference, assets, and render commands so you can inspect the process and reproduce the video yourself.

Credit and method: Rajmoni created the original motion design. This project adapts that supplied reference: 180 text-cleared source frames preserve its backgrounds and control animations, while JavaScript renders the replacement ChatGPT typography. The result is a reference-based adaptation, not original motion invented from scratch. The finished MP4 is a comparison artifact; the renderer does not play or transcode that file to produce its output.

Watch the included final video · Raw reference · Frame analysis · Verified reproduction

Scene contact sheet

Render it

Requires Node.js 22+ (tested with 25.5.0), FFmpeg/FFprobe with libx264, Chrome, and at least 1 GB free space. macOS, Linux and Windows can run Hyperframes. The delivered render was made on macOS; see the reproducibility notes below.

git clone https://github.com/Tejashmakwana/astra-chatgpt-hyperframes.git
cd astra-chatgpt-hyperframes
npm ci --ignore-scripts

Read Switzer's Fontshare license, then download the exact hashed font from its official CDN:

npm run setup -- --accept-font-license
npm run check
npm run render

The result is output/chatgpt-blue.mp4. Run npm run compare to compare its decoded frames against the included delivered video. A fresh install and render on the recorded macOS environment produced a byte-for-byte identical MP4, documented in the linked verification report. Rendering is local. No model API, API key, private prompts, or agent tooling is needed.

If Chrome is not installed, run npx hyperframes browser ensure first. An existing browser can be selected using HYPERFRAMES_BROWSER_PATH. Set FFmpeg and FFprobe on your system PATH. npm run preview opens the editable composition in Hyperframes Studio.

Render on GitHub

Fork this repository, open Actions → Render video → Run workflow, and accept the linked font license if you agree to its terms. Download chatgpt-blue-render from the finished run. The Linux workflow renders the same composition; use the reproducibility notes below when comparing exact pixels.

What runs

  1. Verify hashes of the 180 source plates, audio, raw reference and comparison video, plus the separately downloaded font.
  2. Run the HTML/canvas composition through Hyperframes 0.8.29, rendering 360 lossless PNG frames.
  3. Encode H.264 at 1920×1080, 24 fps with explicit BT.709 conversion.
  4. Copy the original AAC packets and verify the full decode, frame count and audio hash.

The 15-second video consists of two identical 7.5-second visual loops. The original audio continues to 15.061 seconds. Output validation is saved to output/verification.json.

Source map

File Purpose
index.html Hyperframes composition, dimensions and audio track
film.js Editable title, prompt and results typography; frame seeking
assets/tracks.js Per-frame positions measured from the reference
assets/plates/*.png Cleaned source backgrounds and controls
assets/reference.m4a Reference soundtrack, copied without re-encoding
reference/original.mp4 Supplied reference used to build the plates
scripts/build-reference-plates.py Inspectable plate cleanup and motion tracking
scripts/render.mjs Actual Hyperframes render and FFmpeg encode
examples/chatgpt-blue.mp4 Delivered comparison video; never used as render input

To regenerate the cleaned plates, install the optional Python dependencies and run:

python3 -m pip install -r requirements.txt
python3 scripts/build-reference-plates.py

The committed plates are the reproducible baseline. Regenerating them with different image-library versions may change PNG hashes; asset validation intentionally detects that.

Reproducibility and attribution

Dependencies and the font hash are pinned. The committed assets and timing reproduce this composition. Browser versions, operating-system font rasterization, the system monospace font in the initial prompt, and FFmpeg builds can change individual pixels or encoded bytes. This repository does not promise a byte-identical MP4 on every OS. The included comparison video and verification report let you check the result rather than relying on a claim.

Original motion/reference: Rajmoni / @Nexaabyraj, linked above. Switzer is by Jeremie Hornus / Indian Type Foundry, supplied through Fontshare. The font is downloaded separately and is not redistributed in this repository. ChatGPT/OpenAI names remain their respective owners' trademarks. This is an independent experiment, not an official OpenAI release or an endorsement by the reference designer.

The tweet quotation above is transcribed from the project brief and linked to its source. Media and source-derived plates retain their original owners' rights; attribution does not grant a new license to those assets. See THIRD_PARTY.md.

astra-chatgpt-hyperframes (Tejashmakwana/astra-chatgpt-hyperframes)

Searching Database…

140 ·GitHub
Astra-chatgpt-hyperframes
What is this?This is the reproducible source for a ChatGPT-themed motion-design video, adapted from motion designer Rajmoni's (@Nexaabyraj) original reference and rendered with Hyperframes. It ships the raw assets, render scripts and a verification report so anyone can rebuild the exact MP4.
Is this a reusable tool or a one-off project?It's a self-contained reproducibility case study for a single video, not a general-purpose library: the repo bundles one specific Hyperframes composition (index.html, film.js, per-frame assets) built to recreate one reference animation.
How do I render the video myself?Install the dependencies, then run `npm run render`, which drives the Hyperframes composition through Chrome to produce 360 lossless PNG frames and encodes them with FFmpeg into output/chatgpt-blue.mp4. Use `npm run compare` to check the result against the included delivered video.
What do I need installed before rendering?Node.js 22+ (tested with 25.5.0), FFmpeg/FFprobe with libx264, Chrome, and at least 1 GB free disk space. If Chrome isn't installed, `npx hyperframes browser ensure` sets it up, and FFmpeg/FFprobe must be on PATH.
Will my render be byte-for-byte identical to the original?Not guaranteed. Browser versions, OS font rasterization and FFmpeg builds can shift individual pixels or encoded bytes, so the project only promises a checkable comparison, not a universal byte-identical output.
Which operating systems can run this?macOS, Linux and Windows can all run Hyperframes and render the project; the delivered reference render was done on macOS, and a GitHub Actions workflow runs the same render on Linux.
Do I need an OpenAI API key or internet access to render it?No. Rendering runs entirely locally with no model API, API key, prompts or agent tooling involved.
What is Hyperframes?Hyperframes is the JavaScript HTML/canvas rendering engine (version 0.8.29 here) used to compose the animation frame-by-frame before FFmpeg encodes them into video.
Can I render it without installing anything locally?Yes - fork the repo, open Actions -> Render video -> Run workflow, accept the linked Fontshare font license, and download the chatgpt-blue-render artifact from the finished run.
What does the final 15-second video actually contain?Two identical 7.5-second visual loops encoded at 1920x1080, 24fps H.264, with the original AAC audio track copied without re-encoding and continuing to 15.061 seconds.
Why isn't this called original motion design?The 180 source plates preserve Rajmoni's original backgrounds and control animations; only the ChatGPT typography is newly rendered in JavaScript, making it an adaptation rather than motion invented from scratch.
What are similar projects?procedural-film, PDoomVideo, onetake, lemo-opuscar, ClaudeAnimationBase, huashu-art-motion, motion-video-kit, world-execute-me-dsh-pv
Which topics is it in?headless-chrome, renderer, reproducible-research, motion-graphics, fonts, creative-coding, chrome, canvas, video-processing, ffmpeg, github-actions, chatgpt
Creator
Tejashmakwana
Size
21.4 MB
Stars
140
Updated
CommitSep 06
Age
1mo
Commits · 90 Days