mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 14:50:02 +00:00
feat(skills): improve hyperframes composition quality rules (#250)
## Summary
Overhaul the hyperframes composition skill based on 26 eval rounds (~100 generated compositions). The goal: prevent known AI design tells and composition bugs while giving the LLM maximum creative freedom.
### Typography (`fonts.md` → `typography.md`)
- Two-tier banned font list (32 fonts): tier 1 bans training-data defaults, tier 2 bans the reflex replacements
- Font discovery script: queries Google Fonts API, 5 dynamic categories, top 5 randomized per run
- Selection philosophy: register-first thinking, cross-check assumptions
### Google Fonts on-demand (`deterministicFonts.ts`)
- Any Google Font works without pre-bundling — compiler fetches woff2 at compile time
- Cached to `~/.cache/hyperframes/fonts/<slug>/<weight>-<style>.woff2`
- Parallel woff2 fetches via `Promise.allSettled` (was sequential)
- Single `mkdirSync({ recursive: true })` per family (was `existsSync` x11)
- Skip redundant `readFileSync` when buffer is already in memory from fetch
### Layout rules (`SKILL.md`)
- Flexbox with gap for content text — prevents overlap from absolute positioning
- `position: absolute` reserved for decoratives only
- Cards/containers explicitly banned
### Background layer (`house-style.md`)
- 3-5 persistent decorative elements per scene (glows, ghost text, accent lines)
- All decoratives MUST have ambient GSAP animation — static decoratives banned
- WRONG/RIGHT code examples
### Transition rules (`SKILL.md`)
- Always use transitions, always entrance animations, exit animations banned except final scene
- WRONG/RIGHT code examples showing banned exit patterns
### Other
- Flash cut transition removed
- CLAUDE.md: `bun install` / `bun run build` / `bun run test` (was pnpm)
- house-style.md trimmed from 184 to ~80 lines
- SKILL.md trimmed from 364 to ~230 lines
## Test plan
- [ ] `bun install` succeeds, workspace links resolve
- [ ] `bun run build` succeeds
- [ ] `npx hyperframes lint` passes on existing compositions
- [ ] Generate a composition with `/hyperframes` skill — verify flexbox, background decoratives with animation, entrance-only animations, no banned fonts
- [ ] Verify Google Fonts on-demand: use a non-bundled font, run `npx hyperframes preview`
🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Vance Ingalls
@@ -48,11 +48,13 @@ packages/
|
||||
## Development
|
||||
|
||||
```bash
|
||||
pnpm install # Install dependencies
|
||||
pnpm build # Build all packages
|
||||
pnpm test # Run tests
|
||||
bun install # Install dependencies
|
||||
bun run build # Build all packages
|
||||
bun run test # Run tests
|
||||
```
|
||||
|
||||
**This repo uses bun**, not pnpm. Do NOT run `pnpm install` — it creates a `pnpm-lock.yaml` that should not exist. Workspace linking relies on bun's resolution from `"workspaces"` in root `package.json`.
|
||||
|
||||
### Linting & Formatting
|
||||
|
||||
This project uses **oxlint** and **oxfmt** (not biome, not eslint, not prettier).
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
|
||||
import { homedir } from "node:os";
|
||||
import { join } from "node:path";
|
||||
|
||||
import { parseHTML } from "linkedom";
|
||||
import { EMBEDDED_FONT_DATA } from "./fontData.generated.js";
|
||||
|
||||
@@ -204,37 +208,50 @@ function extractRequestedFontFamilies(html: string): Map<string, string> {
|
||||
return requested;
|
||||
}
|
||||
|
||||
function buildFontFaceCss(requestedFamilies: Map<string, string>): {
|
||||
function buildFontFaceRule(familyName: string, src: string, weight: string, style: string): string {
|
||||
return [
|
||||
"@font-face {",
|
||||
` font-family: "${familyName}";`,
|
||||
` src: url("${src}") format("woff2");`,
|
||||
` font-style: ${style};`,
|
||||
` font-weight: ${weight};`,
|
||||
" font-display: block;",
|
||||
"}",
|
||||
].join("\n");
|
||||
}
|
||||
|
||||
async function buildFontFaceCss(requestedFamilies: Map<string, string>): Promise<{
|
||||
css: string;
|
||||
unresolved: string[];
|
||||
} {
|
||||
}> {
|
||||
const rules: string[] = [];
|
||||
const unresolved: string[] = [];
|
||||
|
||||
for (const [normalizedFamily, originalCaseFamily] of requestedFamilies) {
|
||||
// Path 1: pre-bundled fonts via FONT_ALIASES
|
||||
const canonicalKey = FONT_ALIASES[normalizedFamily];
|
||||
if (!canonicalKey) {
|
||||
unresolved.push(originalCaseFamily);
|
||||
if (canonicalKey) {
|
||||
const canonical = CANONICAL_FONTS[canonicalKey];
|
||||
if (!canonical) continue;
|
||||
for (const face of canonical.faces) {
|
||||
const style = face.style || "normal";
|
||||
const src = fontDataUri(canonical.packageName, face.weight, style);
|
||||
rules.push(buildFontFaceRule(originalCaseFamily, src, face.weight, style));
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
const canonical = CANONICAL_FONTS[canonicalKey];
|
||||
if (!canonical) continue;
|
||||
for (const face of canonical.faces) {
|
||||
const style = face.style || "normal";
|
||||
const src = fontDataUri(canonical.packageName, face.weight, style);
|
||||
rules.push(
|
||||
[
|
||||
"@font-face {",
|
||||
` font-family: "${originalCaseFamily}";`,
|
||||
` src: url("${src}") format("woff2");`,
|
||||
` font-style: ${style};`,
|
||||
` font-weight: ${face.weight};`,
|
||||
" font-display: block;",
|
||||
"}",
|
||||
].join("\n"),
|
||||
);
|
||||
// Path 2: fetch from Google Fonts (with local cache)
|
||||
const googleFaces = await fetchGoogleFont(originalCaseFamily);
|
||||
if (googleFaces.length > 0) {
|
||||
for (const face of googleFaces) {
|
||||
rules.push(buildFontFaceRule(originalCaseFamily, face.dataUri, face.weight, face.style));
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// Neither path resolved
|
||||
unresolved.push(originalCaseFamily);
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -263,7 +280,103 @@ function warnUnresolvedFonts(unresolved: string[]): void {
|
||||
);
|
||||
}
|
||||
|
||||
export function injectDeterministicFontFaces(html: string): string {
|
||||
// ---------------------------------------------------------------------------
|
||||
// Google Fonts on-demand fetch + local cache
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const GOOGLE_FONTS_CACHE_DIR = join(homedir(), ".cache", "hyperframes", "fonts");
|
||||
|
||||
// Chrome UA triggers woff2 responses from Google Fonts CSS API
|
||||
const WOFF2_USER_AGENT =
|
||||
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36";
|
||||
|
||||
function fontSlug(familyName: string): string {
|
||||
return familyName
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-|-$/g, "");
|
||||
}
|
||||
|
||||
function fontCacheDir(slug: string): string {
|
||||
const dir = join(GOOGLE_FONTS_CACHE_DIR, slug);
|
||||
if (!existsSync(dir)) {
|
||||
mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
return dir;
|
||||
}
|
||||
|
||||
function cachedWoff2Path(slug: string, weight: string, style: string): string {
|
||||
return join(fontCacheDir(slug), `${weight}-${style}.woff2`);
|
||||
}
|
||||
|
||||
type GoogleFontFace = {
|
||||
weight: string;
|
||||
style: string;
|
||||
dataUri: string;
|
||||
};
|
||||
|
||||
async function fetchGoogleFont(familyName: string): Promise<GoogleFontFace[]> {
|
||||
const slug = fontSlug(familyName);
|
||||
const encodedFamily = encodeURIComponent(familyName);
|
||||
const url = `https://fonts.googleapis.com/css2?family=${encodedFamily}:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700`;
|
||||
|
||||
let cssText: string;
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
headers: { "User-Agent": WOFF2_USER_AGENT },
|
||||
});
|
||||
if (!res.ok) {
|
||||
return [];
|
||||
}
|
||||
cssText = await res.text();
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Parse @font-face blocks from the CSS response
|
||||
const faceRegex =
|
||||
/@font-face\s*\{[^}]*font-style:\s*(normal|italic)[^}]*font-weight:\s*(\d+)[^}]*src:\s*url\(([^)]+)\)\s*format\(['"]woff2['"]\)[^}]*\}/gi;
|
||||
|
||||
const faces: GoogleFontFace[] = [];
|
||||
|
||||
for (const match of cssText.matchAll(faceRegex)) {
|
||||
const style = match[1] || "normal";
|
||||
const weight = match[2] || "400";
|
||||
const woff2Url = match[3] || "";
|
||||
|
||||
if (!woff2Url) continue;
|
||||
|
||||
const cachePath = cachedWoff2Path(slug, weight, style);
|
||||
|
||||
// Check cache first
|
||||
if (!existsSync(cachePath)) {
|
||||
try {
|
||||
const fontRes = await fetch(woff2Url);
|
||||
if (!fontRes.ok) continue;
|
||||
const buffer = Buffer.from(await fontRes.arrayBuffer());
|
||||
writeFileSync(cachePath, buffer);
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
const fontBytes = readFileSync(cachePath);
|
||||
const dataUri = `data:font/woff2;base64,${fontBytes.toString("base64")}`;
|
||||
faces.push({ weight, style, dataUri });
|
||||
}
|
||||
|
||||
if (faces.length > 0) {
|
||||
console.log(
|
||||
`[Compiler] Fetched ${faces.length} font face(s) for "${familyName}" from Google Fonts (cached to ${fontCacheDir(slug)})`,
|
||||
);
|
||||
}
|
||||
|
||||
return faces;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export async function injectDeterministicFontFaces(html: string): Promise<string> {
|
||||
const existingFaces = extractExistingFontFaces(html);
|
||||
const requestedFamilies = extractRequestedFontFamilies(html);
|
||||
const pendingFamilies = new Map<string, string>();
|
||||
@@ -278,7 +391,7 @@ export function injectDeterministicFontFaces(html: string): string {
|
||||
return html;
|
||||
}
|
||||
|
||||
const { css, unresolved } = buildFontFaceCss(pendingFamilies);
|
||||
const { css, unresolved } = await buildFontFaceCss(pendingFamilies);
|
||||
if (!css) {
|
||||
if (unresolved.length > 0) {
|
||||
warnUnresolvedFonts(unresolved);
|
||||
|
||||
@@ -905,7 +905,7 @@ export async function compileForRender(
|
||||
"$1",
|
||||
);
|
||||
|
||||
const coalescedHtml = injectDeterministicFontFaces(
|
||||
const coalescedHtml = await injectDeterministicFontFaces(
|
||||
coalesceHeadStylesAndBodyScripts(promoteCssImportsToLinkTags(sanitizedHtml)),
|
||||
);
|
||||
|
||||
|
||||
+77
-41
@@ -30,31 +30,44 @@ Position every element where it should be at its **most visible moment** — the
|
||||
### The process
|
||||
|
||||
1. **Identify the hero frame** for each scene — the moment when the most elements are simultaneously visible. This is the layout you build.
|
||||
2. **Write static CSS** for that frame. Every element at its final `top`, `left`, `width`, `height`. Use the browser or `npx hyperframes preview` to visually verify nothing overlaps unintentionally.
|
||||
2. **Write static CSS** for that frame. The `.scene-content` container MUST fill the full scene using `width: 100%; height: 100%; padding: Npx;` with `display: flex; flex-direction: column; gap: Npx; box-sizing: border-box`. Use padding to push content inward — NEVER `position: absolute; top: Npx` on a content container. Absolute-positioned content containers overflow when content is taller than the remaining space. Reserve `position: absolute` for decoratives only.
|
||||
3. **Add entrances with `gsap.from()`** — animate FROM offscreen/invisible TO the CSS position. The CSS position is the ground truth; the tween describes the journey to get there.
|
||||
4. **Add exits with `gsap.to()`** — animate TO offscreen/invisible FROM the CSS position.
|
||||
|
||||
### Example
|
||||
|
||||
```css
|
||||
/* Step 1-2: Layout the end state. This is what the viewer sees at peak visibility. */
|
||||
/* scene-content fills the scene, padding positions content */
|
||||
.scene-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 120px 160px;
|
||||
gap: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.title {
|
||||
font-size: 120px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 42px;
|
||||
}
|
||||
/* Container fills any scene size (1920x1080, 1080x1920, etc).
|
||||
Padding positions content. Flex + gap handles spacing. */
|
||||
```
|
||||
|
||||
**WRONG — hardcoded dimensions and absolute positioning:**
|
||||
|
||||
```css
|
||||
.scene-content {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 160px;
|
||||
opacity: 1;
|
||||
}
|
||||
.subtitle {
|
||||
position: absolute;
|
||||
top: 320px;
|
||||
left: 160px;
|
||||
opacity: 1;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
right: 80px;
|
||||
opacity: 1;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex; /* ... */
|
||||
}
|
||||
```
|
||||
|
||||
@@ -104,7 +117,9 @@ Layered effects (glow behind text, shadow elements, background patterns) and z-s
|
||||
|
||||
## Composition Structure
|
||||
|
||||
Every composition is a `<template>` wrapping a `<div>` with `data-composition-id`:
|
||||
Sub-compositions loaded via `data-composition-src` use a `<template>` wrapper. **Standalone compositions (the main index.html) do NOT use `<template>`** — they put the `data-composition-id` div directly in `<body>`. Using `<template>` on a standalone file hides all content from the browser and breaks rendering.
|
||||
|
||||
Sub-composition structure:
|
||||
|
||||
```html
|
||||
<template id="my-comp-template">
|
||||
@@ -183,24 +198,56 @@ Video must be `muted playsinline`. Audio is always a separate `<audio>` element:
|
||||
7. Create a top-level container without `data-composition-id`
|
||||
8. Use `repeat: -1` on any timeline or tween — always finite repeats
|
||||
9. Build timelines asynchronously (inside `async`, `setTimeout`, `Promise`)
|
||||
10. Use `gsap.set()` on clip elements from later scenes — they don't exist in the DOM at page load. Use `tl.set(selector, vars, timePosition)` inside the timeline at or after the clip's `data-start` time instead.
|
||||
11. Use `<br>` in content text — forced line breaks don't account for actual rendered font width. Text that wraps naturally + a `<br>` produces an extra unwanted break, causing overlap. Let text wrap via `max-width` instead. Exception: short display titles where each word is deliberately on its own line (e.g., "THE\nIMMORTAL\nGAME" at 130px).
|
||||
|
||||
## Scene Transitions (Non-Negotiable)
|
||||
|
||||
Every multi-scene composition MUST follow ALL of these rules. Violating any one of them is a broken composition.
|
||||
|
||||
1. **ALWAYS use transitions between scenes.** No jump cuts. No exceptions.
|
||||
2. **ALWAYS use entrance animations on every scene.** Every element animates IN via `gsap.from()`. No element may appear fully-formed. If a scene has 5 elements, it needs 5 entrance tweens.
|
||||
3. **NEVER use exit animations** except on the final scene. This means: NO `gsap.to()` that animates opacity to 0, y offscreen, scale to 0, or any other "out" animation before a transition fires. The transition IS the exit. The outgoing scene's content MUST be fully visible at the moment the transition starts.
|
||||
4. **Final scene only:** The last scene may fade elements out (e.g., fade to black). This is the ONLY scene where `gsap.to(..., { opacity: 0 })` is allowed.
|
||||
|
||||
**WRONG — exit animation before transition:**
|
||||
|
||||
```js
|
||||
// BANNED — this empties the scene before the transition can use it
|
||||
tl.to("#s1-title", { opacity: 0, y: -40, duration: 0.4 }, 6.5);
|
||||
tl.to("#s1-subtitle", { opacity: 0, duration: 0.3 }, 6.7);
|
||||
// transition fires on empty frame
|
||||
```
|
||||
|
||||
**RIGHT — entrance only, transition handles exit:**
|
||||
|
||||
```js
|
||||
// Scene 1 entrance animations
|
||||
tl.from("#s1-title", { y: 50, opacity: 0, duration: 0.7, ease: "power3.out" }, 0.3);
|
||||
tl.from("#s1-subtitle", { y: 30, opacity: 0, duration: 0.5, ease: "power2.out" }, 0.6);
|
||||
// NO exit tweens — transition at 7.2s handles the scene change
|
||||
// Scene 2 entrance animations
|
||||
tl.from("#s2-heading", { x: -40, opacity: 0, duration: 0.6, ease: "expo.out" }, 8.0);
|
||||
```
|
||||
|
||||
## Animation Guardrails
|
||||
|
||||
- Offset first animation 0.1-0.3s (not t=0)
|
||||
- Vary eases across entrance tweens — use at least 3 different eases per scene
|
||||
- Don't repeat an entrance pattern within a scene
|
||||
- Avoid full-screen linear gradients on dark backgrounds (H.264 banding — use radial or solid + localized glow)
|
||||
- 60px+ headlines, 20px+ body, 16px+ data labels for rendered video
|
||||
- `font-variant-numeric: tabular-nums` on number columns
|
||||
|
||||
When no `visual-style.md` or animation direction is provided, follow [house-style.md](./house-style.md) for aesthetic defaults.
|
||||
|
||||
## Typography and Assets
|
||||
|
||||
- **Fonts:** Just write the `font-family` you want in CSS — the compiler embeds supported fonts automatically via `@font-face` with inline data URIs. No `<link>` tags or `@import` needed. If a font isn't in the supported set, the compiler warns and you should add it to `deterministicFonts.ts`.
|
||||
- **Fonts:** Just write the `font-family` you want in CSS — the compiler embeds supported fonts automatically. If a font isn't supported, the compiler warns.
|
||||
- Add `crossorigin="anonymous"` to external media
|
||||
- **Minimum font sizes for rendered video (1080p at DPR 1):**
|
||||
- Body/label text: 20px minimum (landscape), 18px minimum (portrait)
|
||||
- Data labels, axis labels, footnotes: 16px minimum — anything smaller becomes illegible after encoding
|
||||
- Headlines: 36px+ recommended
|
||||
- Avoid sub-14px text entirely — it will be unreadable in the final MP4
|
||||
- For dynamic text overflow, use `window.__hyperframes.fitTextFontSize(text, { maxWidth, fontFamily, fontWeight })` — returns `{ fontSize, fits }`
|
||||
- For dynamic text overflow, use `window.__hyperframes.fitTextFontSize(text, { maxWidth, fontFamily, fontWeight })`
|
||||
- All files live at the project root alongside `index.html`; sub-compositions use `../`
|
||||
|
||||
### Backgrounds and Color
|
||||
|
||||
- **Avoid full-screen linear gradients on dark backgrounds** — H.264 encoding creates visible color banding. Prefer: solid colors, radial gradients with limited range, or subtle noise/texture overlays to break up banding.
|
||||
- For dark themes, use solid `#000` or `#0A0A0A` with localized radial glows rather than a linear gradient spanning the full viewport.
|
||||
|
||||
## Editing Existing Compositions
|
||||
|
||||
- Read the full composition first — match existing fonts, colors, animation patterns
|
||||
@@ -209,17 +256,6 @@ Video must be `muted playsinline`. Audio is always a separate `<audio>` element:
|
||||
|
||||
## Output Checklist
|
||||
|
||||
- [ ] Every top-level container has `data-composition-id`, `data-width`, `data-height`, `data-duration`
|
||||
- [ ] Compositions in own HTML files, loaded via `data-composition-src`
|
||||
- [ ] `<template>` wrapper on sub-compositions
|
||||
- [ ] `window.__timelines` registered for every composition
|
||||
- [ ] Timeline construction is synchronous (no async/await wrapping timeline code)
|
||||
- [ ] No `repeat: -1` on any tween or nested timeline
|
||||
- [ ] No text below 16px (data labels, footnotes) or 20px (body text)
|
||||
- [ ] No full-screen linear dark gradients (use radial or solid + localized glow)
|
||||
- [ ] Font families declared in CSS (compiler embeds them automatically)
|
||||
- [ ] 100% deterministic
|
||||
- [ ] Each composition includes GSAP script tag
|
||||
- [ ] `npx hyperframes lint` and `npx hyperframes validate` both pass
|
||||
|
||||
---
|
||||
@@ -230,7 +266,7 @@ Video must be `muted playsinline`. Audio is always a separate `<audio>` element:
|
||||
- **[references/tts.md](references/tts.md)** — Text-to-speech with Kokoro-82M. Voice selection, speed tuning, TTS+captions workflow. Read when generating narration or voiceover.
|
||||
- **[references/audio-reactive.md](references/audio-reactive.md)** — Audio-reactive animation: map frequency bands and amplitude to GSAP properties. Read when visuals should respond to music, voice, or sound.
|
||||
- **[references/marker-highlight.md](references/marker-highlight.md)** — Animated text highlighting via canvas overlays: marker pen, circle, burst, scribble, sketchout. Read when adding visual emphasis to text.
|
||||
- **[references/fonts.md](references/fonts.md)** — Typography: typographic tension and contrast principles, font pairing theory, case studies from SSENSE/Acne/Stripe/Fly.io/Collins, failure modes, runtime font discovery. Read when picking and pairing typefaces.
|
||||
- **[references/typography.md](references/typography.md)** — Typography: font pairing, OpenType features, dark-background adjustments, font discovery script. **Always read** — every composition has text.
|
||||
- **[references/motion-principles.md](references/motion-principles.md)** — Motion design principles: easing as emotion, timing as weight, choreography as hierarchy, scene pacing, ambient motion, anti-patterns. Read when choreographing GSAP animations.
|
||||
- **[house-style.md](house-style.md)** — Default motion, sizing, and color palettes when no style is specified.
|
||||
- **[patterns.md](patterns.md)** — PiP, title cards, slide show patterns.
|
||||
@@ -238,7 +274,7 @@ Video must be `muted playsinline`. Audio is always a separate `<audio>` element:
|
||||
- **[references/transcript-guide.md](references/transcript-guide.md)** — Transcription commands, whisper models, external APIs, troubleshooting.
|
||||
- **[references/dynamic-techniques.md](references/dynamic-techniques.md)** — Dynamic caption animation techniques (karaoke, clip-path, slam, scatter, elastic, 3D).
|
||||
|
||||
- **[references/transitions.md](references/transitions.md)** — Scene transitions: crossfades, wipes, reveals, shader transitions. Energy/mood selection, narrative position, CSS vs WebGL guidance. Read when a composition has multiple scenes that need visual handoffs.
|
||||
- **[references/transitions.md](references/transitions.md)** — Scene transitions: crossfades, wipes, reveals, shader transitions. Energy/mood selection, CSS vs WebGL guidance. **Always read for multi-scene compositions** — scenes without transitions feel like jump cuts.
|
||||
- [transitions/catalog.md](references/transitions/catalog.md) — Hard rules, scene template, and routing to per-type implementation code.
|
||||
- [transitions/shader-setup.md](references/transitions/shader-setup.md) — WebGL boilerplate for shader transitions.
|
||||
- [transitions/shader-transitions.md](references/transitions/shader-transitions.md) — 14 fragment shaders.
|
||||
|
||||
@@ -1,119 +1,66 @@
|
||||
# House Style
|
||||
|
||||
Defaults when no `visual-style.md` or animation direction is provided. These raise the floor — not a brand identity, just professional quality.
|
||||
Creative direction for compositions when no `visual-style.md` is provided. These are starting points — override anything that doesn't serve the content.
|
||||
|
||||
## Before Writing HTML
|
||||
|
||||
1. **Interpret the prompt.** Generate real content for the topic — don't use the prompt text as body copy. A recipe lists real ingredients. A stats dashboard shows the actual numbers given. A product showcase names real features and specs. A sci-fi HUD has actual crosshairs and readouts, not a heading that says "sci-fi HUD."
|
||||
2. **Pick a palette.** First decide: does this content call for a light or dark canvas? Then load the file most appropriate for the theme and pick one palette at random from the file. Declare your bg, fg, and accent colors before writing any code.
|
||||
3. **Pick a typeface.** Don't reach for Sora, Space Grotesk, Outfit, Playfair Display, Cormorant Garamond, or Bodoni Moda — they're overused. Read [references/fonts.md](references/fonts.md) and pick a font that matches the content mood. Serif for editorial, mono for technical, display for impact, handwritten for personal. Just write the `font-family` in CSS — the compiler embeds supported fonts automatically.
|
||||
4. **Pick a layout approach.** Don't default to the same structure every time.
|
||||
5. **Pick your entrance patterns.** Plan how elements enter — never use the same entrance pattern twice in a composition.
|
||||
1. **Interpret the prompt.** Generate real content. A recipe lists real ingredients. A HUD has real readouts.
|
||||
2. **Pick a palette.** Light or dark? Declare bg, fg, accent before writing code.
|
||||
3. **Pick typefaces.** Run the font discovery script in [references/typography.md](references/typography.md) — or pick a font you already know that fits the theme. The script broadens your options; it's not the only source.
|
||||
|
||||
## Lazy Defaults to Question
|
||||
|
||||
These patterns are AI design tells — the first thing every LLM reaches for. If you're about to use one, pause and ask: is this a deliberate choice for THIS content, or am I defaulting?
|
||||
|
||||
- Gradient text (`background-clip: text` + gradient)
|
||||
- Left-edge accent stripes on cards/callouts
|
||||
- Cyan-on-dark / purple-to-blue gradients / neon accents
|
||||
- Pure `#000` or `#fff` (tint toward your accent hue instead)
|
||||
- Identical card grids (same-size cards repeated)
|
||||
- Everything centered with equal weight (lead the eye somewhere)
|
||||
- These fonts: Inter, Roboto, Open Sans, Noto Sans, Lato, Poppins, Outfit, Sora, Playfair Display, Cormorant Garamond, Bodoni Moda, EB Garamond, Cinzel, Prata, Syne
|
||||
|
||||
If the content genuinely calls for one of these — centered layout for a solemn closing, cards for a real product UI mockup, a banned font because it's the perfect thematic match — use it. The goal is intentionality, not avoidance.
|
||||
|
||||
## Color
|
||||
|
||||
- Match light/dark to content: food, wellness, kids → light. Tech, cinema, finance → dark.
|
||||
- One accent hue. Same background across all scenes.
|
||||
- Tint neutrals toward your accent (even subtle warmth/coolness beats dead gray).
|
||||
- **Contrast:** 5:1 minimum between text and scene background. Text must be readable with decoratives removed.
|
||||
- Declare palette up front. Don't invent colors per-element.
|
||||
|
||||
## Background Layer
|
||||
|
||||
Every scene needs visual depth — persistent decorative elements that stay visible while content animates in. Without these, scenes feel empty during entrance staggering.
|
||||
|
||||
Ideas (mix and match, 2-5 per scene):
|
||||
|
||||
- Radial glows (accent-tinted, low opacity, breathing scale)
|
||||
- Ghost text (theme words at 3-8% opacity, very large, slow drift)
|
||||
- Accent lines (hairline rules, subtle pulse)
|
||||
- Grain/noise overlay, geometric shapes, grid patterns
|
||||
- Thematic decoratives (orbit rings for space, vinyl grooves for music, grid lines for data)
|
||||
|
||||
All decoratives should have slow ambient GSAP animation — breathing, drift, pulse. Static decoratives feel dead.
|
||||
|
||||
## Motion
|
||||
|
||||
### Easing
|
||||
|
||||
Vary your eases. Don't use the same ease on more than 2 tweens in a composition. Pick from the full GSAP vocabulary:
|
||||
|
||||
`power1-4.in/out/inOut`, `back.out(1.4-2.5)`, `elastic.out(1, 0.3-0.5)`, `circ.out`, `expo.out`, `sine.inOut`, `steps(n)`
|
||||
|
||||
A few principles:
|
||||
|
||||
- Opacity fades should be gentle (`power1` or `none`) — don't draw attention to the fade itself
|
||||
- Overshoot on scale or position feels alive — `back.out` or `elastic.out`
|
||||
- Snappy moves want `expo.out` or `power4.out` — fast departure, hard stop
|
||||
- Smooth arcs want `sine.inOut` or `circ.inOut` — no hard edges
|
||||
|
||||
### Timing
|
||||
|
||||
- **0.3–0.6s** for most moves. Shorter than you think.
|
||||
- **Exits 2x faster** than entrances.
|
||||
- **Nothing starts at t=0** — offset first animation 0.1–0.3s.
|
||||
- **Overlap entries** — next element starts before previous finishes. Use GSAP position parameter: `tl.to(el, {...}, "-=0.15")`
|
||||
- **Stagger with easing**, not uniform: `stagger: { each: 0.08, ease: "power2.in" }`
|
||||
|
||||
### Entrance Patterns
|
||||
|
||||
Never fade-in alone. Combine opacity with at least one transform. Never repeat the same entrance in a composition. Invent your own combinations — mix properties creatively:
|
||||
|
||||
- **Position** — x, y, or both (diagonal). Vary the axis and distance per element.
|
||||
- **Scale** — from smaller or larger. Pair with overshoot easing.
|
||||
- **Rotation** — small angles (3-12deg) feel intentional. Large angles (45-180deg) feel dramatic.
|
||||
- **Clip path** — `inset()`, `circle()`, `polygon()`. Direction matters: left, right, top, center outward.
|
||||
- **Blur + opacity** — `filter: blur(8px)` combined with opacity creates a focus-pull effect.
|
||||
- **Letter spacing / word spacing** — for text, animate tracking from wide to tight or vice versa.
|
||||
- **Skew** — `skewX` or `skewY` gives a motion-blur feeling without actual blur.
|
||||
- **3D transforms** — `rotationX`, `rotationY` with `transformPerspective` for depth.
|
||||
|
||||
Don't copy the same combination across compositions. Each composition should feel like it has its own motion personality.
|
||||
|
||||
### Choreography
|
||||
|
||||
- **Combined transforms** — animate 2–3 properties together (position + scale, rotation + opacity), not one at a time.
|
||||
- **Coordinated entry** — when a new element enters, existing elements react. Anchor moves, follower tracks.
|
||||
- **Ambient motion** — keep the composition alive during holds. Don't default to zoom-in every time. Pick one per composition:
|
||||
- Slow pan (x or y drift on a container)
|
||||
- Subtle rotation (0.5–2deg over several seconds)
|
||||
- Scale push or pull (zoom in OR out — both work)
|
||||
- Parallax layers (background moves slower than foreground)
|
||||
- Color/opacity shift on an accent element
|
||||
- No ambient motion at all — stillness can be powerful
|
||||
- **End with intention** — don't always zoom at the end. Options: snap to black, fade to stillness, final element snaps into place, a hard cut. Vary this across compositions.
|
||||
|
||||
### Scene Pacing
|
||||
|
||||
Structure compositions in three phases — don't front-load everything:
|
||||
|
||||
- **Build (0–30%)** — elements enter. Stagger arrivals so there's a sequence, not a simultaneous dump.
|
||||
- **Breathe (30–70%)** — content is visible. Keep it alive with subtle motion: slow camera push, gentle drift, a color shift, a pulsing accent. Static holds feel dead.
|
||||
- **Resolve (70–100%)** — elements exit or the composition punctuates. Exits are faster than entrances. End with intention — a final zoom, a fade to black, a snap to stillness.
|
||||
|
||||
Don't crowd the build phase. If you have 6 elements, let 2-3 enter, breathe, then bring in the rest. Layers of reveals beat a single wave.
|
||||
|
||||
## Sizing
|
||||
|
||||
- **Text scale contrast** — headings at 3–5x body size, not 1.5x. Big contrast reads as cinematic.
|
||||
- **Element fill** — hero elements fill 60–80% of the frame. Don't leave them floating at 30%.
|
||||
- **Travel distance** — entrance moves should cover 80–200px. Under 20px looks like a glitch.
|
||||
- **Overshoot** — 5–10% overshoot reads as energy. Under 2% reads as a bug.
|
||||
|
||||
## Visual Depth
|
||||
|
||||
Flat single-color backgrounds look digital. Avoid pure solid backgrounds — add some visual layer to break the flatness. Options include gradients, subtle background shapes, texture, shadows on cards, or border accents. Pick what fits the content — not every composition needs the same treatment. A luxury product wants subtle gradients. A children's show wants bold shapes. A news graphic wants clean borders.
|
||||
- **0.3–0.6s** for most moves.
|
||||
- **Vary eases** — don't repeat the same ease across consecutive elements.
|
||||
- **Combine transforms** on entrances — opacity + position, scale, rotation, blur, letter-spacing.
|
||||
- **Overlap entries** — next element starts before previous finishes.
|
||||
|
||||
## Typography
|
||||
|
||||
Beyond choosing a typeface:
|
||||
|
||||
- **Weight contrast** — pair a heavy weight (700-900) headline with a light weight (300-400) body. Always use at least two explicit font-weight values — even with display fonts that look bold by default, set labels or secondary text to a lighter weight.
|
||||
- **Case deliberately** — ALL CAPS for labels and short text (under 5 words). Sentence case for longer text. Don't uppercase paragraphs.
|
||||
- **Tracking** — tight tracking (-0.02em) on large headlines. Normal or wide tracking on small labels.
|
||||
- **One typeface, two weights** — don't mix typefaces unless you have a reason. One family at two weights creates more hierarchy than two families at one weight each.
|
||||
|
||||
## Anti-Defaults
|
||||
|
||||
Things the LLM reaches for that look generic. Do the opposite.
|
||||
|
||||
| Default | Instead |
|
||||
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| Inter / Roboto / system font | Pick a typeface with character — commit to it |
|
||||
| `#f5f5f5` / `#333` / mid-gray | Go high contrast. Near-black or near-white, not the middle |
|
||||
| Blue accent `#3b82f6` | No blue unless the user asks for blue |
|
||||
| Everything centered, equal weight | One focal point per frame. Lead the eye somewhere |
|
||||
| Uniform spacing | Tight clusters and open gaps. Vary deliberately |
|
||||
| Same entrance on every element | Never repeat an entrance pattern in a composition |
|
||||
| 1s duration on everything | 0.3–0.6s. Shorter than you think |
|
||||
| `power2.out` on everything | Vary eases — no more than 2 independent tweens with the same ease (staggers are exempt) |
|
||||
| Always dark background | Match the content: food, weddings, kids, wellness, education → light palette |
|
||||
| Inventing colors per-element | Declare palette up front. Every element references it |
|
||||
| Content in cards/containers | Place content directly on the canvas — separate with space and alignment, not box boundaries. Cards are a web pattern. Exception: dashboards, lower thirds, captions over footage |
|
||||
| Hand-drawn SVG illustrations | Don't attempt to draw real-world objects (faces, buildings, food, animals) with SVG paths — they look crude. Use geometric shapes, lines, and abstract forms only. If the composition needs imagery, use text and typography to evoke it instead |
|
||||
| Overlapping elements | Every element needs its own clear space. Check that positioned elements don't collide — stagger positions vertically with enough margin. Overlapping text is always ugly |
|
||||
- **Weight contrast** — 700-900 headlines with 300-400 body.
|
||||
- **Cross boundaries** — pair serif + sans, or sans + mono. Two sans-serifs together is almost always a mistake.
|
||||
- **Video sizes** — 60px+ headlines, 20px+ body, 16px+ labels.
|
||||
- **Tracking** — tight on large headlines, normal or wide on small labels.
|
||||
|
||||
## Palettes
|
||||
|
||||
Before writing any HTML, declare your palette: one background, one foreground, one accent. Pick from a category below — don't invent colors. **Match palette to content** — don't default to dark. Children's content, food, weddings, wellness, education, and lifestyle content should typically use light or warm palettes.
|
||||
Declare one background, one foreground, one accent before writing HTML.
|
||||
|
||||
| Category | Use for | File |
|
||||
| ----------------- | --------------------------------------------- | ---------------------------------------------------------- |
|
||||
@@ -127,4 +74,4 @@ Before writing any HTML, declare your palette: one background, one foreground, o
|
||||
| Jewel / Rich | Luxury, events, sophisticated | [palettes/jewel-rich.md](palettes/jewel-rich.md) |
|
||||
| Monochrome | Dramatic, typography-focused | [palettes/monochrome.md](palettes/monochrome.md) |
|
||||
|
||||
**Escape hatch:** If no category fits, derive from the color wheel — pick a base hue, take its complement or triadic, pull a dark from OKLCH lightness 15% and a light from 90%.
|
||||
Or derive from OKLCH — pick a hue, build bg/fg/accent at different lightnesses, tint everything toward that hue.
|
||||
|
||||
@@ -1,16 +1,5 @@
|
||||
## Other
|
||||
|
||||
### Flash Cut
|
||||
|
||||
White full-screen overlay flashes at swap point. 0.03s on, 0.1s off.
|
||||
|
||||
```js
|
||||
tl.to("#flash-overlay", { opacity: 1, duration: 0.03, ease: "power4.out" }, T);
|
||||
tl.set(old, { opacity: 0 }, T + 0.03);
|
||||
tl.set(new, { opacity: 1 }, T + 0.03);
|
||||
tl.to("#flash-overlay", { opacity: 0, duration: 0.1, ease: "power2.out" }, T + 0.05);
|
||||
```
|
||||
|
||||
### Gravity Drop
|
||||
|
||||
Old scene falls down with slight rotation. New scene was behind it. Needs z-index.
|
||||
|
||||
+73
-32
@@ -4,7 +4,11 @@ The compiler embeds supported fonts — just write `font-family` in CSS.
|
||||
|
||||
## Banned
|
||||
|
||||
Inter, Roboto, Open Sans, Noto Sans, Arimo, Lato, Source Sans, PT Sans, Nunito, Poppins, Outfit, Sora, Playfair Display, Cormorant Garamond, Bodoni Moda, EB Garamond, Cinzel, Prata
|
||||
Training-data defaults that every LLM reaches for. These produce monoculture across compositions.
|
||||
|
||||
Inter, Roboto, Open Sans, Noto Sans, Arimo, Lato, Source Sans, PT Sans, Nunito, Poppins, Outfit, Sora, Playfair Display, Cormorant Garamond, Bodoni Moda, EB Garamond, Cinzel, Prata, Syne
|
||||
|
||||
**Syne in particular** is the most overused "distinctive" display font. It is an instant AI design tell.
|
||||
|
||||
## Guardrails
|
||||
|
||||
@@ -34,16 +38,18 @@ Don't default to what you know. If the content is luxury, a grotesque sans might
|
||||
Save this script to `/tmp/fontquery.py` and run with `curl -s 'https://fonts.google.com/metadata/fonts' > /tmp/gfonts.json && python3 /tmp/fontquery.py /tmp/gfonts.json`:
|
||||
|
||||
```python
|
||||
import json, sys
|
||||
import json, sys, random
|
||||
from collections import OrderedDict
|
||||
|
||||
random.seed() # true random each run
|
||||
|
||||
with open(sys.argv[1]) as f:
|
||||
data = json.load(f)
|
||||
fonts = data.get("familyMetadataList", [])
|
||||
|
||||
ban = {"Inter","Roboto","Open Sans","Noto Sans","Lato","Poppins","Source Sans 3",
|
||||
"PT Sans","Nunito","Outfit","Sora","Playfair Display","Cormorant Garamond",
|
||||
"Bodoni Moda","EB Garamond","Cinzel","Prata","Arimo","Source Sans Pro"}
|
||||
"Bodoni Moda","EB Garamond","Cinzel","Prata","Arimo","Source Sans Pro","Syne"}
|
||||
skip_pfx = ("Roboto","Noto ","Google Sans","Bpmf","Playwrite","Anek","BIZ ",
|
||||
"Nanum","Shippori","Sawarabi","Zen ","Kaisei","Kiwi ","Yuji ","Radio ")
|
||||
|
||||
@@ -77,28 +83,15 @@ for f in fonts:
|
||||
if f.get("category") == "Monospace" and f.get("dateAdded","") >= "2018-01-01" and f.get("popularity",9999) < 600:
|
||||
R["Monospace"].append(f); seen.add(f["family"])
|
||||
|
||||
# Impact & Condensed — curated names + heavy display fonts
|
||||
# Impact & Condensed — heavy display fonts with 800+ weight
|
||||
R["Impact & Condensed"] = []
|
||||
impact = {"Bebas Neue","Archivo Black","Big Shoulders Display","Teko","League Gothic",
|
||||
"Barlow Condensed","Staatliches","Anton","Oswald","Saira","Syne",
|
||||
"Titillium Web","Alumni Sans","Advent Pro"}
|
||||
for f in fonts:
|
||||
if not ok(f) or f["family"] in seen: continue
|
||||
is_impact = f["family"] in impact
|
||||
is_heavy_display = ("Display" in (f.get("classifications") or [])
|
||||
and any(k in list(f.get("fonts",{}).keys()) for k in ("800","900"))
|
||||
and f.get("popularity",9999) < 400
|
||||
and f.get("category") in ("Sans Serif","Display"))
|
||||
if is_impact or is_heavy_display:
|
||||
has_heavy = any(k in list(f.get("fonts",{}).keys()) for k in ("800","900"))
|
||||
is_display = f.get("category") in ("Sans Serif","Display")
|
||||
if has_heavy and is_display and f.get("popularity",9999) < 400:
|
||||
R["Impact & Condensed"].append(f); seen.add(f["family"])
|
||||
|
||||
# Bold Geometric Display — curated
|
||||
R["Bold Geometric Display"] = []
|
||||
for f in fonts:
|
||||
if not ok(f) or f["family"] in seen: continue
|
||||
if f["family"] in {"DM Serif Display","Abril Fatface","Righteous","Orbitron","Black Ops One"}:
|
||||
R["Bold Geometric Display"].append(f); seen.add(f["family"])
|
||||
|
||||
# Script & Handwriting — popular (<300)
|
||||
R["Script & Handwriting"] = []
|
||||
for f in fonts:
|
||||
@@ -106,21 +99,16 @@ for f in fonts:
|
||||
if f.get("category") == "Handwriting" and f.get("popularity",9999) < 300:
|
||||
R["Script & Handwriting"].append(f); seen.add(f["family"])
|
||||
|
||||
# Established Classics — good older fonts
|
||||
R["Established Classics"] = []
|
||||
classics = {"Josefin Sans","Raleway","Montserrat","Abel","Exo","Red Hat Display",
|
||||
"Rubik","Alegreya","Arvo","Besley","Crimson Text","Fraunces",
|
||||
"Lora","Merriweather","Vollkorn"}
|
||||
for f in fonts:
|
||||
if f["family"] in classics and f["family"] not in seen:
|
||||
R["Established Classics"].append(f); seen.add(f["family"])
|
||||
|
||||
# Print
|
||||
# Randomize the top 5 in each category so the LLM doesn't always pick the same first result
|
||||
for cat in R:
|
||||
R[cat].sort(key=lambda x: x.get("popularity",9999))
|
||||
top5 = R[cat][:5]
|
||||
rest = R[cat][5:]
|
||||
random.shuffle(top5)
|
||||
R[cat] = top5 + rest
|
||||
limits = {"Trending Sans":15,"Trending Serif":12,"Monospace":8,
|
||||
"Impact & Condensed":12,"Bold Geometric Display":8,
|
||||
"Script & Handwriting":10,"Established Classics":20}
|
||||
"Impact & Condensed":12,"Script & Handwriting":10}
|
||||
for cat in R:
|
||||
items = R[cat][:limits.get(cat,10)]
|
||||
if not items: continue
|
||||
@@ -131,4 +119,57 @@ for cat in R:
|
||||
print()
|
||||
```
|
||||
|
||||
Seven categories: trending sans, trending serif, monospace, impact/condensed, bold geometric, script/handwriting, and established classics. Cross classification boundaries when pairing.
|
||||
Five categories: trending sans, trending serif, monospace, impact/condensed, script/handwriting. All dynamically filtered from Google Fonts metadata — no hardcoded font names. Cross classification boundaries when pairing.
|
||||
|
||||
## Selection Thinking
|
||||
|
||||
Don't pick fonts by category reflex (editorial → serif, tech → mono, modern → geometric sans). That's pattern matching, not design.
|
||||
|
||||
1. **Name the register.** What voice is the content speaking in? Institutional authority? Personal confession? Technical precision? Casual irreverence? The register narrows the field more than the category.
|
||||
2. **Think physically.** Imagine the font as a physical object the brand could ship — a museum exhibit caption, a hand-painted shop sign, a 1970s mainframe terminal manual, a fabric label inside a coat, a children's book printed on cheap newsprint, a tax form. Whichever physical object fits the register is pointing at the right _kind_ of typeface.
|
||||
3. **Reject your first instinct.** The first font that feels right is usually your training-data default for that register. If you picked it last time too, find something else.
|
||||
4. **Cross-check the assumption.** An editorial brief does NOT need a serif. A technical brief does NOT need a sans. A children's product does NOT need a rounded display font. The most distinctive choice often contradicts the category expectation.
|
||||
|
||||
## Similar-Font Pairing
|
||||
|
||||
Never pair two fonts that are similar but not identical — two geometric sans-serifs, two transitional serifs, two humanist sans. They create visual friction without clear hierarchy. The viewer senses something is "off" but can't articulate it. Either use one font at two weights, or pair fonts that contrast on multiple axes: serif + sans, condensed + wide, geometric + humanist.
|
||||
|
||||
## Dark Backgrounds
|
||||
|
||||
Light text on dark backgrounds creates two optical illusions you need to compensate for:
|
||||
|
||||
- **Increased apparent weight.** Light-on-dark reads heavier than dark-on-light at the same `font-weight`. Use 350 instead of 400 for body text. Headlines are less affected because size compensates.
|
||||
- **Tighter apparent spacing.** Light halos around letterforms reduce perceived gaps. Increase `line-height` by 0.05-0.1 beyond your light-background value. For display sizes, add 0.01em `letter-spacing` to counteract.
|
||||
|
||||
## OpenType Features for Data
|
||||
|
||||
Most fonts ship with OpenType features that are off by default. Turn them on for data compositions:
|
||||
|
||||
```css
|
||||
/* Tabular numbers — digits align vertically in columns */
|
||||
.stat-value,
|
||||
.timer,
|
||||
.data-column {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Diagonal fractions — renders 1/2 as ½ */
|
||||
.recipe-amount,
|
||||
.ratio {
|
||||
font-variant-numeric: diagonal-fractions;
|
||||
}
|
||||
|
||||
/* Small caps for abbreviations — less visual shouting */
|
||||
.abbreviation,
|
||||
.unit {
|
||||
font-variant-caps: all-small-caps;
|
||||
}
|
||||
|
||||
/* Disable ligatures in code — fi, fl, ffi should stay separate */
|
||||
code,
|
||||
.code {
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
```
|
||||
|
||||
`tabular-nums` is essential any time numbers are stacked vertically — stat callouts, timers, scoreboards, data tables. Without it, digits have proportional widths and columns don't align.
|
||||
Reference in New Issue
Block a user