@autoaiai/aicut 0.1.7 → 0.1.11

package/skills/remotion-ads/references/copy-frameworks.md

@@ -0,0 +1,144 @@
+---
+title: Copy Frameworks Reference
+description: Headline formulas, section types, and structural templates for ad and landing page copy
+section: copywriting
+priority: low
+tags: [reference, headlines, frameworks, templates, landing-page]
+---
+
+# Copy Frameworks Reference
+
+Headline formulas, page section types, and structural templates adapted for video ad and carousel creation.
+
+---
+
+## Headline Formulas
+
+### Outcome-Focused
+
+| Formula | Example |
+|---------|---------|
+| `{Achieve outcome} without {pain point}` | Understand your property issues without expensive lawyers |
+| `{Achieve outcome} by {how it works}` | Get your money back by proving the seller knew |
+| `Turn {input} into {outcome}` | Turn your claim into compensation |
+| `[Achieve outcome] in [timeframe]` | Get legal clarity in one consultation |
+
+### Problem-Focused
+
+| Formula | Example |
+|---------|---------|
+| `Never {unpleasant event} again` | Never miss a legal deadline again |
+| `{Question about pain point}?` | Discovered hidden defects after buying? |
+| `Stop [pain]. Start [pleasure].` | Stop worrying. Start building your case. |
+
+### Audience-Focused
+
+| Formula | Example |
+|---------|---------|
+| `{Feature} for {audience}` | Legal protection for property buyers |
+| `You don't have to {skill} to {outcome}` | You don't have to be a lawyer to know your rights |
+
+### Differentiation-Focused
+
+| Formula | Example |
+|---------|---------|
+| `The {opposite} way to {outcome}` | The straightforward way to resolve property disputes |
+| `The [category] that [differentiator]` | The law firm that actually explains things |
+| `Finally, [category] that [benefit]` | Finally, legal advice that makes sense |
+
+### Proof-Focused
+
+| Formula | Example |
+|---------|---------|
+| `[Number] [people] use [product] to [outcome]` | 500+ homeowners trusted us to resolve disputes |
+| `{Key benefit}` | Clear answers within 48 hours |
+
+---
+
+## Video Ad Section Templates
+
+### 15-Second Instagram Reel
+
+```
+Scene 1 (3s): Hook — Emotional question or bold statement
+Scene 2 (4s): Problem — Specific pain point with consequences
+Scene 3 (4s): Solution — What you offer + credibility
+Scene 4 (4s): CTA — Exact next step + brand
+```
+
+### 60-Second Explainer
+
+```
+Scene 1 (5s):  Hook — Dramatic question or stat
+Scene 2 (10s): Problem — Deep dive into the issue
+Scene 3 (15s): Context — Legal background or process
+Scene 4 (15s): Solution — Step-by-step approach
+Scene 5 (10s): Process — What working with you looks like
+Scene 6 (5s):  CTA — Clear next step + contact info
+```
+
+### Carousel (5 Slides)
+
+```
+Slide 1: Hook headline + curiosity subtitle
+Slide 2: Problem — What can go wrong
+Slide 3: Key insight — What most people don't know
+Slide 4: Solution steps — How to address it
+Slide 5: CTA — Book consultation / contact info
+```
+
+---
+
+## CTA Formulas
+
+### Weak (Avoid)
+
+- "Learn more"
+- "Click here"
+- "Submit"
+- "Contact us"
+
+### Strong (Use)
+
+| Formula | Example |
+|---------|---------|
+| `[Action] your [specific thing]` | Check your legal options |
+| `Get [specific deliverable]` | Get your free case assessment |
+| `Start [process]` | Start your claim today |
+| `[Action] in [timeframe]` | Book a consultation this week |
+
+### CTA Enhancers
+
+Add urgency or reduce friction:
+- "Free consultation — no obligation"
+- "Takes 2 minutes"
+- "We respond within 24 hours"
+- "Over 500 satisfied clients"
+
+---
+
+## Section Writing Tips
+
+### Problem Section
+Start with recognition, then escalate:
+1. "You know the feeling..." (empathy)
+2. The specific frustration (detail)
+3. The time/money wasted (cost)
+4. What happens if ignored (stakes)
+
+### Solution Section
+For each benefit:
+1. **Headline**: The outcome they get
+2. **Body**: How it works (1-2 sentences)
+3. **Proof**: Number, testimonial, or example
+
+### How It Works
+Each step should be:
+1. **Numbered**: Creates sense of progress
+2. **Simple verb**: "Contact," "Explain," "Resolve"
+3. **Outcome-oriented**: What they get from this step
+
+Example:
+1. Tell us what happened (free initial call)
+2. We review your case and options
+3. You decide how to proceed — no pressure

package/skills/remotion-ads/references/formats.md

@@ -0,0 +1,436 @@
+---
+title: Instagram Display Formats
+description: Display formats, dimensions, and safe zones for Instagram Reels
+section: formats
+priority: high
+tags: [dimensions, safe-zones, formats, instagram, reels]
+---
+
+# Instagram Display Formats
+
+Instagram shows Reels in multiple formats. Design for all three to ensure visibility.
+
+---
+
+## Format Overview
+
+| Format | Aspect Ratio | Dimensions | Where Shown |
+|--------|--------------|------------|-------------|
+| **Full-screen Reels** | 9:16 | 1080×1920 | Reels tab, Stories |
+| **Feed Preview** | 4:5 | 1080×1350 | Main feed (MOST COMMON) |
+| **Profile Grid** | 1:1 | 1080×1080 | Profile page grid |
+
+---
+
+## 1. Full-screen Reels Tab (9:16)
+
+The native Reels viewing experience.
+
+```
+Canvas: 1080×1920px (full resolution)
+UI overlay: Bottom ~10-15% (y > 1630-1725px)
+Shows: Complete video content
+```
+
+### What's Visible
+- Full video frame
+- UI elements overlay bottom portion
+- Username, like/comment/share buttons visible
+
+### Safe Zones
+```
+Top: 0-285px (username, system UI)
+Bottom: 1520-1920px (buttons, captions, audio)
+Sides: 80px left, 120px right
+```
+
+---
+
+## 2. Feed Preview (4:5) - MOST COMMON
+
+How most users first see your Reel in their feed.
+
+```
+Shows: 1080×1350px (centered)
+Crops: ~285px from top AND bottom of 9:16 canvas
+Users must tap to see full video
+```
+
+### Visual Representation
+
+```
+Original 9:16 (1080×1920)        Feed 4:5 Preview (1080×1350)
+┌─────────────────────────┐
+│     CROPPED (285px)     │
+│.........................│      ┌─────────────────────────┐
+│                         │      │                         │
+│                         │      │                         │
+│    VISIBLE IN FEED      │  →   │    VISIBLE IN FEED      │
+│       PREVIEW           │      │       PREVIEW           │
+│                         │      │                         │
+│                         │      │                         │
+│.........................│      └─────────────────────────┘
+│     CROPPED (285px)     │
+└─────────────────────────┘
+```
+
+### Critical Implication
+**Key content must be within y = 285px to y = 1635px** to be visible in the feed preview.
+
+---
+
+## 3. Profile Grid (1:1)
+
+Thumbnail shown on profile page.
+
+```
+Shows: Central 1080×1080 square
+Crops: ~420px from top AND bottom
+Used for: Profile grid thumbnails
+```
+
+### Visual Representation
+
+```
+Original 9:16 (1080×1920)        Grid 1:1 Preview (1080×1080)
+┌─────────────────────────┐
+│     CROPPED (420px)     │
+│.........................│      ┌─────────────────────────┐
+│                         │      │                         │
+│   VISIBLE IN GRID       │  →   │   VISIBLE IN GRID       │
+│      THUMBNAIL          │      │      THUMBNAIL          │
+│                         │      │                         │
+│.........................│      └─────────────────────────┘
+│     CROPPED (420px)     │
+└─────────────────────────┘
+```
+
+### Critical Implication
+**Brand logos and key visuals must be within y = 420px to y = 1500px** to be visible in grid thumbnails.
+
+---
+
+## Multi-Format Safe Design
+
+### Remotion Constants
+
+```tsx
+export const INSTAGRAM_FORMATS = {
+  // Full-screen Reels (9:16)
+  reels: {
+    width: 1080,
+    height: 1920,
+    aspectRatio: "9:16",
+  },
+
+  // Feed Preview (4:5) - crops top and bottom
+  feedPreview: {
+    width: 1080,
+    height: 1350,
+    cropTop: 285,
+    cropBottom: 285,  // 1920 - 285 - 1350 = 285
+  },
+
+  // Grid Preview (1:1) - crops more
+  gridPreview: {
+    width: 1080,
+    height: 1080,
+    cropTop: 420,
+    cropBottom: 420,  // 1920 - 420 - 1080 = 420
+  },
+
+  // Content visible in ALL formats
+  universalSafe: {
+    minY: 420,   // Below 1:1 top crop
+    maxY: 1500,  // Above 1:1 bottom crop
+    minX: 80,
+    maxX: 1000,
+    width: 920,
+    height: 1080,
+  },
+
+  // Branding zone (visible in grid thumbnail)
+  brandingZone: {
+    x: 0,
+    y: 420,
+    width: 1080,
+    height: 1080,  // Center 1:1 square
+  },
+};
+```
+
+### Zone Visualization
+
+```
+┌─────────────────────────────────────┐ 0px
+│                                     │
+│        ⚠️ TOP CROP ZONE            │ } 285px (4:5 crop)
+│        (not in feed preview)        │
+├─────────────────────────────────────┤ 285px
+│                                     │
+│   ⚠️ EXTRA TOP CROP (GRID ONLY)    │ } 135px more (1:1 crop)
+│                                     │
+├─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┤ 420px
+│                                     │
+│                                     │
+│    ✅ UNIVERSAL SAFE ZONE          │
+│       (visible in ALL formats)      │
+│                                     │
+│    Place: Logo, key messages,       │
+│    faces, important visuals         │
+│                                     │
+│                                     │
+├─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┤ 1500px
+│                                     │
+│   ⚠️ EXTRA BOTTOM CROP (GRID ONLY) │ } 135px more (1:1 crop)
+│                                     │
+├─────────────────────────────────────┤ 1635px
+│                                     │
+│       ⚠️ BOTTOM CROP ZONE          │ } 285px (4:5 crop)
+│       (not in feed preview)         │
+│                                     │
+└─────────────────────────────────────┘ 1920px
+```
+
+---
+
+## Format-Specific Components
+
+### Universal Safe Area Component
+
+```tsx
+/**
+ * Content placed here is visible in ALL Instagram formats:
+ * - Full-screen Reels (9:16)
+ * - Feed preview (4:5)
+ * - Profile grid (1:1)
+ */
+export const UniversalSafeArea: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{
+    position: "absolute",
+    top: 420,      // Below 1:1 top crop
+    bottom: 420,   // Above 1:1 bottom crop
+    left: 80,      // Side margin
+    right: 120,    // Right margin (action buttons)
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  }}>
+    {children}
+  </div>
+);
+```
+
+### Feed Preview Safe Area Component
+
+```tsx
+/**
+ * Content placed here is visible in:
+ * - Full-screen Reels (9:16)
+ * - Feed preview (4:5)
+ * NOT visible in profile grid (1:1)
+ */
+export const FeedSafeArea: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{
+    position: "absolute",
+    top: 285,      // Below 4:5 top crop
+    bottom: 285,   // Above 4:5 bottom crop
+    left: 80,
+    right: 120,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  }}>
+    {children}
+  </div>
+);
+```
+
+---
+
+## Debug Overlay for Format Testing
+
+```tsx
+export const FormatDebugOverlay: React.FC = () => (
+  <>
+    {/* 4:5 Feed crop lines */}
+    <div style={{
+      position: "absolute",
+      top: 285, left: 0, right: 0,
+      height: 2,
+      backgroundColor: "rgba(255,165,0,0.8)",
+    }} />
+    <div style={{
+      position: "absolute",
+      top: 285, left: 10,
+      color: "orange",
+      fontSize: 18,
+      fontWeight: "bold",
+    }}>
+      4:5 FEED CROP (285px)
+    </div>
+    <div style={{
+      position: "absolute",
+      bottom: 285, left: 0, right: 0,
+      height: 2,
+      backgroundColor: "rgba(255,165,0,0.8)",
+    }} />
+
+    {/* 1:1 Grid crop lines */}
+    <div style={{
+      position: "absolute",
+      top: 420, left: 0, right: 0,
+      height: 2,
+      backgroundColor: "rgba(0,255,0,0.8)",
+    }} />
+    <div style={{
+      position: "absolute",
+      top: 420, left: 10,
+      color: "lime",
+      fontSize: 18,
+      fontWeight: "bold",
+    }}>
+      1:1 GRID CROP (420px)
+    </div>
+    <div style={{
+      position: "absolute",
+      bottom: 420, left: 0, right: 0,
+      height: 2,
+      backgroundColor: "rgba(0,255,0,0.8)",
+    }} />
+
+    {/* Center marker */}
+    <div style={{
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: 20,
+      height: 20,
+      borderRadius: "50%",
+      backgroundColor: "rgba(255,0,0,0.8)",
+    }} />
+  </>
+);
+```
+
+---
+
+## Cover/Thumbnail Design
+
+### Dimensions
+
+```
+Design at: 1080×1920 (matches Reel)
+Grid display: Center 1080×1080 will be shown
+Alternative spec: 420×654px (1:1.55 ratio)
+```
+
+### Cover Best Practices
+
+1. **Center key elements** within middle 1080×1080 square
+2. **Ensure titles/faces/logos** visible in 1:1 crop
+3. **Design for both** 9:16 (Reels tab) and 1:1 (grid) views
+4. **Test thumbnail** in both formats before posting
+5. **Use high contrast** text that's readable at small sizes
+
+### Cover Zone Component
+
+```tsx
+/**
+ * Wrapper for content that should be visible
+ * in profile grid thumbnails
+ */
+export const CoverSafeZone: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{
+    position: "absolute",
+    top: 420,
+    left: 0,
+    right: 0,
+    height: 1080,  // 1:1 square
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 80px",
+  }}>
+    {children}
+  </div>
+);
+```
+
+---
+
+## Content Placement Strategy
+
+### By Content Type
+
+| Content | Zone | Y Range | Why |
+|---------|------|---------|-----|
+| Logo | Universal | 420-1500px | Visible in grid thumbnail |
+| Main headline | Universal | 420-1500px | Visible everywhere |
+| Hook text | Feed | 300-600px | Grabs attention, ok if cropped in grid |
+| Problem list | Feed | 500-1200px | Main content area |
+| Solution | Universal | 700-1200px | Key message visible everywhere |
+| CTA | Universal | 600-1000px | Must be visible everywhere |
+| Captions | Feed | 1300-1600px | Above bottom UI, below grid crop |
+
+### Scene-by-Scene Recommendations
+
+| Scene | Primary Zone | Reason |
+|-------|--------------|--------|
+| Hook (Scene 1) | Universal | First impression in grid thumbnail |
+| Problem (Scene 2) | Feed | Can use more vertical space |
+| Solution (Scene 3) | Universal | Key message must be visible |
+| CTA (Scene 4) | Universal | Logo/CTA must be in grid thumbnail |
+
+---
+
+## Export & Testing
+
+### Preview Crops in Remotion Studio
+
+```tsx
+// Add to your composition for testing
+const showCropGuides = true; // Set to false for production
+
+{showCropGuides && <FormatDebugOverlay />}
+```
+
+### Manual Testing Checklist
+
+- [ ] Open in Remotion Studio at 1080×1920
+- [ ] Check content at y = 285-1635 (4:5 preview)
+- [ ] Check content at y = 420-1500 (1:1 grid)
+- [ ] Logo visible in center 1080×1080 square
+- [ ] Key text readable in all formats
+- [ ] Upload test to Instagram and verify in:
+  - Feed preview
+  - Full-screen Reels
+  - Profile grid
+
+---
+
+## Quick Reference
+
+### Safe Y Coordinates
+
+| Zone | Min Y | Max Y | Height |
+|------|-------|-------|--------|
+| Full Reels | 0 | 1920 | 1920px |
+| Feed Preview | 285 | 1635 | 1350px |
+| Grid Thumbnail | 420 | 1500 | 1080px |
+| Universal Safe | 420 | 1500 | 1080px |
+
+### Critical Numbers to Remember
+
+```
+285px - Feed preview starts/ends here
+420px - Grid thumbnail starts/ends here
+540px - Center of feed preview (285 + 675)
+960px - True center of canvas (1920/2)
+1080px - Grid thumbnail height
+1350px - Feed preview height
+```