hyperframes-creative

Files (1)

• SKILL.md

SKILL.md (first lines)

# HyperFrames Creative

## Color Palettes

- **Corporate / SaaS**: deep navy + white + one accent (electric blue, teal, or green)
- **Consumer / Lifestyle**: warm neutrals + saturated accent
- **Tech / Developer**: dark background (#0d1117) + monochrome + neon accent
- **Healthcare / Finance**: muted blues + greens + white space
- **Creative / Agency**: bold contrasts, duotone, or gradient washes

```css
:root {
  --bg:       #0d1117;
  --surface:  #161b22;
  --accent:   #58a6ff;
  --accent-2: #3fb950;
  --text:     #e6edf3;
  --muted:    #8b949e;
}
```

## Typography

| Style | Font | Usage |
|---|---|---|
| Display / Hero | Inter, Sora, Outfit | headlines, titles |
| Body | Inter, DM Sans | narration text, bullets |
| Code / Tech | JetBrains Mono, Fira Code | code overlays |
| Editorial | Playfair Display, Lora | documentary, explainer |

```css
.hero-title   { font-size: 96px; font-weight: 900; line-height: 1.05; }
.section-title{ font-size: 64px; font-weight: 700; line-height: 1.1; }
.body-lg      { font-size: 36px; font-weight: 400; line-height: 1.5; }
.caption      { font-size: 24px; font-weight: 400; line-height: 1.6; }
```

## Narration Writing

1. One idea per sentence.
2. Active voice.
3. Narration leads visuals by 0.5s.
4. ~130–150 words per minute in TTS.
5. Insert `[pause]` or `[pause 0.5s]` for breath room.

```html
<div data-hf-clip data-hf-tts="Welcome to the overview. [pause] Let's start with the dashboard."
     data-hf-tts-voice="en-US-neural-f1" data-hf-start="1s"></div>
```

## Beat Sheet Template

```
00:00 — HOOK      Open with the problem or bold claim
00:05 — CONTEXT   Establish who this is for
00:15 — DEMO 1    First feature or proof point
00:30 — DEMO 2    Second feature, builds on first
00:45 — SOCIAL    Quote, stat, or proof
00:55 — CTA       Call to action, URL, next step
01:00 — END CARD  Logo hold, music fade
```

- **Hook**: fast cuts, < 2s per clip, music up
- **Demo**: 3–5s per clip, narration drives
- **CTA**: hold ≥ 3s

## Visual Hierarchy Checklist

- [ ] One dominant element per scene
- [ ] Text contrast ratio ≥ 4.5:1
- [ ] Key message in first 3 seconds
- [ ] CTA has accent color
- [ ] Logo in opening and closing scenes

From christiansalazar-wk/ai-lore, MIT.

More from christiansalazar-wk/ai-lore