8 Bit Orbit Video Template
- 1.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
|
About
The 8 bit orbit video template skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "hyperframes video template"; "video template"; "pixel motion deck"; "retro presentation video". Reference commands include The rendered MP4 showcase used by `example.html` is hosted at; 1. Copy `assets/template.html` to `index.html`.. Use when developers or agents need structured guidance for 8 bit orbit video template tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "hyperframes video template" "video template" "pixel motion deck" "retro presentation video" "Hyperframes 模板" "视频模板" "像素风动效" template.html |
- "hyperframes video template"
- "video template"
- "pixel motion deck"
- "retro presentation video"
- "Hyperframes 模板"
8 Bit Orbit Video Template by the numbers
- 1,786 all-time installs (skills.sh)
- +121 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #156 of 1,340 Generative Media skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
8-bit-orbit-video-template capabilities & compatibility
- Capabilities
- "hyperframes video template" · "video template" · "pixel motion deck" · "retro presentation video" · "hyperframes 模板"
- Use cases
- planning
What 8-bit-orbit-video-template says it does
"hyperframes video template"
npx skills add https://github.com/nexu-io/open-design --skill 8-bit-orbit-video-templateAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
How do I handle 8 bit orbit video template tasks with agent guidance?
|
Who is it for?
Teams needing documented 8 bit orbit video template workflows.
Skip if: Generic advice without reading bundled docs.
When should I use this skill?
|
What you get
Structured workflow from 8 bit orbit video template documentation applied to the user request.
- index.html video composition
- example.html interactive preview
Files
Hyperframes Video Template
Ship a premium template-mode Hyperframes composition with a ready default showcase and deterministic timeline behavior.
Resource map
8-bit-orbit-video-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.htmlThe 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:
<artifact identifier="8-bit-orbit-video-template" type="text/html" title="8-Bit Orbit Video Template">
<!doctype html>
<html>...</html>
</artifact><!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
:root {
--bg-deep: #07133e;
--grid-cyan: #4fd2f0;
--ink: #0f1f4b;
--arcade-yellow: #ffe75c;
--arcade-pink: #f4b8d7;
--arcade-cyan: #5ad9f8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 1920px;
height: 1080px;
overflow: hidden;
background: #030a24;
font-family: "Chakra Petch", sans-serif;
}
#root {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
}
.scene {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.scene.live {
opacity: 1;
pointer-events: auto;
}
.frame {
position: absolute;
inset: 22px;
border: 2px solid #74d7ff20;
z-index: 20;
pointer-events: none;
}
.scanlines {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
180deg,
transparent 0 2px,
#ffffff08 2px 4px
);
mix-blend-mode: soft-light;
z-index: 55;
pointer-events: none;
}
.noise {
position: absolute;
inset: 0;
z-index: 56;
opacity: 0.15;
pointer-events: none;
background-image: radial-gradient(#ffffff17 0.6px, transparent 0.6px);
background-size: 3px 3px;
}
.cursor-glow {
position: absolute;
width: 420px;
height: 420px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, #5ad9f866 0%, #5ad9f81a 48%, transparent 78%);
z-index: 40;
pointer-events: none;
}
.dots {
position: absolute;
top: 428px;
right: 56px;
z-index: 70;
display: flex;
flex-direction: column;
gap: 12px;
}
.dots i {
width: 11px;
height: 11px;
border: 2px solid #79e0ff;
opacity: 0.35;
}
.dots i.active {
background: #79e0ff;
opacity: 1;
}
.pager {
position: absolute;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
padding: 6px 18px;
border: 2px solid #1d3a74;
background: #08183fbb;
color: #7ee7ff;
font-family: "Press Start 2P", monospace;
font-size: 14px;
letter-spacing: 0.12em;
z-index: 70;
}
.s1 {
background: radial-gradient(circle at 50% 32%, #112a73 0%, #07133e 44%, #030a24 100%);
}
.s1-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(#3a86c022 1px, transparent 1px),
linear-gradient(90deg, #3a86c022 1px, transparent 1px);
background-size: 45px 45px;
}
.star {
position: absolute;
width: 3px;
height: 3px;
background: #e8faff;
box-shadow: 0 0 10px #9be8ff;
}
.s1-wrap {
position: absolute;
inset: 150px 0 0;
text-align: center;
color: #dff9ff;
}
.micro {
font-family: "Press Start 2P", monospace;
font-size: 14px;
letter-spacing: 0.25em;
color: #c6eeff;
opacity: 0.9;
}
.hero {
margin-top: 52px;
font-family: "Press Start 2P", monospace;
font-size: 108px;
line-height: 1.06;
color: #5dd8ff;
text-shadow: 6px 6px 0 #ffe75c;
}
.sub {
margin: 46px auto 0;
max-width: 860px;
font-size: 36px;
line-height: 1.4;
color: #d9ecff;
font-weight: 500;
}
.pill-row {
margin-top: 44px;
display: flex;
justify-content: center;
gap: 16px;
}
.pill {
border: 2px solid #ffed87;
color: #ffed87;
padding: 10px 18px;
font-family: "Press Start 2P", monospace;
font-size: 13px;
}
.s2 {
background:
radial-gradient(circle at 15% 10%, #ffd8ec 0%, #f5bad8 38%, #e9a8cc 100%);
}
.s2-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(#1f3e7140 1px, transparent 1px),
linear-gradient(90deg, #1f3e7140 1px, transparent 1px);
background-size: 36px 36px;
}
.s2-body {
position: absolute;
inset: 130px 0 0;
text-align: center;
color: #132b5f;
}
.title {
margin-top: 26px;
font-size: 92px;
font-weight: 700;
}
.timeline {
position: relative;
width: 980px;
margin: 66px auto 0;
height: 540px;
}
.line {
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 4px;
margin-left: -2px;
background: repeating-linear-gradient(180deg, #173a73 0 16px, transparent 16px 28px);
}
.node {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 26px;
height: 26px;
background: var(--arcade-yellow);
border: 4px solid #173a73;
}
.node.cyan { background: var(--arcade-cyan); }
.item {
position: absolute;
width: 380px;
text-align: left;
}
.item.right { left: 548px; }
.item.left { left: 54px; text-align: right; }
.tag {
display: inline-block;
padding: 5px 8px;
border: 2px solid #173a73;
font-family: "Press Start 2P", monospace;
font-size: 11px;
}
.item h4 {
margin-top: 12px;
font-size: 36px;
line-height: 1.1;
}
.item p {
margin-top: 10px;
font-size: 22px;
line-height: 1.3;
opacity: 0.8;
}
.s3 {
background: radial-gradient(circle at 35% 0%, #f5f4ff 0%, #eeedfd 50%, #e8e8fb 100%);
}
.s3-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(#2a447c1e 1px, transparent 1px),
linear-gradient(90deg, #2a447c1e 1px, transparent 1px);
background-size: 38px 38px;
}
.s3-body {
position: absolute;
inset: 180px 240px 120px;
color: #112962;
}
.s3-title {
text-align: center;
margin-top: 18px;
font-size: 82px;
font-weight: 700;
}
.bars {
margin-top: 70px;
display: grid;
gap: 26px;
}
.bar-row {
display: grid;
grid-template-columns: 160px 1fr 72px;
align-items: center;
gap: 22px;
font-size: 28px;
font-weight: 600;
}
.track {
height: 36px;
background: #cfd5eb;
position: relative;
}
.fill {
position: absolute;
left: 0;
top: 0;
height: 36px;
width: 0;
background: #173a73;
border-right: 4px solid var(--arcade-yellow);
}
.fill.cyan {
background: var(--arcade-cyan);
}
.fill.pink {
background: var(--arcade-pink);
}
</style>
</head>
<body>
<div
id="root"
data-composition-id="main"
data-start="0"
data-duration="8.7"
data-width="1920"
data-height="1080"
>
<div class="cursor-glow" id="glow"></div>
<div class="frame"></div>
<div class="scanlines"></div>
<div class="noise"></div>
<div class="dots" id="dots"><i class="active"></i><i></i><i></i></div>
<div class="pager" id="pager">01 / 03</div>
<section class="scene s1 live" id="s1">
<div class="s1-grid"></div>
<div id="stars"></div>
<div class="s1-wrap">
<div class="micro">PIXEL PERFECT PRESENTATION SYSTEM</div>
<div class="hero" id="s1-title">8-BIT<br />ORBIT</div>
<div class="sub">A retro-futuristic deck engine for bold storytellers. Built for arcades, engineered for boardrooms.</div>
<div class="pill-row">
<div class="pill">16 SLIDES</div>
<div class="pill">C88 NATIVE</div>
<div class="pill">ZERO DEPENDENCIES</div>
</div>
</div>
</section>
<section class="scene s2" id="s2">
<div class="s2-grid"></div>
<div class="s2-body">
<div class="micro">CHRONOLOGY</div>
<div class="title">Development Roadmap</div>
<div class="timeline">
<div class="line"></div>
<div class="node" style="top: 48px"></div>
<div class="item left" style="top: 14px">
<div class="tag">Q1. 1986</div>
<h4>Concept & Architecture</h4>
<p>Wireframes, palette selection, and core grid system established.</p>
</div>
<div class="node" style="top: 178px"></div>
<div class="item right" style="top: 148px">
<div class="tag">Q2. 1989</div>
<h4>Asset Generation</h4>
<p>Pixel components, iconography, and atmospheric effects coded.</p>
</div>
<div class="node cyan" style="top: 316px"></div>
<div class="item left" style="top: 284px">
<div class="tag">Q3. 1990</div>
<h4>Data Integration</h4>
<p>Charting engine, animated counters, and dynamic state binding.</p>
</div>
<div class="node cyan" style="top: 446px"></div>
<div class="item right" style="top: 414px">
<div class="tag">Q4. 2000</div>
<h4>Global Launch</h4>
<p>Public release with full documentation and community support.</p>
</div>
</div>
</div>
</section>
<section class="scene s3" id="s3">
<div class="s3-grid"></div>
<div class="s3-body">
<div class="micro" style="text-align: center">SYSTEM LOAD</div>
<div class="s3-title">Resource Allocation</div>
<div class="bars">
<div class="bar-row"><span>Compute</span><div class="track"><div class="fill" data-w="88"></div></div><span>88%</span></div>
<div class="bar-row"><span>Storage</span><div class="track"><div class="fill cyan" data-w="72"></div></div><span>72%</span></div>
<div class="bar-row"><span>Network</span><div class="track"><div class="fill pink" data-w="85"></div></div><span>85%</span></div>
<div class="bar-row"><span>Memory</span><div class="track"><div class="fill" data-w="61"></div></div><span>61%</span></div>
<div class="bar-row"><span>Graphics</span><div class="track"><div class="fill cyan" data-w="44"></div></div><span>44%</span></div>
</div>
</div>
</section>
</div>
<script>
window.__timelines = window.__timelines || {};
var scenes = ["s1", "s2", "s3"];
var dots = Array.from(document.querySelectorAll("#dots i"));
var pager = document.getElementById("pager");
function setScene(index) {
scenes.forEach(function (id, i) {
document.getElementById(id).classList.toggle("live", i === index);
dots[i].classList.toggle("active", i === index);
});
pager.textContent = "0" + (index + 1) + " / 03";
}
var starsRoot = document.getElementById("stars");
function mulberry32(seed) {
return function () {
var t = (seed += 0x6d2b79f5);
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
var rand = mulberry32(19860905);
for (var i = 0; i < 90; i++) {
var star = document.createElement("i");
star.className = "star";
star.style.left = Math.round(rand() * 1920) + "px";
star.style.top = Math.round(rand() * 1080) + "px";
star.style.opacity = (rand() * 0.9 + 0.1).toFixed(2);
star.style.transform = "scale(" + (rand() * 1.8 + 0.3).toFixed(2) + ")";
starsRoot.appendChild(star);
}
gsap.to(".star", {
opacity: function (i) { return 0.25 + (i % 5) * 0.15; },
duration: function (i) { return 0.55 + (i % 7) * 0.12; },
repeat: 8,
yoyo: true,
stagger: { each: 0.02 }
});
var T12 = 2.8;
var T23 = 5.6;
var tl = gsap.timeline({ paused: true });
tl.from("#s1 .micro, #s1 .sub, #s1 .pill", {
opacity: 0,
y: 24,
stagger: 0.06,
duration: 0.5,
ease: "power3.out"
}, 0);
tl.from("#s1-title", {
opacity: 0,
scale: 0.75,
y: 60,
duration: 0.75,
ease: "back.out(1.4)"
}, 0.16);
tl.to("#s1-title", { textShadow: "10px 10px 0 #ffe75c", duration: 0.24, yoyo: true, repeat: 1 }, 1.4);
tl.to("#s1", { opacity: 0, duration: 0.34, ease: "power2.inOut" }, T12 - 0.24);
tl.add(function () { setScene(1); }, T12 - 0.06);
tl.from("#s2 .micro, #s2 .title", { opacity: 0, y: 42, duration: 0.46, stagger: 0.06, ease: "power3.out" }, T12 + 0.02);
tl.from("#s2 .line", { scaleY: 0, transformOrigin: "50% 0%", duration: 0.65, ease: "power3.out" }, T12 + 0.18);
tl.from("#s2 .node", { scale: 0, rotation: 90, opacity: 0, stagger: 0.09, duration: 0.3, ease: "back.out(1.9)" }, T12 + 0.35);
tl.from("#s2 .item", { x: -34, opacity: 0, stagger: 0.08, duration: 0.4, ease: "power2.out" }, T12 + 0.45);
tl.to("#s2", { opacity: 0, duration: 0.34, ease: "power2.inOut" }, T23 - 0.24);
tl.add(function () { setScene(2); }, T23 - 0.06);
tl.from("#s3 .micro, #s3 .s3-title", { opacity: 0, y: 36, duration: 0.5, stagger: 0.08, ease: "power3.out" }, T23 + 0.02);
tl.from("#s3 .bar-row", { x: -32, opacity: 0, stagger: 0.06, duration: 0.35, ease: "power2.out" }, T23 + 0.26);
tl.to("#s3 .fill", {
width: function (_, el) { return el.getAttribute("data-w") + "%"; },
duration: 0.85,
stagger: 0.08,
ease: "expo.out"
}, T23 + 0.36);
tl.to("#pager", { y: -4, duration: 0.2, yoyo: true, repeat: 1 }, T23 + 1.4);
window.__timelines.main = tl;
setScene(0);
var root = document.getElementById("root");
var glow = document.getElementById("glow");
root.addEventListener("mousemove", function (e) {
var r = root.getBoundingClientRect();
var x = e.clientX - r.left;
var y = e.clientY - r.top;
gsap.to(glow, { x: x, y: y, duration: 0.3, ease: "power2.out" });
gsap.to(".scene.live", {
backgroundPositionX: (x - 960) * -0.02,
backgroundPositionY: (y - 540) * -0.02,
duration: 0.45,
ease: "power2.out"
});
});
function jumpTo(index) {
if (index === 0) tl.pause(0);
if (index === 1) tl.pause(T12 + 0.6);
if (index === 2) tl.pause(T23 + 0.8);
setScene(index);
}
window.addEventListener("keydown", function (e) {
if (e.key === "1") jumpTo(0);
if (e.key === "2") jumpTo(1);
if (e.key === "3") jumpTo(2);
if (e.key.toLowerCase() === "r") {
tl.restart();
setScene(0);
}
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Hyperframes Video Template Example</title>
<style>
html, body { margin: 0; height: 100%; background: #061236; color: #d9f4ff; font-family: "Chakra Petch", system-ui, sans-serif; }
.top {
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
border-bottom: 1px solid #29447a;
background: #0b1b49;
letter-spacing: 0.06em;
font-size: 12px;
}
.top b { font-size: 12px; color: #8ce9ff; }
.top span { color: #b8d1ff; opacity: 0.9; }
.stage { height: calc(100% - 49px); display: grid; grid-template-columns: 1.2fr 1fr; }
.pane { border-right: 1px solid #203765; }
.pane:last-child { border-right: 0; }
iframe { width: 100%; height: 100%; border: 0; background: #030a24; }
video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
</style>
</head>
<body>
<div class="top">
<b>HYPERFRAMES VIDEO TEMPLATE · DEFAULT SHOWCASE</b>
<span>Left: editable HTML template · Right: rendered MP4 sample</span>
</div>
<div class="stage">
<div class="pane">
<iframe src="./assets/template.html" title="Hyperframes template HTML preview"></iframe>
</div>
<div class="pane">
<video controls preload="metadata" src="https://repo-assets.open-design.ai/resources/videos/skills/8-bit-orbit-video-template/default-showcase.mp4"></video>
</div>
</div>
</body>
</html>
Checklist
P0
assets/template.htmlexists and opens directly from disk.example.htmlrenders both the editable template preview and the default MP4 showcase.- Skill frontmatter uses
od.mode: template,od.surface: video, andod.type: hyperframes. - Base composition includes exactly 3 scenes and each scene hold is under 3 seconds.
- Template keeps deterministic logic (seeded randomness only, no
repeat: -1loops). - Template avoids sandbox-hostile APIs (
localStorage,sessionStorage,alert,confirm,prompt).
P1
- Retro 8-bit visual language remains consistent across all three scenes.
- Scene transitions and entrance choreography are clearly visible at normal playback speed.
- Generated artifact remains a single self-contained HTML file.
P2
- Keyboard preview controls (
1,2,3,r) work in local preview. - Mouse glow/parallax interaction remains subtle and does not hurt readability.
Related skills
Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.442k4.1k
Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k648Ai Video GenerationTurn written prompts into short videos using AI video generation models directly from Cursor or Claude.363k648Ai Avatar VideoGenerate short talking-head videos of custom AI avatars from text prompts.363k648Ai Image GenerationLet their coding agent generate, iterate on, and insert high-quality images directly into web apps, marketing assets, or product features.363k648
Video EditIntelligently route video editing requests to the best RunComfy model without trial-and-error.357k31FAQ
What does 8 bit orbit video template do?
|
When should I invoke 8 bit orbit video template?
|
What are key capabilities?
"hyperframes video template"
Is 8 Bit Orbit Video Template safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
Generative Mediaautomation