# 🎨 VISUAL BRIEF — BOX BREATHING REELS
## @balimentari — Image Assets per Scene

---

## 📐 GLOBAL SPECS

| Item | Value |
|------|-------|
| **Ukuran** | 1080 x 1920 px |
| **Format** | 9:16 PNG/JPG |
| **Background** | #1A5F7A (deep teal), #FDF8F3 (cream) |
| **Brand Color** | #1A5F7A, #2E86AB, #FF9F43, #FECA57 |
| **Font** | Poppins (headline), Inter (body) |

---

## 🎨 ASSETS YANG DIPERLUKAN

### 🟠 CHARACTER: SURYA (Chibi Matahari)

**Base Design:**
- Bentuk: Oval bulat kayak matahari pagi
- Warna: Orange-golden (#FF9F43) + subtle gradient
- Glow: Soft outer glow kuning muda (#FECA57)
- Mata: Besar, bulat, expressive
- Pipi: Blush pink soft
- Tangan: Simple, bisa gesticulate

**Variasi Ekspresi per Scene:**

| Scene | Ekspresi | Gesture | Warna Glow |
|-------|----------|---------|-----------|
| **1** | Wide curious eyes | Tangan angkat keatas | Normal |
| **2** | Happy, following breath | Ikut napas (inflate) | Normal |
| **3** | Zen, eyes half-close | Still, diam | Stronger |
| **4** | Peaceful smile | Ikut exhale (shrink) | Soft |
| **5** | Big smile | Thumbs up | Strong |

---

### 🔵 ELEMENT: LINGKARAN NAPAS (Breathing Circle)

**Design:**
- Bentuk: Perfect circle
- Warna: White (#FFFFFF) dengan soft shadow
- Stroke: 4px white
- Fill: Transparent → white (expand)

**Animasi States:**

| State | Ukuran | Durasi |
|-------|--------|--------|
| Start (center dot) | 50px | - |
| Inhale (expand) | 50px → 400px | 4 detik |
| Hold (max) | 400px | 4 detik |
| Exhale (contract) | 400px → 50px | 8 detik |

---

## 🎬 SCENE-BY-SCENE ASSETS

---

### 🎬 SCENE 1 — HOOK (0:00 - 0:10)

**Background:** #1A5F7A (deep teal)

```
LAYOUT:
┌─────────────────────────────────┐
│                                 │
│            ☀️                   │
│      (SURYA — wide eyes)        │
│      pos: center-top 35%        │
│                                 │
│   ┌───────────────────────┐   │
│   │                       │   │
│   │   LO PANIC?           │   │
│   │   OVERTHINKING?       │   │
│   │   STRESSED?           │   │
│   │                       │   │
│   │   COBA INI. SEKARANG. │   │
│   │                       │   │
│   └───────────────────────┘   │
│        pos: center, 50%         │
│                                 │
│       @balimentari              │
│        pos: bottom center       │
│                                 │
└─────────────────────────────────┘
```

**Elemen:**
- [ ] Surya PNG (wide eyes, curious) — transparent bg
- [ ] Text "LO PANIC?" — Poppins ExtraBold 42pt, White
- [ ] Text "OVERTHINKING?" — Poppins ExtraBold 42pt, White
- [ ] Text "STRESSED?" — Poppins ExtraBold 42pt, White
- [ ] Text "COBA INI. SEKARANG." — Poppins Bold 32pt, #FF9F43
- [ ] Handle "@balimentari" — Poppins SemiBold 18pt, White
- [ ] Background #1A5F7A solid

---

### 🌬️ SCENE 2 — DEMO BOX BREATHING (0:10 - 0:30)

**Background:** #1A5F7A → #2E86AB (gradient)

```
LAYOUT:
┌─────────────────────────────────┐
│                                 │
│          ⭕ Lingkaran           │
│        (center, animating)       │
│                                 │
│    ⬆️ 4s    ⏸️ 4s    ⬇️ 8s   │
│                                 │
│   ┌───────────────────────┐   │
│   │                       │   │
│   │  TARIK  TAHAN  BUANG │   │
│   │   ⬆️     ⏸️     ⬇️   │   │
│   │                       │   │
│   └───────────────────────┘   │
│                                 │
│          ☀️ Surya               │
│      (inflate → still → shrink) │
│                                 │
│        BOX BREATHING × 1x       │
│                                 │
└─────────────────────────────────┘
```

**Elemen:**
- [ ] Surya PNG (follow breath) — transparent bg, 3 poses
- [ ] Breathing Circle SVG (animated)
- [ ] Text "⬆️ 4s" — Poppins Bold 28pt, White
- [ ] Text "⏸️ 4s" — Poppins Bold 28pt, White
- [ ] Text "⬇️ 8s" — Poppins Bold 28pt, #FF9F43
- [ ] Text "TARIK" — Inter Medium 18pt, White
- [ ] Text "TAHAN" — Inter Medium 18pt, White
- [ ] Text "BUANG" — Inter Medium 18pt, White
- [ ] Text "BOX BREATHING" — Poppins ExtraBold 24pt, #FF9F43
- [ ] Text "× 1x" — Poppins SemiBold 20pt, White
- [ ] Background gradient #1A5F7A → #2E86AB

---

### 🧠 SCENE 3 — SCIENCE (0:30 - 0:40)

**Background:** #1A5F7A (solid)

```
LAYOUT:
┌─────────────────────────────────┐
│                                 │
│    KENAPA KERJA? 💡            │
│                                 │
│   ┌───────────────────────┐   │
│   │                       │   │
│   │   ❌ FIGHT OR FLIGHT │   │
│   │         ⬇️             │   │
│   │   ✅ REST & DIGEST    │   │
│   │                       │   │
│   └───────────────────────┘   │
│                                 │
│   Exhale lebih lama =           │
│   "Lo aman. Relax."             │
│                                 │
│          ☀️ Surya zen mode       │
│                                 │
└─────────────────────────────────┘
```

**Elemen:**
- [ ] Surya PNG (zen, eyes closed) — transparent bg
- [ ] Text "KENAPA KERJA? 💡" — Poppins ExtraBold 36pt, White
- [ ] Box "❌ FIGHT OR FLIGHT" — white text, #1A5F7A bg, rounded 12px
- [ ] Arrow SVG animasi ⬇️
- [ ] Box "✅ REST & DIGEST" — white text, #FF9F43 bg, rounded 12px
- [ ] Text "Exhale lebih lama =" — Inter Regular 18pt, White
- [ ] Text "Lo aman. Relax." — Poppins SemiBold 22pt, #FECA57
- [ ] Background #1A5F7A solid

---

### 🎯 SCENE 4 — CTA + CLOSING (0:40 - 0:50)

**Background:** #FDF8F3 (warm cream)

```
LAYOUT:
┌─────────────────────────────────┐
│                                 │
│                                 │
│     COBA SEKARANG. SEKALI.      │
│                                 │
│   ┌───────────────────────┐   │
│   │                       │   │
│   │  📱 Practice di       │   │
│   │     story lo,         │   │
│   │     tag @balimentari! │   │
│   │                       │   │
│   └───────────────────────┘   │
│                                 │
│                                 │
│      @balimentari               │
│    Mind • Body • Soul ☀️        │
│                                 │
│   ☀️ Surya happiest            │
│                                 │
└─────────────────────────────────┘
```

**Elemen:**
- [ ] Surya PNG (big smile, thumbs up) — transparent bg
- [ ] Text "COBA SEKARANG. SEKALI." — Poppins ExtraBold 36pt, #1A5F7A
- [ ] Box CTA — white bg, #1A5F7A border 2px, rounded 16px
- [ ] Text "📱 Practice di story lo," — Inter Medium 20pt, #2D3436
- [ ] Text "tag @balimentari!" — Poppins SemiBold 20pt, #FF9F43
- [ ] Handle "@balimentari" — Poppins Bold 20pt, #1A5F7A
- [ ] Text "Mind • Body • Soul ☀️" — Inter Regular 14pt, #7F8C8D
- [ ] Background #FDF8F3 solid

---

## 🛠️ TOOLS UNTUK BUAT ASSETS

| Tools | Fungsi |
|-------|--------|
| **Figma** | Design all elements (recommended) |
| **Canva** | Quick design + export |
| **Illustrator** | Vector assets (Surya, circle) |
| **Photoshop** | Export final PNG |

---

## 📦 EXPORT SETTINGS

| Item | Value |
|------|-------|
| **Format** | PNG (transparent) / JPG (background) |
| **Resolution** | 1080 x 1920 px |
| **Quality** | 100% |
| **Color Mode** | RGB |
| **Naming** | `balimentari-boxbreathing-scene1.png` |

---

## ✅ ASSETS CHECKLIST

### Characters
- [ ] Surya — Wide eyes (Scene 1)
- [ ] Surya — Follow breath (Scene 2)
- [ ] Surya — Zen closed eyes (Scene 3)
- [ ] Surya — Thumbs up happy (Scene 4)

### UI Elements
- [ ] Breathing Circle SVG
- [ ] Arrow down animated SVG
- [ ] Text boxes (rounded)
- [ ] Icons (📱📸💡)

### Text Styles
- [ ] Poppins ExtraBold 42pt
- [ ] Poppins Bold 32pt
- [ ] Poppins Bold 28pt
- [ ] Inter Medium 18pt
- [ ] Inter Regular 18pt

---

## 🎨 BRAND PALETTE

```
Primary Blue:     #1A5F7A (deep teal)
Secondary Blue:   #2E86AB (bright teal)
Orange:          #FF9F43 (golden)
Light Orange:    #FECA57 (soft yellow)
Background:      #FDF8F3 (warm cream)
Text Dark:       #2D3436 (charcoal)
Text Light:      #FFFFFF (white)
```

---

*Created: Agustini for @balimentari*
*Visual Brief — Box Breathing Reels Assets*