8 Bit Orbit Video Template
Bootstrap a multi-scene Hyperframes HTML-to-video deck with retro 8-bit motion, transitions, and debounced HTML preview.
Overview
8-bit-orbit-video-template is an agent skill for the Build phase that scaffolds a Hyperframes retro pixel HTML-to-video deck with preview and render-ready timelines.
Install
npx skills add https://github.com/nexu-io/open-design --skill 8-bit-orbit-video-templateWhat is this skill?
- Template-mode Hyperframes skill with `assets/template.html` → `index.html` copy workflow
- Default 3-scene retro pixel orbit showcase with advanced transitions under ~3s per page
- Open Design metadata: html preview with debounce-100 reload
- Hosted MP4 showcase URL for example parity
- Deterministic timeline behavior for render-ready motion decks
- 3-scene default deck structure
- Each page under 3 seconds (example prompt target)
- debounce-100 HTML preview reload
Adoption & trust: 825 installs on skills.sh; 61.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a polished retro motion deck but lack a structured Hyperframes template, transition patterns, and preview loop for HTML-to-video export.
Who is it for?
Indie makers producing branded launch or demo videos via Open Design Hyperframes without building transitions from scratch.
Skip if: Builders who need native mobile UI templates, live data dashboards, or video pipelines outside Hyperframes HTML composition.
When should I use this skill?
User asks for hyperframes video template, pixel motion deck, retro presentation video, or 8-bit orbit multi-scene HTML composition.
What do I get? / Deliverables
You get `index.html` derived from the asset template, a working example preview, and a scene timeline tuned for short 8-bit orbit segments ready to render.
- index.html composition from assets/template.html
- example.html with debounced preview entry
- Multi-scene retro orbit timeline ready for MP4 render
Recommended Skills
Journey fit
Build is where you assemble branded motion assets and landing or launch collateral before distribution workflows in Launch. Frontend subphase matches HTML timeline compositions, interactive preview entry (`example.html`), and file outputs (`index.html`, `template.html`).
How it compares
Hyperframes template skill with bundled motion preset—not a generic screen-recording workflow or static Figma-to-code handoff.
Common Questions / FAQ
Who is 8-bit-orbit-video-template for?
Solo builders and small teams using Open Design who want a ready retro pixel video deck with Hyperframes preview and export conventions.
When should I use 8-bit-orbit-video-template?
During Build while composing launch or marketing motion in HTML, when you need multi-scene transitions and a default showcase under three seconds per page.
Is 8-bit-orbit-video-template safe to install?
It writes project HTML and pulls a hosted showcase MP4; review the Security Audits panel on this page and vet remote asset URLs in your environment policy.
SKILL.md
READMESKILL.md - 8 Bit Orbit Video Template
# Hyperframes Video Template Ship a premium template-mode Hyperframes composition with a ready default showcase and deterministic timeline behavior. ## Resource map ```text 8-bit-orbit-video-template/ ├── SKILL.md ├── assets/ │ └── template.html ├── references/ │ └── checklist.md └── example.html ``` The rendered MP4 showcase used by `example.html` is hosted at `https://repo-assets.open-design.ai/resources/videos/skills/8-bit-orbit-video-template/default-showcase.mp4`. ## Workflow 1. Copy `assets/template.html` to `index.html`. 2. Keep the 3-scene structure and transition rhythm intact unless the user explicitly asks to change pacing. 3. Personalize titles, subtitle lines, labels, and palette while preserving the retro pixel aesthetic. 4. Keep timing constraint: every scene hold should stay within 3 seconds. 5. Preserve deterministic behavior in generated compositions (no unseeded randomness, no infinite GSAP loops). 6. Keep all code self-contained in one HTML file with inline CSS/JS. 7. Validate against `references/checklist.md` before emitting the artifact. ## Output contract Emit one short sentence before the artifact, then a single HTML artifact: ```xml <artifact identifier="8-bit-orbit-video-template" type="text/html" title="8-Bit Orbit Video Template"> <!doctype html> <html>...</html> </artifact> ```