diff --git a/skills/hyperframes/templates/presentations/8-bit-orbit/design.html b/skills/hyperframes/templates/presentations/8-bit-orbit/design.html index 93b32ec0e5..24709e27fe 100644 --- a/skills/hyperframes/templates/presentations/8-bit-orbit/design.html +++ b/skills/hyperframes/templates/presentations/8-bit-orbit/design.html @@ -5,301 +5,736 @@ __NAME__ — Design System - - + + + + + - - -
-
-
__NAME__
- + +
+ + +
+
8-Bit Orbit
+ +
Onlinev1.0
-
-

__NAME_LINE1____NAME_LINE2__.

+ +
+
+
SYS_LOAD  ·  № 004
+
● READY
+
+

8-BIT
ORBIT.

+
▸ PRESS START
-
Template8-bit-orbit
-
Typesystem-ui
-
Accent__ACCENT_LABEL__
-
Doc07 sections · __SLIDE_COUNT__ templates
+
DISCIPLINEGaming · Web3 · Indie
+
DISPLAY TYPEPRESS START 2P
+
ACCENTCYAN + MAGENTA
+
BUILD06 · 10 FRAMES
-
+ +
-
— Manifesto
-

Pixel-art neon arcade aesthetic on a deep navy void.

+
// MANIFESTO
+

type is display. color is signal. the page is a CRT. nothing is anti-aliased.

-
+ +
-
01 — Palette
-

four colors.

-

__PALETTE_LEDE__

+
01 // PALETTE
+

FOUR
PIXELS.

+

Deep navy as the void. Cream paper for legible HUD text. Cyan for friendlies, magenta for hostiles. No anti-aliasing, no in-between.

-
Primary
__PRIMARY_NAME__
__PRIMARY__
Ink on dark.
-
Secondary
__SECONDARY_NAME__
__SECONDARY__
Canvas.
-
Tertiary
__TERTIARY_NAME__
__TERTIARY__
Muted. Borders.
-
Accent
__ACCENT_NAME__
__ACCENT__
Signal. Reserved.
+
01 // PAPER
CREAM
__PRIMARY__
Legible body type on dark.
+
02 // VOID
DEEP
__SECONDARY__
The canvas. The CRT off-state.
+
03 // PLAYER
CYAN
__TERTIARY__
Friendly signal. UI primary.
+
04 // ENEMY
MAGENTA
__ACCENT__
Hostile signal. Alert states.
-
+ +
-
02 — Typography
-

type scale.

+
02 // TYPOGRAPHY
+

PIXELS,
ALL THE WAY DOWN.

+

Press Start 2P carries display + headlines. VT323 runs body — a real terminal face, never anti-aliased. Silkscreen for the smallest chrome.

-
Displaysystem-ui
hello world.
-
H1system-ui
chapter one
-
H2system-ui
Slide headlines.
-
Bodysystem-ui

Body copy below 24px is forbidden in video compositions.

-
Labelmonospace
// chrome · labels · metadata
+
DISPLAYPress Start 2P11vw · letter-spacing 0.01em
HELLO WORLD.
+
HEADING 01Press Start 2P6vw · cyan + glow
CHAPTER 1
+
HEADING 02Press Start 2P4vw · drop shadow
SLIDE TITLE
+
LEADVT323 4002.2vw · terminal face
The lead carries the brief in a single screen of CRT text.
+
BODYVT323 40022px · 1.5 · 60ch

PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS. The body face is VT323 — a faithful terminal font. Use it for everything readable. Body copy below 24px is forbidden in 1080p compositions.

+
LABELPress Start 2P12px · 0.04em · lemon
// HUD · STATS · COIN: 0042
-
+ +
-
03 — Surface
-

corners. depth.

+
03 // SURFACE
+

PIXEL
BORDERS.

+

3-pixel solid borders. Offset shadows in stepped colours — never blurred. Glow is reserved for accent text only.

- // example -

example card.

-

Configured corners, padding, shadow.

+ // CARD · DEMO +

EXAMPLE CARD.

+

Configured border, padding, and stepped shadow. Glow is rare — only on text that wants to be remembered. Surfaces stay flat; the CRT does the lifting.

+
042
% READ-RATE
    -
  • Corners__CORNER_RADIUS__
    • -
  • Padding__PADDING__
    • -
  • Gap__GAP__
    • -
  • Elevation__ELEVATION__
    • -
  • Density__DENSITY__
    • +
  • // BORDER3 PX
    • +
  • // RADIUS0 PX
    • +
  • // SHADOW6 6 0
    • +
  • // PADDING28 PX
    • +
  • // GLOWaccent only
    • +
  • // DENSITYHIGH
-
+ +
-
04 — Motion
-

__EASING_HEADLINE__

-

__EASING_LEDE__

+
04 // MOTION
+

STEPPED.
NEVER SMOOTH.

+

Motion is quantized — every frame snaps. Use steps() easings to keep the 30Hz CRT feeling. Glow may pulse on a 1-second blink.

-
// easing
-

__EASING_NAME__

-

__EASING_DESC__

- 
__EASING_VALUE__
+ // EASING +

steps(8)

+

Default. Eight discrete frames from A to B — no in-between. The page snaps like a sprite move. Use for entrances, transitions, hover states.

+ 
transition: transform .25s steps(8);
+animation: blink 1.4s steps(2) infinite;
-
// duration
-

__DURATION_DEFAULT__

-

__DURATION_DESC__

- 
__DURATION_VALUES__
+ // TIMING +

1.4s BLINK

+

The cursor blink — 1.4 seconds, two steps. Apply it to alerts, prompts, and anything waiting for input.

+ 
--dur-blink: 1.4s;
+--dur-step:  .25s;
+--dur-load:  3.0s;
-
+ +
-
05 — Background
-

__BG_HEADLINE__

-

__BG_LEDE__

-
-
-
// __BG_BADGE__
-
-
    -
  • Geometry__BG_TYPE__
    • -
  • Density__BG_DENSITY__
    • -
  • Speed__BG_SPEED__
    • -
  • Strength__BG_STRENGTH__
    • -
  • Grain__BG_GRAIN__
    • -
-
// shader config -
__SHADER_CONFIG__
-
-
// vertex shader -
__SHADER_VERTEX__
-
-
// fragment shader -
__SHADER_FRAGMENT__
-
-
-
-
- -
-
-
06 — Guidelines
-

do and don’t.

+
05 // RULES
+

OK.
NO.

+

The CRT enforces these. Break any and the illusion collapses.

-

do.

    __DOS__
-

don't.

    __DONTS__
+

OK.

    +
  • Render every border 3px solid, every shadow stepped, never blurred.
    • +
  • Use cyan for friendly signal, magenta for hostile or accent.
    • +
  • Set every face in Press Start 2P, VT323, or Silkscreen.
    • +
  • Quantize all motion with steps() easings.
    • +
  • Reserve glow text-shadow for the one element that matters.
    • +
+

NO.

    +
  • Anti-alias borders or shadows. Hard pixels only.
    • +
  • Use rounded corners, gradients, or anti-aliased SVG.
    • +
  • Apply glow to body text — only to accent display.
    • +
  • Use smooth cubic-bezier easings — the CRT runs in steps.
    • +
  • Use pure black for the canvas — always the navy variant.
    • +
-
+ +
-
07 — Templates
-

__SLIDE_COUNT_WORD__
frames.

+
06 // FRAMES
+

TEN
SCREENS.

+

The full template library at 1920×1080. Each thumbnail is the live slide, scaled.

-