Web & Frontendlow risk

8-bit-orbit-video-template

Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

nexu-io/open-design·skills/8-bit-orbit-video-template/SKILL.md
59/ 100Recommendation
↓

Install this skill

Choose your coding agent and copy a project or personal installation command.

Pinned to the indexed commit
Project installation.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a codex -y
Personal installation~/.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a codex -g -y
Manual folder.agents/skills/8-bit-orbit-video-templateOfficial docs ↗
Project installation.claude/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a claude-code -y
Personal installation~/.claude/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a claude-code -g -y
Manual folder.claude/skills/8-bit-orbit-video-templateOfficial docs ↗
Project installation.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a github-copilot -y
Personal installation~/.copilot/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a github-copilot -g -y
Manual folder.agents/skills/8-bit-orbit-video-templateOfficial docs ↗
Project installation.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a cursor -y
Personal installation~/.cursor/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a cursor -g -y
Manual folder.agents/skills/8-bit-orbit-video-templateOfficial docs ↗
Project installation.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a gemini-cli -y
Personal installation~/.gemini/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a gemini-cli -g -y
Native Gemini CLIgemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path skills/8-bit-orbit-video-template
Manual folder.agents/skills/8-bit-orbit-video-templateOfficial docs ↗
⚠ Installation uses the open-source skills CLI. Inspect the source and permissions before running the command.

Skill instructions

View source on GitHub ↗
# 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>
```