|
| 1 | +# House Style |
| 2 | + |
| 3 | +Defaults when no `visual-style.md` or animation direction is provided. These raise the floor — not a brand identity, just professional quality. |
| 4 | + |
| 5 | +## Before Writing HTML |
| 6 | + |
| 7 | +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." |
| 8 | +2. **Pick a palette.** First decide: does this content call for a light or dark canvas? Food, weddings, children, wellness, education, lifestyle, nature, and celebrations → light palette (Warm/Editorial, Clean/Corporate, Nature/Earth, Pastel/Soft). Tech, finance, cinema, nightlife, horror, gaming, and premium → dark palette. Then load the file and pick one palette. Declare your bg, fg, and accent colors before writing any code. |
| 9 | +3. **Pick a typeface.** Don't reach for Sora, Space Grotesk, Outfit, Playfair Display, Cormorant Garamond, or Bodoni Moda — they're overused. Explore the full range of Google Fonts. Serif for editorial, mono for technical, display for impact, handwritten for personal. |
| 10 | +4. **Pick your entrance patterns.** Plan how elements enter — never use the same entrance pattern twice in a composition. |
| 11 | + |
| 12 | +## Motion |
| 13 | + |
| 14 | +### Easing |
| 15 | + |
| 16 | +Vary your eases. Don't use the same ease on more than 2 tweens in a composition. Pick from the full GSAP vocabulary: |
| 17 | + |
| 18 | +`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)` |
| 19 | + |
| 20 | +A few principles: |
| 21 | + |
| 22 | +- Opacity fades should be gentle (`power1` or `none`) — don't draw attention to the fade itself |
| 23 | +- Overshoot on scale or position feels alive — `back.out` or `elastic.out` |
| 24 | +- Snappy moves want `expo.out` or `power4.out` — fast departure, hard stop |
| 25 | +- Smooth arcs want `sine.inOut` or `circ.inOut` — no hard edges |
| 26 | + |
| 27 | +### Timing |
| 28 | + |
| 29 | +- **0.3–0.6s** for most moves. Shorter than you think. |
| 30 | +- **Exits 2x faster** than entrances. |
| 31 | +- **Nothing starts at t=0** — offset first animation 0.1–0.3s. |
| 32 | +- **Overlap entries** — next element starts before previous finishes. Use GSAP position parameter: `tl.to(el, {...}, "-=0.15")` |
| 33 | +- **Stagger with easing**, not uniform: `stagger: { each: 0.08, ease: "power2.in" }` |
| 34 | + |
| 35 | +### Entrance Patterns |
| 36 | + |
| 37 | +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: |
| 38 | + |
| 39 | +- **Position** — x, y, or both (diagonal). Vary the axis and distance per element. |
| 40 | +- **Scale** — from smaller or larger. Pair with overshoot easing. |
| 41 | +- **Rotation** — small angles (3-12deg) feel intentional. Large angles (45-180deg) feel dramatic. |
| 42 | +- **Clip path** — `inset()`, `circle()`, `polygon()`. Direction matters: left, right, top, center outward. |
| 43 | +- **Blur + opacity** — `filter: blur(8px)` combined with opacity creates a focus-pull effect. |
| 44 | +- **Letter spacing / word spacing** — for text, animate tracking from wide to tight or vice versa. |
| 45 | +- **Skew** — `skewX` or `skewY` gives a motion-blur feeling without actual blur. |
| 46 | +- **3D transforms** — `rotationX`, `rotationY` with `transformPerspective` for depth. |
| 47 | + |
| 48 | +Don't copy the same combination across compositions. Each composition should feel like it has its own motion personality. |
| 49 | + |
| 50 | +### Choreography |
| 51 | + |
| 52 | +- **Combined transforms** — animate 2–3 properties together (position + scale, rotation + opacity), not one at a time. |
| 53 | +- **Coordinated entry** — when a new element enters, existing elements react. Anchor moves, follower tracks. |
| 54 | +- **Ambient motion** — keep the composition alive during holds. Don't default to zoom-in every time. Pick one per composition: |
| 55 | + - Slow pan (x or y drift on a container) |
| 56 | + - Subtle rotation (0.5–2deg over several seconds) |
| 57 | + - Scale push or pull (zoom in OR out — both work) |
| 58 | + - Parallax layers (background moves slower than foreground) |
| 59 | + - Color/opacity shift on an accent element |
| 60 | + - No ambient motion at all — stillness can be powerful |
| 61 | +- **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. |
| 62 | + |
| 63 | +### Scene Pacing |
| 64 | + |
| 65 | +Structure compositions in three phases — don't front-load everything: |
| 66 | + |
| 67 | +- **Build (0–30%)** — elements enter. Stagger arrivals so there's a sequence, not a simultaneous dump. |
| 68 | +- **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. |
| 69 | +- **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. |
| 70 | + |
| 71 | +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. |
| 72 | + |
| 73 | +## Sizing |
| 74 | + |
| 75 | +- **Text scale contrast** — headings at 3–5x body size, not 1.5x. Big contrast reads as cinematic. |
| 76 | +- **Element fill** — hero elements fill 60–80% of the frame. Don't leave them floating at 30%. |
| 77 | +- **Travel distance** — entrance moves should cover 80–200px. Under 20px looks like a glitch. |
| 78 | +- **Overshoot** — 5–10% overshoot reads as energy. Under 2% reads as a bug. |
| 79 | + |
| 80 | +## Visual Depth |
| 81 | + |
| 82 | +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. |
| 83 | + |
| 84 | +## Typography |
| 85 | + |
| 86 | +Beyond choosing a typeface: |
| 87 | + |
| 88 | +- **Weight contrast** — pair a heavy weight (700-900) headline with a light weight (300-400) body. Don't use the same weight on everything. |
| 89 | +- **Case deliberately** — ALL CAPS for labels and short text (under 5 words). Sentence case for longer text. Don't uppercase paragraphs. |
| 90 | +- **Tracking** — tight tracking (-0.02em) on large headlines. Normal or wide tracking on small labels. |
| 91 | +- **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. |
| 92 | + |
| 93 | +## Anti-Defaults |
| 94 | + |
| 95 | +Things the LLM reaches for that look generic. Do the opposite. |
| 96 | + |
| 97 | +| Default | Instead | |
| 98 | +| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 99 | +| Inter / Roboto / system font | Pick a typeface with character — commit to it | |
| 100 | +| `#f5f5f5` / `#333` / mid-gray | Go high contrast. Near-black or near-white, not the middle | |
| 101 | +| Blue accent `#3b82f6` | No blue unless the user asks for blue | |
| 102 | +| Everything centered, equal weight | One focal point per frame. Lead the eye somewhere | |
| 103 | +| Uniform spacing | Tight clusters and open gaps. Vary deliberately | |
| 104 | +| Same entrance on every element | Never repeat an entrance pattern in a composition | |
| 105 | +| 1s duration on everything | 0.3–0.6s. Shorter than you think | |
| 106 | +| `power2.out` on everything | Vary eases — no more than 2 independent tweens with the same ease (staggers are exempt) | |
| 107 | +| Always dark background | Match the content: food, weddings, kids, wellness, education → light palette | |
| 108 | +| Inventing colors per-element | Declare palette up front. Every element references it | |
| 109 | +| 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 | |
| 110 | + |
| 111 | +## Palettes |
| 112 | + |
| 113 | +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. |
| 114 | + |
| 115 | +| Category | Use for | File | |
| 116 | +| ----------------- | --------------------------------------------- | ---------------------------------------------------------- | |
| 117 | +| Bold / Energetic | Product launches, social media, announcements | [palettes/bold-energetic.md](palettes/bold-energetic.md) | |
| 118 | +| Warm / Editorial | Storytelling, documentaries, case studies | [palettes/warm-editorial.md](palettes/warm-editorial.md) | |
| 119 | +| Dark / Premium | Tech, finance, luxury, cinematic | [palettes/dark-premium.md](palettes/dark-premium.md) | |
| 120 | +| Clean / Corporate | Explainers, tutorials, presentations | [palettes/clean-corporate.md](palettes/clean-corporate.md) | |
| 121 | +| Nature / Earth | Sustainability, outdoor, organic | [palettes/nature-earth.md](palettes/nature-earth.md) | |
| 122 | +| Neon / Electric | Gaming, tech, nightlife | [palettes/neon-electric.md](palettes/neon-electric.md) | |
| 123 | +| Pastel / Soft | Fashion, beauty, lifestyle, wellness | [palettes/pastel-soft.md](palettes/pastel-soft.md) | |
| 124 | +| Jewel / Rich | Luxury, events, sophisticated | [palettes/jewel-rich.md](palettes/jewel-rich.md) | |
| 125 | +| Monochrome | Dramatic, typography-focused | [palettes/monochrome.md](palettes/monochrome.md) | |
| 126 | + |
| 127 | +**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%. |
0 commit comments