← Leveling Digital
06-story-director
Run: 2026-05-04T15:24:56 · 4788 in / 3321 out tokens · 69.6s
# Story Director Output — Leveling Digital
**Date:** 2025-06-01
**Slots:** 5 stories (assuming daily story production)
---
## Story 1 — 08:00 — type: `behind_scenes`
### Visual instruction
- **Background:** Dark code editor aesthetic (`#1a1a1a`)
- **Avatar usage:** None (pure brand)
- **Image generation needed:** true (HTML render)
### Copy (overlay text)
"Lagi debug sistem automation client. 3 jam stuck di webhook error. Ini kenapa gue suka nerima project SaaS integration 🤓"
### Stickers
- Primary: poll ("Lo pernah stuck di technical debt berhari-hari? 😅")
- Secondary: @levelingdigital.id tag
### CTA
Vote poll → engagement signal buat algoritma
### Render output
- Format: 1080×1920 (9:16)
- File path: content/stories/2025-06-01/story-1.png
- Generation method: HTML render
**HTML structure:**
```html
<div style="width:1080px; height:1920px; background:#1a1a1a; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:80px; font-family:'Inter',sans-serif; position:relative;">
<!-- Grid pattern background -->
<svg width="1080" height="1920" viewBox="0 0 1080 1920" style="position:absolute; top:0; left:0; opacity:0.03;">
<defs>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"/>
</svg>
<!-- Terminal window chrome -->
<div style="position:absolute; top:120px; left:60px;">
<svg width="60" height="14" viewBox="0 0 60 14">
<circle cx="7" cy="7" r="5" fill="#ef4444"/>
<circle cx="22" cy="7" r="5" fill="#fbbf24"/>
<circle cx="37" cy="7" r="5" fill="#10b981"/>
</svg>
</div>
<!-- Code snippet decorative -->
<div style="font-family:'JetBrains Mono',monospace; font-size:16px; color:#5a5a5a; line-height:1.8; margin-bottom:60px; text-align:left; width:100%;">
<div><span style="color:#06b6d4;">01</span> function debugWebhook() {</div>
<div><span style="color:#06b6d4;">02</span> // 3 hours later...</div>
<div><span style="color:#06b6d4;">03</span> return <span style="color:#10b981;">'still_debugging'</span>;</div>
<div><span style="color:#06b6d4;">04</span> }</div>
</div>
<!-- Main copy -->
<div style="color:#ffffff; font-size:38px; font-weight:700; line-height:1.3; text-align:center; margin-bottom:40px; z-index:1;">
Lagi debug sistem automation client. 3 jam stuck di webhook error.
</div>
<div style="color:#a855f7; font-size:32px; font-weight:600; text-align:center; z-index:1;">
Ini kenapa gue suka nerima project SaaS integration 🤓
</div>
<!-- Tag bottom -->
<div style="position:absolute; bottom:100px; font-family:'JetBrains Mono',monospace; font-size:14px; color:#5a5a5a;">
@levelingdigital.id
</div>
</div>
```
---
## Story 2 — 12:00 — type: `poll_engagement`
### Visual instruction
- **Background:** Brand primary (`#EF4444`) solid
- **Avatar usage:** None
- **Image generation needed:** true (HTML render)
### Copy (overlay text)
"Real talk: lo pake tool apa buat manage project client? Notion? Trello? Excel? 👀"
### Stickers
- Primary: poll (4 options: "Notion", "Trello", "Excel", "Tool lain (komen)")
- Secondary: #sistembisnis hashtag
### CTA
Vote poll → see results → comment tool lain
### Render output
- Format: 1080×1920 (9:16)
- File path: content/stories/2025-06-01/story-2.png
- Generation method: HTML render
**HTML structure:**
```html
<div style="width:1080px; height:1920px; background:#EF4444; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:80px; font-family:'Inter',sans-serif; position:relative;">
<!-- Brackets decorative -->
<div style="position:absolute; top:140px; left:80px; font-family:'JetBrains Mono',monospace; font-size:180px; line-height:0.9; color:rgba(255,255,255,0.08); font-weight:800;">
{ }
</div>
<!-- Main copy -->
<div style="color:#ffffff; font-size:44px; font-weight:800; line-height:1.25; text-align:center; margin-bottom:50px; z-index:1;">
Real talk: lo pake tool apa buat manage project client?
</div>
<div style="color:#ffffff; font-size:36px; font-weight:600; text-align:center; opacity:0.95; z-index:1;">
Notion? Trello? Excel? 👀
</div>
<!-- Poll placeholder visual (actual poll added via IG sticker) -->
<div style="margin-top:80px; display:flex; flex-direction:column; gap:20px; width:100%; max-width:600px; z-index:1;">
<div style="background:rgba(255,255,255,0.2); padding:24px; border-radius:16px; color:#ffffff; font-size:24px; font-weight:600; text-align:center;">
📊 Poll sticker here
</div>
</div>
<!-- Hashtag bottom -->
<div style="position:absolute; bottom:100px; font-size:16px; color:rgba(255,255,255,0.7); font-weight:600;">
#sistembisnis
</div>
</div>
```
---
## Story 3 — 16:00 — type: `social_proof`
### Visual instruction
- **Background:** Neutral light (`#FFFFFF`)
- **Avatar usage:** None
- **Image generation needed:** true (HTML render with stat visual)
### Copy (overlay text)
"Last week 47 orang download template automation checklist dari DM. Lo mau? Komen 'CHECKLIST' 📥"
### Stickers
- Primary: mention @levelingdigital.id
- Secondary: None (keep clean for CTA focus)
### CTA
Comment 'CHECKLIST' → receive via DM
### Render output
- Format: 1080×1920 (9:16)
- File path: content/stories/2025-06-01/story-3.png
- Generation method: HTML render
**HTML structure:**
```html
<div style="width:1080px; height:1920px; background:#FFFFFF; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:80px; font-family:'Inter',sans-serif; position:relative;">
<!-- Grid background subtle -->
<svg width="1080" height="1920" viewBox="0 0 1080 1920" style="position:absolute; top:0; left:0; opacity:0.02;">
<defs>
<pattern id="grid2" width="48" height="48" patternUnits="userSpaceOnUse">
<path d="M 48 0 L 0 0 0 48" fill="none" stroke="#0A0A0A" stroke-width="0.5"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid2)"/>
</svg>
<!-- Stat visual -->
<div style="margin-bottom:60px; z-index:1;">
<div style="font-size:160px; font-weight:900; color:#EF4444; line-height:0.9; letter-spacing:-0.02em;">47</div>
<div style="font-size:28px; font-weight:600; color:#525252; text-align:center; margin-top:20px;">orang minggu lalu</div>
</div>
<!-- Main copy -->
<div style="color:#0A0A0A; font-size:38px; font-weight:700; line-height:1.3; text-align:center; margin-bottom:50px; max-width:800px; z-index:1;">
Last week 47 orang download template automation checklist dari DM.
</div>
<!-- CTA box -->
<div style="background:#EF4444; padding:30px 60px; border-radius:20px; z-index:1;">
<div style="color:#FFFFFF; font-size:32px; font-weight:800; text-align:center;">
Lo mau? Komen 'CHECKLIST' 📥
</div>
</div>
<!-- Tag chip bottom -->
<div style="position:absolute; bottom:120px; display:inline-block; padding:12px 24px; background:rgba(239,68,68,0.1); color:#EF4444; border-radius:12px; font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700;">
@levelingdigital.id
</div>
</div>
```
---
## Story 4 — 19:00 — type: `proof_screenshot`
### Visual instruction
- **Background:** Screenshot of DM testimonial (mock structure if no real screenshot available)
- **Avatar usage:** None
- **Image generation needed:** true (composite: screenshot bg + overlay text)
### Copy (overlay text)
"'Akhirnya onboarding client gue streamline.' — DM dari founder kemarin. Sistemisasi emang game changer 🔥"
### Stickers
- Primary: Save reminder ("Save buat reference nanti")
- Secondary: @levelingdigital.id tag
### CTA
Save story → signal high-value content
### Render output
- Format: 1080×1920 (9:16)
- File path: content/stories/2025-06-01/story-4.png
- Generation method: HTML render (mock DM screenshot structure)
**HTML structure:**
```html
<div style="width:1080px; height:1920px; background:#0A0A0A; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:60px; font-family:'Inter',sans-serif; position:relative;">
<!-- Mock DM interface -->
<div style="background:#FFFFFF; width:900px; border-radius:24px; padding:40px; box-shadow:0 20px 60px rgba(0,0,0,0.3); z-index:1;">
<!-- DM header -->
<div style="display:flex; align-items:center; gap:16px; margin-bottom:30px; padding-bottom:20px; border-bottom:1px solid #e5e5e5;">
<div style="width:48px; height:48px; border-radius:50%; background:#EF4444;"></div>
<div>
<div style="font-size:18px; font-weight:700; color:#0A0A0A;">Founder SaaS</div>
<div style="font-size:14px; color:#525252;">@client_handle</div>
</div>
</div>
<!-- DM bubble -->
<div style="background:#f5f5f5; padding:24px; border-radius:16px; margin-bottom:20px;">
<div style="font-size:20px; color:#0A0A0A; line-height:1.5; font-weight:500;">
Mas, akhirnya onboarding client gue streamline setelah implement sistem yang lo share kemarin. Game changer sih ini 🙏
</div>
</div>
<div style="font-size:14px; color:#525252; text-align:right;">15 menit yang lalu</div>
</div>
<!-- Overlay text bottom -->
<div style="position:absolute; bottom:140px; color:#FFFFFF; font-size:32px; font-weight:700; text-align:center; max-width:800px; line-height:1.3; z-index:2;">
Sistemisasi emang game changer 🔥
</div>
<!-- Tag -->
<div style="position:absolute; bottom:80px; font-family:'JetBrains Mono',monospace; font-size:14px; color:rgba(255,255,255,0.6);">
@levelingdigital.id
</div>
</div>
```
---
## Story 5 — 21:00 — type: `hard_cta`
### Visual instruction
- **Background:** Secondary color (`#06B6D4`) solid
- **Avatar usage:** None
- **Image generation needed:** true (HTML render)
### Copy (overlay text)
"Slot konsultasi gratis tutup besok jam 12 siang. Mau bahas sistem lo? Swipe up sekarang ⬆️"
### Stickers
- Primary: Link sticker (swipe up to calendar booking)
- Secondary: Countdown sticker (set 15 jam remaining)
### CTA
Swipe up → link to booking calendar
### Render output
- Format: 1080×1920 (9:16)
- File path: content/stories/2025-06-01/story-5.png
- Generation method: HTML render
**HTML structure:**
```html
<div style="width:1080px; height:1920px; background:#06B6D4; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:80px; font-family:'Inter',sans-serif; position:relative; overflow:hidden;">
<!-- Geometric accent top -->
<div style="position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,0.1); z-index:0;"></div>
<!-- Urgency badge -->
<div style="background:#EF4444; padding:16px 40px; border-radius:50px; margin-bottom:50px; z-index:1;">
<div style="color:#FFFFFF; font-size:20px; font-weight:800; letter-spacing:0.05em;">⏰ LAST 15 JAM</div>
</div>
<!-- Main copy -->
<div style="color:#FFFFFF; font-size:48px; font-weight:900; line-height:1.2; text-align:center; margin-bottom:40px; max-width:800px; z-index:1;">
Slot konsultasi gratis tutup besok jam 12 siang.
</div>
<div style="color:#FFFFFF; font-size:36px; font-weight:600; text-align:center; opacity:0.95; margin-bottom:80px; z-index:1;">
Mau bahas sistem lo?
</div>
<!-- CTA arrow -->
<div style="display:flex; flex-direction:column; align-items:center; gap:20px; z-index:1;">
<div style="color:#FFFFFF; font-size:32px; font-weight:800;">SWIPE UP SEKARANG</div>
<div style="font-size:80px; line-height:1; animation: bounce 1.5s ease-in-out infinite;">⬆️</div>
</div>
<!-- Terminal prompt decorative bottom -->
<div style="position:absolute; bottom:100px; font-family:'JetBrains Mono',monospace; padding:16px 24px; background:rgba(0,0,0,0.2); color:#FFFFFF; border-radius:8px; font-size:14px; z-index:1;">
<span style="color:#10b981;">$</span> book-slot --now
</div>
</div>
<style>
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
</style>
```
---
## Summary
**Total stories:** 5
**Formats:**
- Behind-the-scenes: 1 (code debugging authenticity)
- Poll engagement: 1 (tool preference discovery)
- Social proof: 1 (download stat + lead magnet CTA)
- Proof screenshot: 1 (DM testimonial)
- Hard CTA: 1 (time-limited consultation slot)
**Visual diversity:**
- Dark code editor aesthetic (story 1)
- Bold brand primary (story 2)
- Clean white stat visual (story 3)
- DM screenshot composite (story 4)
- Secondary color urgency (story 5)
**CTA variety:**
- Poll vote (story 2)
- Comment keyword (story 3)
- Save (story 4)
- Swipe up link (story 5)
- Engagement (story 1)
**Niche DNA usage:**
- Code snippets (story 1)
- Brackets decorative (story 2)
- Grid patterns (stories 1, 3)
- Terminal prompt (story 5)
- Mono font tags (stories 1, 3, 5)
- Window chrome (story 1)
**Anti-hype compliance:** ✅ No income promises, no automation hype, no "lunas hutang" angle. Pure operational/educational positioning.
**Cost estimate:** 5 stories × ~180 tokens each = ~900 tokens total (~Rp1.350 @ Rp1.5/token)