@editframe/create 0.44.0 → 0.45.0

package/dist/skills/editframe-brand-video-generator/references/brand-examples.md

@@ -0,0 +1,178 @@
+---
+title: Brand Examples and Category Guidance
+description: Category-specific structural truths, false differentiators, and visual specificity examples for brand video generation.
+---
+
+# Brand Examples and Category Guidance
+
+Use this reference when you need concrete illustrations of the protocol operations. The examples here show what each operation looks like applied to specific categories — not templates to copy.
+
+---
+
+## Structural Truths (Operation 1 examples)
+
+What makes a structural truth non-transferable:
+
+**Software/developer tools**
+- "Their entire product is built on a single unified object model — the same object in the risk system is the same object in the connect system and billing system; no translation layer." (payments API)
+- "They removed the 'new file' concept entirely — there are no saved files, only shareable URLs." (browser-native design tool)
+- "Issues that enter triage exit resolved — no ambiguous state, no 'in review forever'." (opinionated issue tracker)
+- "You retain full database access — row-level security written in standard SQL, realtime via database replication, queryable with any standard client." (backend-as-a-service built on an existing database)
+
+**Consumer/lifestyle**
+- "They launched with no advertising — only photos submitted by real customers, which meant the product had to be worth photographing before it could be marketed." (community-built beauty brand)
+- "Every product is tested by the founder on herself for a minimum of 6 months before it ships."
+
+**Physical goods / apparel**
+- "They don't sell seasons — they sell repairs. Their website earns revenue from used items, not just new." (repair-first outdoor apparel brand)
+- "The product is designed to be returned in the same bag it arrived in, zero-waste, no box."
+
+**Food / beverage**
+- "They publish their supply chain — not as PR, but because the flavor differs by farm and harvest, and they name the farm on the bag."
+
+---
+
+## Formal Constraints (Operation 2 examples)
+
+What a structural truth forces on video mechanics:
+
+- Opinionated removal (issue tracker that eliminates workflow ambiguity): "Each scene removes one element until only the essential thing remains." The structure (subtraction) is the argument (constraints enable).
+- Invisible product (payments API where the product is the plumbing): "The video shows the product by showing its absence — everything working without friction."
+- Brand built from user faces (community-first beauty brand): "The video is structured as a handoff — each face passes the screen to the next, as if the product is passing between real people."
+- Repair over replacement (anti-consumption apparel brand): "The structure is reversal — damaged → restored — every scene runs against the usual product-fantasy direction."
+
+**Test**: State the constraint as "This video argues [X] by showing [Y]." If [Y] could illustrate a different argument, the form is not embodying the argument.
+
+---
+
+## False Differentiators (Operation 1 — what to ignore)
+
+These describe every competitor in the category. They are not structural truths.
+
+**Universal**
+- "Easy to use", "powerful", "fast", "reliable", "all-in-one"
+- "Helps teams work better", "saves time", "increases productivity"
+- "Trusted by thousands of companies"
+
+**Developer/API brands**
+- "Instant deploys", "edge functions", "OAuth built in", "REST API", "100ms response times", "99.99% uptime", "zero config", "batteries included"
+
+**Payment/fintech**
+- "One platform", "global payments", "secure transactions", "invisible infrastructure", "end-to-end payments"
+
+**Design tools**
+- "Design and code together", "design faster", "multiplayer design", "browser-based", "files keep you apart"
+
+**Workspace/productivity**
+- "Fragmented tools → unified workspace", "all-in-one", "where work happens", "write, plan, organize"
+
+**Deployment platforms**
+- "Deploy on every git push", "preview URLs", "instant deploys", "global CDN", "serverless", "zero config", "git push → live", "instant rollback"
+
+**Backend-as-a-service**
+- "Firebase alternative", "open source", "integrated platform", "one backend for everything"
+
+**Consumer beauty/skincare**
+- "Clean ingredients", "dermatologist-tested", "for all skin types", "cruelty-free", "glow", "your skin but better"
+
+**Lifestyle/apparel**
+- "Sustainable", "made with care", "designed for real life", "premium quality", "built to last", "timeless style"
+
+**Food/beverage**
+- "Real ingredients", "no artificial anything", "small batch", "crafted with love", "farm to table", "ethically sourced"
+
+**Fitness/wellness**
+- "Feel your best", "stronger every day", "your journey", "science-backed", "community-driven"
+
+**The brand's marketing tagline is never the answer.** Find the structural truth underneath.
+
+Category-specific dig patterns:
+- Developer brands: what does this product ask developers to *give up*? (conventions, configurations, files) — that trade-off is the actual truth.
+- Design tools: what workflow step did this product eliminate that all predecessors required?
+- Workspace tools: what is the specific unit of information this product invented? (the block, the issue, the formula)
+
+---
+
+## Visual Specificity (Operation 7 examples)
+
+What "prove visually" looks like by category:
+
+### Product-demo (developer/API) specificity
+
+Generic labels (e.g., "Secure payments", "Intelligent risk") fail. Show instead:
+- Actual code snippets with the product's real API syntax
+- The product's recognizable UI components
+- Real terminal output, JSON responses, SDK patterns developers would recognize
+- Named features/concepts unique to this product: its specific workflow constructs, component model, or access patterns
+
+Generic patterns that fail the competitor substitution test: command palettes (now ubiquitous), kanban boards, unified workspace, real-time collaboration nodes.
+
+### Problem/pain scene specificity
+
+For tech products, the pain must be the pain THIS product specifically replaced:
+
+- **Browser-native design tool**: Show the filename-versioning hell of file-based design ('Final_v3_FINAL_real.sketch'), the email-attachment-feedback loop, 'someone overwrote my artboard'
+- **Opinionated issue tracker**: Show the legacy tool's 47-field issue creation form, the 'which board is this?' confusion across 12 open tabs, notification spam from issue references, the sprint ceremony that produces no actionable output
+- **Unified payments API**: Show the pre-API architecture — multiple vendor SDKs with incompatible object models (a transaction object in one SDK ≠ an account object in another ≠ a score object in a third), the middleware translation layer, the actual code comparison (50 lines of vendor-specific glue code vs. 3 lines)
+
+### Community/identity brand specificity
+
+When the brand truth involves real people or community:
+- Abstract human representations (circles, gradient blobs, silhouettes, generic avatars) are prohibited
+- Use `ef-image` with actual photography, or `ef-video` with real faces
+- For canvas: draw recognizable facial features with variation — or use the product itself as visual subject
+- If you cannot show real people, do not claim community. Claim something visually provable instead.
+- Placeholder attribution handles (@user, @reader, @customer, @reader_1) are prohibited — use named sources or design without attribution
+
+### Physical goods / apparel specificity
+
+For brand marks and product shapes:
+- If the brand has a recognizable logo silhouette, it must appear as actual geometry in canvas — not a generic category shape
+- For a mountain-logo outdoor brand: the specific mountain silhouette from their logo is mandatory. For product shapes: use bezier curves for the actual garment silhouette (distinctive shoulder yoke, chest pocket placement, horizontal quilting of a puffer) — `fillRect()` is prohibited for clothing
+- For waste/environmental scenes: show recognizable garment shapes being discarded, not abstract shapes. The viewer should think "that's my jacket."
+
+### Consumer beauty specificity
+
+Named products, not categories:
+- Use the brand's actual product names and shade names — not generic category words like 'blush' or 'brow gel'
+- Brand's actual taglines and campaign copy verbatim — not invented equivalents
+- Community artifacts by name — not generic handles
+
+---
+
+## Emotional State Arc (Operation 5 examples)
+
+Specific emotional movements by category:
+
+**SaaS/developer**: "Like this problem is finally solved" | "Like building again is possible"
+**Consumer beauty**: "Like they already belong to something before they've bought anything"
+**Apparel**: "Like buying less is somehow an act of defiance they want to be part of"
+**Food**: "Like they've been eating anonymous food their whole life and just found out it has a name"
+
+---
+
+## Generic Visual Defaults to Replace
+
+| Concept | Generic default | What to find instead |
+|---------|-----------------|----------------------|
+| Chaos/Complexity | Tangled bezier curves | What does chaos look like for THIS product's users specifically? |
+| Collaboration | Converging dots, connecting lines | What does collaboration look like in THIS product's actual interface? |
+| Order/Simplicity | Grid layouts | What does resolution look like in THIS product's own UI or workflow? |
+| Scale | Grid multiplication | What unit does THIS brand scale — requests, users, lines of code? Show that unit. |
+| Speed | Motion blur | What is the before/after latency THIS brand eliminates? Show the gap. |
+| Growth | Upward arrows | What grows specifically to THIS brand? |
+| Connection | Network nodes | What specific things connect through THIS product that didn't before? |
+| Transformation | Before/after morph | What is the named "before" state THIS brand's own users describe? |
+| Environmental waste | Abstract particles/shapes | Recognizable objects being discarded with actual product-specific texture |
+| Human faces | Circles, gradients, blobs | Actual facial features, real photography, or product as stand-in |
+
+---
+
+## Community-Driven Brands
+
+**The verification requirement**: When a brand claims community co-creation, the video must reference *verifiable* community artifacts, not plausible reconstructions.
+
+**Wrong**: Generic feedback quotes that sound like real customers ('I wish there was a product that...')
+**Right**: Named sources with verifiable provenance (specific blog post, Reddit thread, documented product origin story with dates and named publication)
+
+**Example (community beauty brand built from a blog)**: The structural truth isn't 'we listen to feedback' — every DTC brand claims this. The structural truth is that the brand's editorial platform existed for years before the first product launched, building documented demand. The video must reference this specific artifact: the platform's name, the year span, the specific community moments that led to specific named products. If you cannot verify the specific community moment, do not fabricate a plausible-sounding quote — note the gap instead.

package/dist/skills/editframe-brand-video-generator/references/color-psychology.md

@@ -0,0 +1,227 @@
+---
+title: Color Psychology
+description: Emotional associations and strategic use of colors in branded video, with palette selection guidance for key moods.
+type: explanation
+order: 6
+---
+
+# Color Psychology for Video
+
+Emotional associations and strategic use of colors in video content.
+
+## Primary Colors
+
+### Red
+**Emotions**: Energy, passion, urgency, excitement, danger, power  
+**Use in video**: CTAs, urgent messages, bold statements, high energy scenes  
+**Avoid**: Overuse can create anxiety or aggression  
+**Pairs well with**: White (clean energy), black (sophistication), gold (luxury)
+
+**Brand personalities**: Bold, passionate, urgent, youthful  
+**Industries**: Food, entertainment, sports, emergency services
+
+### Blue
+**Emotions**: Trust, calm, professionalism, stability, intelligence, sadness  
+**Use in video**: Corporate messaging, trustworthy statements, calming transitions  
+**Avoid**: Can feel cold or distant if overused  
+**Pairs well with**: White (clean tech), gray (corporate), orange (friendly tech)
+
+**Brand personalities**: Professional, trustworthy, calm, intelligent  
+**Industries**: Tech, finance, healthcare, corporate
+
+### Yellow
+**Emotions**: Optimism, happiness, warmth, caution, energy  
+**Use in video**: Positive messages, highlights, attention-grabbing elements  
+**Avoid**: Can strain eyes, hard to read on white  
+**Pairs well with**: Black (high contrast), blue (balanced energy), gray (modern)
+
+**Brand personalities**: Optimistic, friendly, affordable, accessible  
+**Industries**: Food, children's products, budget brands
+
+### Green
+**Emotions**: Growth, nature, health, wealth, calm, envy  
+**Use in video**: Sustainability messages, health content, growth metrics, success states  
+**Avoid**: Can feel stagnant or boring without contrast  
+**Pairs well with**: White (clean), brown (natural), blue (eco-tech)
+
+**Brand personalities**: Natural, healthy, sustainable, growing  
+**Industries**: Health, environment, finance (growth), organic products
+
+## Secondary Colors
+
+### Orange
+**Emotions**: Friendly, enthusiastic, creative, affordable, fun  
+**Use in video**: CTAs, friendly messaging, creative content, approachable brands  
+**Avoid**: Can feel cheap if not balanced with sophistication  
+**Pairs well with**: Blue (tech-friendly), white (clean), teal (modern)
+
+**Brand personalities**: Friendly, creative, energetic, approachable  
+**Industries**: Creative services, budget brands, food, entertainment
+
+### Purple
+**Emotions**: Luxury, creativity, wisdom, spirituality, mystery  
+**Use in video**: Premium products, creative content, innovative messaging  
+**Avoid**: Can feel disconnected from reality  
+**Pairs well with**: Gold (luxury), white (modern luxury), pink (creative)
+
+**Brand personalities**: Luxurious, creative, innovative, spiritual  
+**Industries**: Beauty, luxury goods, creative services, wellness
+
+### Pink
+**Emotions**: Playful, youthful, romantic, feminine, modern (when bold)  
+**Use in video**: Youthful brands, beauty content, playful messaging  
+**Avoid**: Can alienate if gender-coded too strongly  
+**Pairs well with**: White (clean), black (modern), teal (contemporary)
+
+**Brand personalities**: Playful, youthful, bold (hot pink), gentle (soft pink)  
+**Industries**: Beauty, fashion, youth brands, modern tech (when bold)
+
+## Neutrals
+
+### Black
+**Emotions**: Sophistication, luxury, power, elegance, mystery, heaviness  
+**Use in video**: Luxury brands, dramatic moments, text overlays, backgrounds  
+**Avoid**: Can feel oppressive or sad if overused  
+**Pairs well with**: Gold (luxury), white (high contrast), any accent color
+
+**Brand personalities**: Sophisticated, luxurious, powerful, modern  
+**Industries**: Luxury goods, fashion, high-end services
+
+### White
+**Emotions**: Purity, simplicity, cleanliness, space, sterility  
+**Use in video**: Backgrounds, breathing room, minimalist brands, tech  
+**Avoid**: Can feel empty or clinical without warmth  
+**Pairs well with**: Any color (provides contrast and space)
+
+**Brand personalities**: Clean, simple, modern, minimal  
+**Industries**: Tech, healthcare, luxury (minimalist), design
+
+### Gray
+**Emotions**: Professional, neutral, balanced, sophisticated, boring  
+**Use in video**: Corporate content, backgrounds, balancing bold colors  
+**Avoid**: Can feel dull or lifeless as primary color  
+**Pairs well with**: Bright accents, black and white (monochrome sophistication)
+
+**Brand personalities**: Professional, balanced, sophisticated, mature  
+**Industries**: Corporate, professional services, mature brands
+
+## Color Combinations
+
+### High Energy
+- **Red + Yellow**: Fast food, urgency, excitement
+- **Orange + Pink**: Youthful, playful, creative
+- **Red + Black**: Bold, powerful, dramatic
+
+### Trust & Professionalism
+- **Blue + White**: Clean tech, healthcare, corporate
+- **Blue + Gray**: Professional services, finance
+- **Navy + Gold**: Premium professional, established
+
+### Natural & Organic
+- **Green + Brown**: Organic, earthy, sustainable
+- **Green + White**: Clean health, fresh
+- **Sage + Cream**: Gentle wellness, natural
+
+### Luxury & Premium
+- **Black + Gold**: High-end luxury
+- **Purple + Gold**: Royal, premium
+- **Navy + Rose Gold**: Modern luxury
+
+### Modern & Tech
+- **Blue + Orange**: Friendly tech
+- **Purple + Teal**: Innovative tech
+- **Black + Neon**: Cutting edge, bold
+
+### Friendly & Approachable
+- **Orange + Blue**: Approachable professional
+- **Yellow + Teal**: Friendly modern
+- **Coral + Mint**: Soft contemporary
+
+## Video-Specific Considerations
+
+### Background Colors
+- **Dark backgrounds**: Make colors pop, feel cinematic, good for dramatic content
+- **Light backgrounds**: Feel open and airy, good for friendly/approachable content
+- **Colored backgrounds**: Strong brand statement, use brand primary color
+
+### Text Overlays
+- **White text on dark**: High readability, classic
+- **Dark text on light**: Clean, modern, approachable
+- **Colored text**: Use sparingly, must have high contrast with background
+- **Outlined text**: Works on varied backgrounds, but can feel dated
+
+### Transitions
+- **Color to color**: Use analogous colors (next to each other on color wheel) for smooth transitions
+- **Contrasting colors**: Use for dramatic scene changes
+- **Fade through white**: Clean, modern
+- **Fade through black**: Cinematic, dramatic
+
+### Motion & Color
+- **Fast motion**: Use high-contrast colors, bold primaries
+- **Slow motion**: Can use subtle colors, pastels, gradients
+- **Energetic content**: Saturated, bright colors
+- **Calm content**: Desaturated, muted colors
+
+## Extracting Brand Colors
+
+When analyzing a website:
+
+1. **Primary color**: Most prominent color, usually in logo and CTAs
+2. **Secondary colors**: Supporting colors in headers, sections, accents
+3. **Accent colors**: Highlights, hover states, special elements
+4. **Background colors**: Overall page background, section backgrounds
+5. **Text colors**: Primary text, secondary text, links
+
+### Color Dominance
+- **>40% of visual space**: Dominant primary color
+- **20-40%**: Strong secondary color
+- **10-20%**: Supporting color
+- **<10%**: Accent color
+
+### Color Context
+Consider where colors appear:
+- **Logo**: Core brand identity color
+- **CTAs**: Action/urgency color
+- **Headers**: Authority/structure color
+- **Backgrounds**: Mood/atmosphere color
+
+## Applying to Video
+
+### Opening (Hook)
+Use brand's most distinctive color prominently. This creates immediate brand recognition.
+
+### Middle (Content)
+Balance brand colors with neutral space. Don't overwhelm - use colors strategically to highlight key points.
+
+### Closing (CTA)
+Use brand's CTA color (often accent color) to drive action. Should stand out clearly.
+
+### Throughout
+- **Consistency**: Use same colors for same purposes (e.g., always use accent color for CTAs)
+- **Hierarchy**: Primary color for main elements, secondary for supporting, accent for highlights
+- **Breathing room**: Don't fill every pixel with color - use neutrals to create space
+- **Emotional arc**: Can shift color saturation/brightness to match emotional journey
+
+## Common Mistakes
+
+1. **Using too many colors**: Stick to 3-4 main colors maximum
+2. **Ignoring contrast**: Text must be readable, elements must be distinguishable
+3. **Clashing colors**: Use color wheel relationships (complementary, analogous, triadic)
+4. **Forgetting accessibility**: Ensure sufficient contrast ratios (WCAG guidelines)
+5. **Inconsistent usage**: Same color should mean same thing throughout video
+6. **Overwhelming saturation**: Highly saturated colors throughout can cause eye strain
+
+## Quick Reference
+
+| Color | Emotion | Best For | Avoid When |
+|-------|---------|----------|------------|
+| Red | Energy, urgency | CTAs, bold statements | Need calm, trust |
+| Blue | Trust, calm | Corporate, tech | Need energy, warmth |
+| Yellow | Optimism, attention | Highlights, positive | Need sophistication |
+| Green | Growth, health | Sustainability, success | Need urgency, luxury |
+| Orange | Friendly, creative | Approachable brands | Need authority |
+| Purple | Luxury, creative | Premium, innovative | Need accessible |
+| Pink | Playful, modern | Youth, beauty | Need serious tone |
+| Black | Sophisticated | Luxury, drama | Need friendly |
+| White | Clean, simple | Minimal, modern | Need warmth |
+| Gray | Professional | Corporate, balance | Need energy |