HyperFrames is a Node package, so GitHub Actions can render any composition on a fresh ubuntu-latest runner — no AE license, no Lambda, no proprietary cloud. Render in matrix, upload artifacts, and post review links to the PR.
The first job renders every aspect ratio in parallel. The second job downloads the artifacts and posts links into the PR. Reviewers see frame-accurate output the moment the workflow turns green.
# .github/workflows/render.yml
name: Render video variants
on:
pull_request:
paths:
- "compositions/**"
- "brand/**"
permissions:
contents: read
pull-requests: write
jobs:
render:
runs-on: ubuntu-latest
strategy:
matrix:
aspect: ["16:9", "9:16", "1:1"]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- name: Install
run: npm i -g hyperframes
- name: Render
run: |
hyperframes render compositions/launch.html \
--aspect ${{ matrix.aspect }} \
--out ./dist/launch-${{ matrix.aspect }}.mp4
- name: Upload artifact
uses: actions/upload-artifact@v4
with:
name: launch-${{ matrix.aspect }}
path: ./dist/launch-${{ matrix.aspect }}.mp4
comment:
needs: render
runs-on: ubuntu-latest
steps:
- uses: actions/download-artifact@v4
- name: Post PR comment
uses: peter-evans/create-or-update-comment@v4
with:
issue-number: ${{ github.event.pull_request.number }}
body: |
Renders ready:
- 16:9 → ${{ steps.upload.outputs.artifact-url-16x9 }}
- 9:16 → ${{ steps.upload.outputs.artifact-url-9x16 }}
- 1:1 → ${{ steps.upload.outputs.artifact-url-1x1 }}hyperframes lintvalidates HTML structure, timing attributes and asset references. Run it as a fast pre-render gate to fail PRs that won't render before you spend GPU-minutes finding out.
# .github/workflows/lint.yml
name: Lint compositions
on: [pull_request]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm i -g hyperframes
- run: hyperframes lint compositions/**/*.htmlStop waiting on Slack screenshots. Reviewers play the MP4 right next to the diff.