03-carousel-designer

Run: 2026-06-03T09:05:49 · 19417 in / 23085 out tokens · 396.9s

Re-run

# CAROUSEL 1: Lo Build Beat Sendiri Tapi Sounding Flat ## METADATA - Topic: Mixing fundamental — spatial depth dalam musik AI-generated - Audience focus: Music producer pemula yang pakai AI tools tapi output masih sounding "kamar" - Slide count: 10 - Suggested caption: Save buat session mixing berikutnya. Atau share ke temen lo yang beatnya masih sounds "ditumpuk semua". 🎚️ #TuneCash  ```json { "topic": "AI music production spatial depth mixing", "subject_hint": "frustrated music producer staring at cluttered DAW screen with flat waveforms, headphones on, dim studio lighting", "emotion": "frustrated, overwhelmed, stuck", "headline": "Beat Lo Sounds Flat", "headline_pre": "Beat Lo Sounds", "headline_serif_part": "Flat", "subheadline": "Padahal udah layer 12 track", "label_top": "TUNECASH · MIXING SERIES", "cta_pill": "FIX IT NOW" } ```   <section class="slide slide-1 carousel-slide cover" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="top-bar"> <span class="brand-handle">@tunecash.id</span> <span class="slide-num">01 / 10</span> </div> <div class="hero-block"> <div style="position:relative; width:320px; height:320px; margin:0 auto 40px;"> <svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 320 320"> <circle cx="160" cy="160" r="150" stroke="var(--primary)" stroke-width="3" fill="none" opacity="0.2"/> <circle cx="160" cy="160" r="110" stroke="var(--secondary)" stroke-width="4" fill="none" opacity="0.4"/> <circle cx="160" cy="160" r="70" fill="var(--bg-soft)"/> </svg> <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center;"> <svg class="icon-mega" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 18V5l12-2v13"/> <circle cx="6" cy="18" r="3"/> <circle cx="18" cy="16" r="3"/> </svg> </div> </div> <h1 class="hero">Beat Lo Sounds<br><span style="font-family:'Crimson Pro',serif; font-style:italic; color:var(--primary);">Flat.</span></h1> <p class="sub" style="margin-top:24px; color:var(--muted);">Padahal udah layer 12 track</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> <span class="caption">Save Buat Session Berikutnya</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Beat Lo Sounds Flat — TuneCash</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1327BE; --secondary: #06B6D4; --accent: #A855F7; --danger: #EF4444; --neutral-light: #FFFFFF; --neutral-dark: #0A0A0A; --neutral-mid: #525252; --bg: #FDF8F3; --bg-soft: #F1ECE3; --bg-white: #FFFFFF; --bg-dark: #1A1A1A; --ink: #1A1A1A; --ink-on-dark: #FAFAFA; --muted: #5A5A5A; --line: #E5E0D6; --highlight: #FEF08A; --soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --soft-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #E5E5E5; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } .slide { width: 1080px; height: 1350px; background: var(--bg); color: var(--ink); padding: 80px; display: flex; flex-direction: column; justify-content: center; page-break-after: always; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .slide.bg-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .slide.bg-brand { background: var(--primary); color: var(--neutral-light); } .hero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 96px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; } .headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 56px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; } .sub { font-size: 32px; line-height: 1.4; font-weight: 400; } .body { font-size: 28px; line-height: 1.5; font-weight: 400; } .caption { font-size: 22px; line-height: 1.5; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .highlight { background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%); padding: 0 6px; font-weight: 700; } .accent-word { color: var(--primary); font-weight: 800; } .number-badge { position: absolute; top: 48px; right: 48px; font-family: 'Inter', monospace; font-size: 22px; color: var(--muted); letter-spacing: 0.08em; font-weight: 600; } .brand-ribbon { position: absolute; bottom: 48px; left: 80px; font-size: 22px; color: var(--muted); letter-spacing: 0.05em; font-weight: 600; } .icon-mega { width: 320px; height: 320px; max-width: 320px; max-height: 320px; flex-shrink: 0; stroke-width: 2.5; display: block; } .icon-hero { width: 240px; height: 240px; max-width: 240px; max-height: 240px; flex-shrink: 0; stroke-width: 2.5; display: block; } .icon-inline { width: 36px; height: 36px; max-width: 36px; max-height: 36px; flex-shrink: 0; display: inline-block; vertical-align: middle; } .icon-circle { width: 320px; height: 320px; max-width: 320px; max-height: 320px; flex-shrink: 0; background: var(--bg-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 40px; } .slide svg:not([class*="icon-"]) { max-width: 64px; max-height: 64px; } .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; } .bottom-bar { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } @media print { body { background: #FFFFFF; } .slide { margin: 0; box-shadow: none; } } </style> <style> /* === Image hook slide 1 overlay (injected by carousel_composer) === */ /* Format-responsive: slide dimensions come from html data-format attribute (set by slide_renderer via format.json). Defaults to 1:1 if no attr. */ .slide { aspect-ratio: 1 / 1; } html[data-format="4:5"] .slide, .slide[data-format="4:5"] { aspect-ratio: 4 / 5; } .slide.slide-1.hook-image { padding: 0 !important; position: relative; overflow: hidden; } .slide.slide-1 .hook-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .slide.slide-1 .hook-overlay { position: relative; z-index: 2; width: 100%; height: 100%; padding: 80px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.32) 100%); } .slide.slide-1 .hook-label { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.95; } .slide.slide-1 .hook-content { display: flex; flex-direction: column; gap: 18px; } .slide.slide-1 .hook-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 124px; line-height: 1.0; letter-spacing: -0.02em; max-width: 90%; margin: 0; } .slide.slide-1 .hook-title .serif-italic { font-family: 'Crimson Pro', 'Playfair Display', serif; font-weight: 600; font-style: italic; font-size: 130px; letter-spacing: 0; } .slide.slide-1 .hook-sub { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 500; max-width: 75%; line-height: 1.3; opacity: 0.94; margin: 0; } .slide.slide-1 .hook-cta { align-self: flex-start; font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 26px; background: rgba(255, 255, 255, 0.95); color: #1a1a1a; border-radius: 999px; text-shadow: none; } /* Typography variants */ .slide.slide-1.modern-sans-tight .hook-title, .slide.slide-1.modern-sans-tight .hook-title .serif-italic { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.04em; font-style: normal; } .slide.slide-1.minimal-display .hook-title { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; font-weight: 800; } .slide.slide-1.minimal-display .hook-title .serif-italic { font-family: 'Bricolage Grotesque', sans-serif; font-style: italic; } </style> <style> /* === Image hook v2 typography (injected by carousel_composer) === */ :root { --slide1-primary-font: 'Plus Jakarta Sans, DM Sans, or Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Poppins or Lexend ; alternatively DM Mono for tech appeal', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 800; --slide1-accent-style: italic; } .slide.slide-1 .hook-title { font-family: var(--slide1-primary-font) !important; font-weight: var(--slide1-primary-weight) !important; } .slide.slide-1 .hook-title .serif-italic, .slide.slide-1 .accent { font-family: var(--slide1-accent-font) !important; font-style: var(--slide1-accent-style) !important; } </style> </head> <body> <section class="slide slide-1 carousel-slide cover" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="top-bar"> <span class="brand-handle">@tunecash.id</span> <span class="slide-num">01 / 10</span> </div> <div class="hero-block"> <div style="position:relative; width:320px; height:320px; margin:0 auto 40px;"> <svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 320 320"> <circle cx="160" cy="160" r="150" stroke="var(--primary)" stroke-width="3" fill="none" opacity="0.2"/> <circle cx="160" cy="160" r="110" stroke="var(--secondary)" stroke-width="4" fill="none" opacity="0.4"/> <circle cx="160" cy="160" r="70" fill="var(--bg-soft)"/> </svg> <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center;"> <svg class="icon-mega" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 18V5l12-2v13"/> <circle cx="6" cy="18" r="3"/> <circle cx="18" cy="16" r="3"/> </svg> </div> </div> <h1 class="hero">Beat Lo Sounds<br><span style="font-family:'Crimson Pro',serif; font-style:italic; color:var(--primary);">Flat.</span></h1> <p class="sub" style="margin-top:24px; color:var(--muted);">Padahal udah layer 12 track</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> <span class="caption">Save Buat Session Berikutnya</span> </div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">02 / 10</div> <div class="center-content"> <div style="position:relative; width:280px; margin:0 auto 40px;"> <div style="font-family:'JetBrains Mono',monospace; font-size:180px; line-height:0.9; color:rgba(19,39,190,0.12); font-weight:800; text-align:center;">12</div> <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> <line x1="9" y1="3" x2="9" y2="21"/> </svg> </div> </div> <h2 class="headline" style="text-align:center;">12 track tapi sounds<br>kayak <span class="highlight">ditumpuk semua</span><br>di ruang yang sama.</h2> <p class="body" style="margin-top:32px; color:var(--muted); text-align:center;">Masalahnya bukan AI. Masalahnya lo nggak pakai <span style="color:var(--primary); font-weight:700;">spatial depth.</span></p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">03 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom:32px; color:var(--secondary);">KONTEKS</span> <h2 class="headline">AI ngasih lo<br>sound berkualitas.</h2> <p class="body" style="margin-top:32px;">Tapi AI nggak tau beat lo mau di <span class="accent-word">depan</span>, <span style="color:var(--secondary); font-weight:700;">tengah</span>, atau <span style="color:var(--accent); font-weight:700;">belakang</span> listener.</p> <p class="body" style="margin-top:24px; color:var(--muted);">Itu tugas lo. Ini 5 parameter yang bikin spatial depth:</p> <div style="margin-top:40px; font-family:'JetBrains Mono',monospace; padding:16px 20px; background:#1a1a1a; color:#10b981; border-radius:6px; font-size:16px;"> <span style="color:#06b6d4;">$</span> mix --depth <span style="color:#5a5a5a;">front mid back</span> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(6,182,212,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(6,182,212,0.05), transparent 40%), var(--bg);"> <div class="number-badge">04 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">1</div> <h2 class="headline" style="flex:1;">Volume = Jarak</h2> </div> <p class="body">Loud = depan. Soft = belakang. Simple tapi <span class="highlight">paling sering dilupain.</span></p> <div style="margin-top:40px; padding:32px; background:var(--bg-soft); border-radius:12px;"> <p class="body" style="font-size:24px; color:var(--muted);">Kick & vocal → <span style="color:var(--secondary); font-weight:700;">-6dB</span> (front)</p> <p class="body" style="font-size:24px; color:var(--muted); margin-top:12px;">Pad & FX → <span style="color:var(--muted); font-weight:700;">-18dB</span> (back)</p> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">05 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">2</div> <h2 class="headline" style="flex:1;">Reverb = Ruang</h2> </div> <p class="body">Banyak reverb = <span class="highlight">sounds jauh.</span> Dikit reverb = sounds intim.</p> <div style="margin-top:40px; padding:32px; background:#1a1a1a; border-radius:12px; color:var(--ink-on-dark);"> <p class="body" style="font-size:24px;">Vocal lead → reverb <span style="color:#10b981; font-family:'JetBrains Mono',monospace;">15%</span></p> <p class="body" style="font-size:24px; margin-top:12px;">Background vocal → reverb <span style="color:#10b981; font-family:'JetBrains Mono',monospace;">45%</span></p> <p class="body" style="font-size:24px; margin-top:12px; color:var(--muted);">FX sweep → reverb <span style="color:#10b981; font-family:'JetBrains Mono',monospace;">80%</span></p> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(168,85,247,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(168,85,247,0.05), transparent 40%), var(--bg);"> <div class="number-badge">06 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">3</div> <h2 class="headline" style="flex:1;">EQ = Clarity Layer</h2> </div> <p class="body">Low-end sounds <span class="highlight">lebih deket.</span> High-end sounds lebih airy & distant.</p> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--primary); margin-bottom:16px;"> <p class="body" style="font-size:24px;">Bass/kick → boost <span style="font-family:'JetBrains Mono',monospace; color:var(--primary);">80-120Hz</span></p> </div> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--secondary); margin-bottom:16px;"> <p class="body" style="font-size:24px;">Vocal → presence <span style="font-family:'JetBrains Mono',monospace; color:var(--secondary);">2-5kHz</span></p> </div> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--accent);"> <p class="body" style="font-size:24px;">Pad → air <span style="font-family:'JetBrains Mono',monospace; color:var(--accent);">8-12kHz</span></p> </div> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">07 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">4</div> <h2 class="headline" style="flex:1;">Pan = Lokasi Stereo</h2> </div> <p class="body">Jangan center semua. Spread instrument ke <span class="highlight">kiri-kanan</span> bikin beat breathe.</p> <div style="margin-top:40px; display:flex; align-items:center; gap:20px;"> <div style="flex:1; text-align:right;"> <p class="body" style="font-size:22px; color:var(--muted);">Hi-hat</p> <p class="body" style="font-size:22px; color:var(--muted); margin-top:8px;">Synth lead</p> </div> <div style="width:180px; height:180px; border-radius:50%; border:3px solid var(--secondary); display:flex; align-items:center; justify-content:center; position:relative;"> <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:36px; font-weight:800; color:var(--secondary);">C</div> <div style="position:absolute; left:-40px; font-size:32px;">L</div> <div style="position:absolute; right:-40px; font-size:32px;">R</div> </div> <div style="flex:1;"> <p class="body" style="font-size:22px; color:var(--muted);">Shaker</p> <p class="body" style="font-size:22px; color:var(--muted); margin-top:8px;">Arp</p> </div> </div> <p class="body" style="margin-top:32px; color:var(--muted); text-align:center;">Kick, snare, vocal → tetep center.</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">08 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">5</div> <h2 class="headline" style="flex:1;">Delay = Echo Depth</h2> </div> <p class="body">Delay timing bikin <span class="highlight">dimensi waktu</span> di beat lo.</p> <div style="margin-top:40px; padding:32px; background:#1a1a1a; border-radius:12px; color:var(--ink-on-dark);"> <p class="body" style="font-size:24px;">Short delay <span style="font-family:'JetBrains Mono',monospace; color:#10b981;">50-120ms</span> → adds thickness</p> <p class="body" style="font-size:24px; margin-top:16px;">Long delay <span style="font-family:'JetBrains Mono',monospace; color:#10b981;">300-600ms</span> → pushes back</p> </div> <p class="body" style="margin-top:32px; color:var(--muted);">Pakai di vocal ad-lib, snare tail, synth stab.</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at center, rgba(19,39,190,0.35), transparent 60%), var(--bg-dark); color:var(--ink-on-dark);"> <div class="number-badge" style="color:var(--muted);">09 / 10</div> <div class="center-content" style="text-align:center;"> <svg style="width:120px; height:120px; margin:0 auto 40px;" viewBox="0 0 24 24" fill="none" stroke="var(--secondary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"/> <polyline points="12 6 12 12 16 14"/> </svg> <h2 class="headline" style="font-size:72px; color:var(--ink-on-dark);">Spatial depth bukan<br>teknik advanced.</h2> <p class="body" style="margin-top:32px; font-size:32px; color:rgba(255,255,255,0.7);">Itu <span style="color:var(--secondary); font-weight:700;">decision</span> tiap parameter mixing lo.</p> </div> <div class="brand-ribbon" style="color:var(--muted);">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">10 / 10</div> <div class="center-content"> <div style="width:64px; height:6px; background:var(--primary); border-radius:3px; margin-bottom:40px;"></div> <h2 class="headline">Save post ini.<br>Buka setiap mau<br>mixing beat baru.</h2> <p class="body" style="margin-top:32px; color:var(--muted);">Atau share ke producer temen lo yang beatnya masih sounds "ditumpuk".</p> <div style="margin-top:56px; padding:28px 40px; background:var(--primary); color:#fff; border-radius:8px; display:inline-block; font-size:32px; font-weight:700;"> <svg style="width:32px; height:32px; display:inline-block; vertical-align:middle; margin-right:12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/> </svg> Save & Share </div> </div> <div style="position:absolute; bottom:48px; left:80px; right:80px; display:flex; justify-content:space-between; align-items:center;"> <span style="font-size:28px; font-weight:800; color:var(--primary);">TuneCash</span> <span class="caption">@tunecash.id</span> </div> </section> </body> </html> ``` --- # CAROUSEL 2: Lo Pakai Preset AI Tapi Sounds Kayak 1000 Orang Lain ## METADATA - Topic: Sound design originality — customizing AI vocal presets - Audience focus: Music producer yang pakai AI vocal tools tapi output generic - Slide count: 10 - Suggested caption: Preset AI itu starting point, bukan finish line. Save buat session berikutnya. 🎤 #TuneCash  ```json { "topic": "AI vocal preset customization originality", "subject_hint": "music producer looking bored at generic waveform on screen, surrounded by identical preset thumbnails", "emotion": "bored, uninspired, generic", "headline": "Preset Lo Generic", "headline_pre": "Preset Lo", "headline_serif_part": "Generic", "subheadline": "Padahal udah pakai AI vocal terbaik", "label_top": "TUNECASH · SOUND DESIGN", "cta_pill": "MAKE IT YOURS" } ```   <section class="slide slide-1 carousel-slide cover" style="background: radial-gradient(circle at 20% 80%, rgba(168,85,247,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(168,85,247,0.05), transparent 40%), var(--bg);"> <div class="top-bar"> <span class="brand-handle">@tunecash.id</span> <span class="slide-num">01 / 10</span> </div> <div class="hero-block"> <div style="position:relative; width:280px; height:280px; margin:0 auto 40px;"> <svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 280 280"> <path d="M40 140 A100 100 0 0 1 240 140" stroke="var(--accent)" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.3"/> <path d="M70 140 A70 70 0 0 1 210 140" stroke="var(--accent)" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.6"/> <circle cx="140" cy="140" r="40" fill="var(--accent)"/> <circle cx="140" cy="40" r="8" fill="var(--accent)" opacity="0.8"/> <circle cx="220" cy="80" r="6" fill="var(--accent)" opacity="0.5"/> </svg> </div> <h1 class="hero">Preset Lo Sounds<br><span style="font-family:'Crimson Pro',serif; font-style:italic; color:var(--accent);">Generic.</span></h1> <p class="sub" style="margin-top:24px; color:var(--muted);">Kayak 1000 beat lain di playlist</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> <span class="caption">Bikin Lo Punya</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Preset Lo Generic — TuneCash</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1327BE; --secondary: #06B6D4; --accent: #A855F7; --danger: #EF4444; --neutral-light: #FFFFFF; --neutral-dark: #0A0A0A; --neutral-mid: #525252; --bg: #FDF8F3; --bg-soft: #F1ECE3; --bg-white: #FFFFFF; --bg-dark: #1A1A1A; --ink: #1A1A1A; --ink-on-dark: #FAFAFA; --muted: #5A5A5A; --line: #E5E0D6; --highlight: #FEF08A; --soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --soft-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #E5E5E5; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } .slide { width: 1080px; height: 1350px; background: var(--bg); color: var(--ink); padding: 80px; display: flex; flex-direction: column; justify-content: center; page-break-after: always; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .slide.bg-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .hero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 96px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; } .headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 56px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; } .sub { font-size: 32px; line-height: 1.4; font-weight: 400; } .body { font-size: 28px; line-height: 1.5; font-weight: 400; } .caption { font-size: 22px; line-height: 1.5; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .highlight { background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%); padding: 0 6px; font-weight: 700; } .number-badge { position: absolute; top: 48px; right: 48px; font-family: 'Inter', monospace; font-size: 22px; color: var(--muted); letter-spacing: 0.08em; font-weight: 600; } .brand-ribbon { position: absolute; bottom: 48px; left: 80px; font-size: 22px; color: var(--muted); letter-spacing: 0.05em; font-weight: 600; } .icon-hero { width: 240px; height: 240px; max-width: 240px; max-height: 240px; flex-shrink: 0; stroke-width: 2.5; display: block; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } @media print { body { background: #FFFFFF; } .slide { margin: 0; box-shadow: none; } } </style> <style> /* === Image hook slide 1 overlay (injected by carousel_composer) === */ /* Format-responsive: slide dimensions come from html data-format attribute (set by slide_renderer via format.json). Defaults to 1:1 if no attr. */ .slide { aspect-ratio: 1 / 1; } html[data-format="4:5"] .slide, .slide[data-format="4:5"] { aspect-ratio: 4 / 5; } .slide.slide-1.hook-image { padding: 0 !important; position: relative; overflow: hidden; } .slide.slide-1 .hook-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .slide.slide-1 .hook-overlay { position: relative; z-index: 2; width: 100%; height: 100%; padding: 80px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.32) 100%); } .slide.slide-1 .hook-label { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.95; } .slide.slide-1 .hook-content { display: flex; flex-direction: column; gap: 18px; } .slide.slide-1 .hook-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 124px; line-height: 1.0; letter-spacing: -0.02em; max-width: 90%; margin: 0; } .slide.slide-1 .hook-title .serif-italic { font-family: 'Crimson Pro', 'Playfair Display', serif; font-weight: 600; font-style: italic; font-size: 130px; letter-spacing: 0; } .slide.slide-1 .hook-sub { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 500; max-width: 75%; line-height: 1.3; opacity: 0.94; margin: 0; } .slide.slide-1 .hook-cta { align-self: flex-start; font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 26px; background: rgba(255, 255, 255, 0.95); color: #1a1a1a; border-radius: 999px; text-shadow: none; } /* Typography variants */ .slide.slide-1.modern-sans-tight .hook-title, .slide.slide-1.modern-sans-tight .hook-title .serif-italic { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.04em; font-style: normal; } .slide.slide-1.minimal-display .hook-title { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; font-weight: 800; } .slide.slide-1.minimal-display .hook-title .serif-italic { font-family: 'Bricolage Grotesque', sans-serif; font-style: italic; } </style> <style> /* === Image hook v2 typography (injected by carousel_composer) === */ :root { --slide1-primary-font: 'Plus Jakarta Sans, DM Sans, or Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Poppins or Lexend ; alternatively DM Mono for tech appeal', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 800; --slide1-accent-style: italic; } .slide.slide-1 .hook-title { font-family: var(--slide1-primary-font) !important; font-weight: var(--slide1-primary-weight) !important; } .slide.slide-1 .hook-title .serif-italic, .slide.slide-1 .accent { font-family: var(--slide1-accent-font) !important; font-style: var(--slide1-accent-style) !important; } </style> </head> <body> <section class="slide slide-1 carousel-slide hook-image modern-sans-tight"> <img src="/brands/bikin-musik-pakai-ai-masterclass/file/content/carousels/2026-06-03-carousel-lo-pakai-preset-ai-tapi-sounds-kayak-1000-orang-la-2/_assets/slide-1.png" class="hook-bg" alt="PRESET SERIES · AI VOCAL" loading="eager"> <div class="hook-overlay"> <div class="hook-label">PRESET SERIES · AI VOCAL</div> <div class="hook-content"> <h1 class="hook-title">Preset Lo <em class="serif-italic">Generic</em></h1> <p class="hook-sub">Padahal udah pakai AI vocal terbaik</p> </div> <div class="hook-cta">Lihat caranya →</div> </div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">02 / 10</div> <div class="center-content"> <div style="position:relative; width:380px; height:380px; margin:0 auto 40px;"> <svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 380 380"> <circle cx="190" cy="190" r="180" stroke="var(--accent)" stroke-width="2" fill="none" opacity="0.2"/> <circle cx="190" cy="190" r="140" stroke="var(--accent)" stroke-width="3" fill="none" opacity="0.4"/> <circle cx="190" cy="190" r="100" fill="var(--bg-soft)"/> </svg> <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center;"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/> <path d="M19 10v2a7 7 0 0 1-14 0v-2"/> <line x1="12" y1="19" x2="12" y2="22"/> </svg> </div> </div> <h2 class="headline" style="text-align:center;">Lo pakai preset "Pop Vocal Bright" — <span class="highlight">sama kayak 5000 producer</span> lain bulan ini.</h2> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(6,182,212,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(6,182,212,0.05), transparent 40%), var(--bg);"> <div class="number-badge">03 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom:32px; color:var(--secondary);">REALITA</span> <h2 class="headline">Preset AI itu<br><span style="color:var(--secondary); font-weight:800;">starting point.</span></h2> <p class="body" style="margin-top:32px;">Bukan finish line. Kalau lo load preset lalu export, lo udah kehilangan <span class="highlight">character track lo.</span></p> <p class="body" style="margin-top:24px; color:var(--muted);">Ini 4 tweak simpel yang bikin preset jadi lo punya:</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">04 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">1</div> <h2 class="headline" style="flex:1;">Pitch shift ±2 semitone</h2> </div> <p class="body">Vocal AI punya <span class="highlight">natural register.</span> Kalau lo shift dikit, texture berubah tanpa rusak quality.</p> <div style="margin-top:40px; padding:32px; background:#1a1a1a; border-radius:12px; color:var(--ink-on-dark);"> <p class="body" style="font-size:24px;">Preset asli → C4 center</p> <p class="body" style="font-size:24px; margin-top:12px; color:#10b981;">Lo shift → D4 (+2) = brighter edge</p> <p class="body" style="font-size:24px; margin-top:12px; color:#10b981;">Lo shift → Bb3 (-2) = darker warmth</p> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">05 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">2</div> <h2 class="headline" style="flex:1;">Formant tweak subtle</h2> </div> <p class="body">Formant = <span class="highlight">karakter vokal</span> tanpa pitch. Geser dikit udah bikin beda banget.</p> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--accent); margin-bottom:16px;"> <p class="body" style="font-size:24px;">Formant <span style="font-family:'JetBrains Mono',monospace; color:var(--accent);">+5%</span> → childlike, airy</p> </div> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--secondary);"> <p class="body" style="font-size:24px;">Formant <span style="font-family:'JetBrains Mono',monospace; color:var(--secondary);">-5%</span> → mature, husky</p> </div> </div> <p class="body" style="margin-top:32px; color:var(--muted);">Jangan over ±10% — nanti sounds chipmunk atau monster.</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">06 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">3</div> <h2 class="headline" style="flex:1;">Layer dengan dry signal</h2> </div> <p class="body">AI vocal sounds <span class="highlight">terlalu bersih?</span> Blend 10-20% dry signal asli — adds human texture.</p> <div style="margin-top:40px; padding:32px; background:#1a1a1a; border-radius:12px; color:var(--ink-on-dark);"> <p class="body" style="font-size:24px; color:#10b981;">Track 1: AI vocal <span style="color:var(--muted);">100%</span></p> <p class="body" style="font-size:24px; margin-top:12px; color:#10b981;">Track 2: Original raw <span style="color:var(--muted);">15%</span></p> <p class="body" style="font-size:24px; margin-top:20px;">= Perfect hybrid</p> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(168,85,247,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(168,85,247,0.05), transparent 40%), var(--bg);"> <div class="number-badge">07 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">4</div> <h2 class="headline" style="flex:1;">Custom EQ curve</h2> </div> <p class="body">Preset punya <span class="highlight">default EQ</span> yang fit mayoritas. Lo bukan mayoritas.</p> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); margin-bottom:16px;"> <p class="body" style="font-size:24px;">Boost <span style="font-family:'JetBrains Mono',monospace; color:var(--primary);">250Hz</span> → adds body</p> </div> <div style="padding:24px 28px; background:var(--bg-soft); margin-bottom:16px;"> <p class="body" style="font-size:24px;">Cut <span style="font-family:'JetBrains Mono',monospace; color:var(--danger);">3kHz</span> → less harsh</p> </div> <div style="padding:24px 28px; background:var(--bg-soft);"> <p class="body" style="font-size:24px;">Boost <span style="font-family:'JetBrains Mono',monospace; color:var(--accent);">10kHz</span> → adds air</p> </div> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">08 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom:32px; color:var(--secondary);">BONUS</span> <h2 class="headline">Save tweak lo jadi<br><span class="highlight">custom preset baru.</span></h2> <p class="body" style="margin-top:32px;">Jangan tweak dari nol tiap session. Build library preset lo sendiri.</p> <div style="margin-top:40px; font-family:'JetBrains Mono',monospace; padding:20px 24px; background:#1a1a1a; color:#10b981; border-radius:6px; font-size:18px; line-height:1.8;"> <div><span style="color:#06b6d4;">$</span> save_preset <span style="color:#5a5a5a;">--name</span> "MyVocal_Dark_v1"</div> <div style="margin-top:8px;"><span style="color:#5a5a5a;"># Preset saved to library</span></div> </div> <p class="body" style="margin-top:32px; color:var(--muted);">Next session: load preset lo, bukan preset umum.</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at center, rgba(168,85,247,0.35), transparent 60%), var(--bg-dark); color:var(--ink-on-dark);"> <div class="number-badge" style="color:var(--muted);">09 / 10</div> <div class="center-content" style="text-align:center;"> <div style="font-family:'JetBrains Mono',monospace; font-size:140px; line-height:0.9; color:rgba(168,85,247,0.25); font-weight:800; margin-bottom:40px;">{ }</div> <h2 class="headline" style="font-size:72px; color:var(--ink-on-dark);">Generic preset = <span style="color:var(--accent); font-weight:800;">generic sound.</span></h2> <p class="body" style="margin-top:32px; font-size:32px; color:rgba(255,255,255,0.7);">Customization bukan advanced — itu <span style="color:var(--accent); font-weight:700;">minimum standard</span> buat professional output.</p> </div> <div class="brand-ribbon" style="color:var(--muted);">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">10 / 10</div> <div class="center-content"> <div style="width:64px; height:6px; background:var(--accent); border-radius:3px; margin-bottom:40px;"></div> <h2 class="headline">Save buat referensi<br>next vocal session.</h2> <p class="body" style="margin-top:32px; color:var(--muted);">Atau share ke producer yang vocal tracknya masih sounds "default".</p> <div style="margin-top:56px; padding:28px 40px; background:var(--accent); color:#fff; border-radius:8px; display:inline-block; font-size:32px; font-weight:700;"> <svg style="width:32px; height:32px; display:inline-block; vertical-align:middle; margin-right:12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/> </svg> Save Post Ini </div> </div> <div style="position:absolute; bottom:48px; left:80px; right:80px; display:flex; justify-content:space-between; align-items:center;"> <span style="font-size:28px; font-weight:800; color:var(--accent);">TuneCash</span> <span class="caption">@tunecash.id</span> </div> </section> </body> </html> ``` --- # CAROUSEL 3: Kualitas Export Lo Jelek Tapi Bukan Karena Mixing ## METADATA - Topic: Audio export settings — lossy format vs lossless, bitrate misconception - Audience focus: Producer yang udah mixing oke tapi file export sounds compressed/lossy - Slide count: 9 - Suggested caption: Mixing bagus tapi export jelek = sama aja bohong. Save buat checklist export berikutnya. 📤 #TuneCash  ```json { "topic": "audio export quality settings bitrate format", "subject_hint": "frustrated producer comparing two waveforms on screen showing quality degradation, one pristine one compressed", "emotion": "confused, disappointed, quality-conscious", "headline": "Export Lo Jelek", "headline_pre": "Export Lo", "headline_serif_part": "Jelek", "subheadline": "Padahal mix udah oke", "label_top": "TUNECASH · TECHNICAL", "cta_pill": "FIX SETTINGS" } ```   <section class="slide slide-1 carousel-slide cover" style="background: radial-gradient(circle at 20% 80%, rgba(6,182,212,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(6,182,212,0.05), transparent 40%), var(--bg);"> <div class="top-bar"> <span class="brand-handle">@tunecash.id</span> <span class="slide-num">01 / 09</span> </div> <div class="hero-block"> <div style="position:relative; width:280px; height:280px; margin:0 auto 40px;"> <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:260px; line-height:0.9; font-weight:800; color:rgba(6,182,212,0.15); letter-spacing:-0.06em; text-align:center;">↓</div> <svg style="position:absolute; top:-20px; right:-20px; width:60px; height:60px;" viewBox="0 0 60 60"> <circle cx="10" cy="10" r="4" fill="var(--secondary)"/> <circle cx="40" cy="20" r="6" fill="var(--secondary)" opacity="0.6"/> <circle cx="20" cy="40" r="3" fill="var(--secondary)" opacity="0.4"/> </svg> </div> <h1 class="hero">Export Lo Sounds<br><span style="font-family:'Crimson Pro',serif; font-style:italic; color:var(--secondary);">Jelek.</span></h1> <p class="sub" style="margin-top:24px; color:var(--muted);">Padahal di DAW udah oke</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> <span class="caption">Check Settings Lo</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Export Lo Jelek — TuneCash</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1327BE; --secondary: #06B6D4; --accent: #A855F7; --danger: #EF4444; --neutral-light: #FFFFFF; --neutral-dark: #0A0A0A; --neutral-mid: #525252; --bg: #FDF8F3; --bg-soft: #F1ECE3; --bg-white: #FFFFFF; --bg-dark: #1A1A1A; --ink: #1A1A1A; --ink-on-dark: #FAFAFA; --muted: #5A5A5A; --line: #E5E0D6; --highlight: #FEF08A; --soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --soft-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #E5E5E5; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } .slide { width: 1080px; height: 1350px; background: var(--bg); color: var(--ink); padding: 80px; display: flex; flex-direction: column; justify-content: center; page-break-after: always; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .slide.bg-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .hero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 96px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; } .headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 56px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; } .sub { font-size: 32px; line-height: 1.4; font-weight: 400; } .body { font-size: 28px; line-height: 1.5; font-weight: 400; } .caption { font-size: 22px; line-height: 1.5; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .highlight { background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%); padding: 0 6px; font-weight: 700; } .number-badge { position: absolute; top: 48px; right: 48px; font-family: 'Inter', monospace; font-size: 22px; color: var(--muted); letter-spacing: 0.08em; font-weight: 600; } .brand-ribbon { position: absolute; bottom: 48px; left: 80px; font-size: 22px; color: var(--muted); letter-spacing: 0.05em; font-weight: 600; } .icon-hero { width: 240px; height: 240px; max-width: 240px; max-height: 240px; flex-shrink: 0; stroke-width: 2.5; display: block; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } @media print { body { background: #FFFFFF; } .slide { margin: 0; box-shadow: none; } } </style> <style> /* === Image hook slide 1 overlay (injected by carousel_composer) === */ /* Format-responsive: slide dimensions come from html data-format attribute (set by slide_renderer via format.json). Defaults to 1:1 if no attr. */ .slide { aspect-ratio: 1 / 1; } html[data-format="4:5"] .slide, .slide[data-format="4:5"] { aspect-ratio: 4 / 5; } .slide.slide-1.hook-image { padding: 0 !important; position: relative; overflow: hidden; } .slide.slide-1 .hook-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .slide.slide-1 .hook-overlay { position: relative; z-index: 2; width: 100%; height: 100%; padding: 80px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.32) 100%); } .slide.slide-1 .hook-label { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.95; } .slide.slide-1 .hook-content { display: flex; flex-direction: column; gap: 18px; } .slide.slide-1 .hook-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 124px; line-height: 1.0; letter-spacing: -0.02em; max-width: 90%; margin: 0; } .slide.slide-1 .hook-title .serif-italic { font-family: 'Crimson Pro', 'Playfair Display', serif; font-weight: 600; font-style: italic; font-size: 130px; letter-spacing: 0; } .slide.slide-1 .hook-sub { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 500; max-width: 75%; line-height: 1.3; opacity: 0.94; margin: 0; } .slide.slide-1 .hook-cta { align-self: flex-start; font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 26px; background: rgba(255, 255, 255, 0.95); color: #1a1a1a; border-radius: 999px; text-shadow: none; } /* Typography variants */ .slide.slide-1.modern-sans-tight .hook-title, .slide.slide-1.modern-sans-tight .hook-title .serif-italic { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.04em; font-style: normal; } .slide.slide-1.minimal-display .hook-title { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; font-weight: 800; } .slide.slide-1.minimal-display .hook-title .serif-italic { font-family: 'Bricolage Grotesque', sans-serif; font-style: italic; } </style> <style> /* === Image hook v2 typography (injected by carousel_composer) === */ :root { --slide1-primary-font: 'Plus Jakarta Sans, DM Sans, or Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Poppins or Lexend ; alternatively DM Mono for tech appeal', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 800; --slide1-accent-style: italic; } .slide.slide-1 .hook-title { font-family: var(--slide1-primary-font) !important; font-weight: var(--slide1-primary-weight) !important; } .slide.slide-1 .hook-title .serif-italic, .slide.slide-1 .accent { font-family: var(--slide1-accent-font) !important; font-style: var(--slide1-accent-style) !important; } </style> </head> <body> <section class="slide slide-1 carousel-slide hook-image modern-sans-tight"> <img src="/brands/bikin-musik-pakai-ai-masterclass/file/content/carousels/2026-06-03-carousel-kualitas-export-lo-jelek-tapi-bukan-karena-mixing-3/_assets/slide-1.png" class="hook-bg" alt="AUDIO EXPORT · PRODUCTION TIPS" loading="eager"> <div class="hook-overlay"> <div class="hook-label">AUDIO EXPORT · PRODUCTION TIPS</div> <div class="hook-content"> <h1 class="hook-title">Export Lo Jelek</h1> <p class="hook-sub">Padahal mix udah oke</p> </div> <div class="hook-cta">LEARN FORMAT SETTINGS →</div> </div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">02 / 09</div> <div class="center-content"> <div style="position:relative; width:380px; height:380px; margin:0 auto 40px;"> <svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 380 380"> <circle cx="190" cy="190" r="180" stroke="var(--danger)" stroke-width="2" fill="none" opacity="0.2"/> <circle cx="190" cy="190" r="140" stroke="var(--danger)" stroke-width="3" fill="none" opacity="0.4"/> <circle cx="190" cy="190" r="100" fill="var(--bg-soft)"/> </svg> <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center;"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> <polyline points="7 10 12 15 17 10"/> <line x1="12" y1="15" x2="12" y2="3"/> </svg> </div> </div> <h2 class="headline" style="text-align:center;">Lo export MP3 128kbps<br>lalu <span class="highlight">heran hasilnya lossy.</span></h2> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">03 / 09</div> <div class="center-content"> <span class="caption" style="margin-bottom:32px; color:var(--primary);">REAL TALK</span> <h2 class="headline">Mixing bagus tapi export<br>settings salah = <span style="color:var(--danger); font-weight:800;">sama aja bohong.</span></h2> <p class="body" style="margin-top:32px;">Output file lo adalah <span class="highlight">what listener actually hear.</span> Bukan yang lo dengar di DAW.</p> <p class="body" style="margin-top:24px; color:var(--muted);">Ini 5 parameter export wajib cek:</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">04 / 09</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">1</div> <h2 class="headline" style="flex:1;">Format: WAV buat master</h2> </div> <p class="body">MP3/AAC itu <span class="highlight">lossy compression.</span> Kalau lo mau master quality, export WAV uncompressed.</p> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--primary); margin-bottom:16px;"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--primary);">WAV</span> → lossless, large file</p> </div> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--danger);"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--danger);">MP3</span> → lossy, small file</p> </div> </div> <p class="body" style="margin-top:32px; color:var(--muted);">MP3 cuma buat sharing preview — bukan master.</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(6,182,212,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(6,182,212,0.05), transparent 40%), var(--bg);"> <div class="number-badge">05 / 09</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">2</div> <h2 class="headline" style="flex:1;">Sample rate: 48kHz</h2> </div> <p class="body">Industry standard sekarang <span class="highlight">48kHz bukan 44.1.</span> 44.1 cuma buat CD era dulu.</p> <div style="margin-top:40px; padding:32px; background:#1a1a1a; border-radius:12px; color:var(--ink-on-dark);"> <p class="body" style="font-size:24px; color:#10b981;">48kHz = broadcast/streaming standard</p> <p class="body" style="font-size:24px; margin-top:12px; color:var(--muted);">44.1kHz = CD legacy (masih OK tapi outdated)</p> <p class="body" style="font-size:24px; margin-top:12px; color:var(--muted);">96kHz = overkill untuk musik (pakai kalau mastering khusus)</p> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">06 / 09</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">3</div> <h2 class="headline" style="flex:1;">Bit depth: 24-bit minimum</h2> </div> <p class="body">16-bit cukup buat final deliver. Tapi <span class="highlight">24-bit safer</span> buat headroom & post-process.</p> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); margin-bottom:16px;"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--accent);">24-bit</span> → 144dB dynamic range</p> </div> <div style="padding:24px 28px; background:var(--bg-soft);"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--muted);">16-bit</span> → 96dB (CD standard, still good)</p> </div> </div> <p class="body" style="margin-top:32px; color:var(--muted);">Kalau lo export untuk mastering engineer, wajib 24-bit.</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">07 / 09</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:32px;"> <div style="width:64px; height:64px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:36px; font-weight:800; flex-shrink:0;">4</div> <h2 class="headline" style="flex:1; font-size:48px;">Dither: ON (untuk 16-bit)</h2> </div> <p class="body" style="margin-bottom:32px;">Kalau lo <span class="highlight">downgrade dari 24 ke 16-bit,</span> dither prevents quantization distortion.</p> <div style="display:flex; align-items:center; gap:32px; margin-bottom:32px; margin-top:48px;"> <div style="width:64px; height:64px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:36px; font-weight:800; flex-shrink:0;">5</div> <h2 class="headline" style="flex:1; font-size:48px;">Normalize: OFF (unless intentional)</h2> </div> <p class="body">Normalize auto-boost peaks = <span style="color:var(--danger); font-weight:700;">destroys headroom.</span> Cek level manual aja.</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at center, rgba(6,182,212,0.35), transparent 60%), var(--bg-dark); color:var(--ink-on-dark);"> <div class="number-badge" style="color:var(--muted);">08 / 09</div> <div class="center-content" style="text-align:center;"> <svg style="width:120px; height:120px; margin:0 auto 40px;" viewBox="0 0 24 24" fill="none" stroke="var(--secondary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> <polyline points="7 10 12 15 17 10"/> <line x1="12" y1="15" x2="12" y2="3"/> </svg> <h2 class="headline" style="font-size:72px; color:var(--ink-on-dark);">Export settings = <span style="color:var(--secondary); font-weight:800;">final gatekeeper</span><br>antara lo & listener.</h2> <p class="body" style="margin-top:32px; font-size:32px; color:rgba(255,255,255,0.7);">Salah di sini = semua effort mixing lo hilang.</p> </div> <div class="brand-ribbon" style="color:var(--muted);">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">09 / 09</div> <div class="center-content"> <div style="width:64px; height:6px; background:var(--secondary); border-radius:3px; margin-bottom:40px;"></div> <h2 class="headline">Screenshot 5 parameter<br>ini. Paste di DAW lo.</h2> <p class="body" style="margin-top:32px; color:var(--muted);">Atau share ke producer yang export MP3 128kbps terus ngeluh sounds jelek.</p> <div style="margin-top:56px; padding:28px 40px; background:var(--secondary); color:#fff; border-radius:8px; display:inline-block; font-size:32px; font-weight:700;"> <svg style="width:32px; height:32px; display:inline-block; vertical-align:middle; margin-right:12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/> </svg> Save Checklist Ini </div> </div> <div style="position:absolute; bottom:48px; left:80px; right:80px; display:flex; justify-content:space-between; align-items:center;"> <span style="font-size:28px; font-weight:800; color:var(--secondary);">TuneCash</span> <span class="caption">@tunecash.id</span> </div> </section> </body> </html> ``` --- # CAROUSEL 4: Lo Mixing Di Headphone Lalu Master Sounds Aneh Di Speaker ## METADATA - Topic: Mixing environment — headphone vs speaker translation, frequency bias - Audience focus: Bedroom producer yang mixing pakai headphone doang, output nggak translate - Slide count: 10 - Suggested caption: Headphone bukan musuh. Tapi lo butuh context switch. Save buat next mixing session. 🎧 #TuneCash  ```json { "topic": "mixing headphone speaker translation frequency bias", "subject_hint": "producer wearing headphones looking confused at speakers on desk showing different waveform", "emotion": "confused, frustrated, isolated", "headline": "Mix Lo Sounds Aneh", "headline_pre": "Mix Lo Sounds", "headline_serif_part": "Aneh", "subheadline": "Di speaker temen atau car audio", "label_top": "TUNECASH · MIXING FUNDAMENTALS", "cta_pill": "FIX TRANSLATION" } ```   <section class="slide slide-1 carousel-slide cover" style="background: radial-gradient(circle at 90% -10%, rgba(239,68,68,0.6), transparent 40%), radial-gradient(circle at 10% 110%, rgba(239,68,68,0.3), transparent 35%), var(--bg); position: relative;"> <div style="content:''; position:absolute; top:60px; left:60px; width:80px; height:80px; background:radial-gradient(circle, var(--danger) 8px, transparent 8px) 0 0 / 24px 24px; opacity:0.3;"></div> <div class="top-bar"> <span class="brand-handle">@tunecash.id</span> <span class="slide-num">01 / 10</span> </div> <div class="hero-block"> <div style="position:relative; width:280px; height:280px; margin:0 auto 40px;"> <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:280px; line-height:0.9; font-weight:800; color:rgba(239,68,68,0.15); letter-spacing:-0.04em; text-align:center;">?</div> <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 18v-6a9 9 0 0 1 18 0v6"/> <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/> </svg> </div> </div> <h1 class="hero">Mix Lo Sounds<br><span style="font-family:'Crimson Pro',serif; font-style:italic; color:var(--danger);">Aneh</span></h1> <p class="sub" style="margin-top:24px; color:var(--muted);">Di speaker atau car audio</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> <span class="caption">Fix Translation</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mix Lo Sounds Aneh — TuneCash</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1327BE; --secondary: #06B6D4; --accent: #A855F7; --danger: #EF4444; --neutral-light: #FFFFFF; --neutral-dark: #0A0A0A; --neutral-mid: #525252; --bg: #FDF8F3; --bg-soft: #F1ECE3; --bg-white: #FFFFFF; --bg-dark: #1A1A1A; --ink: #1A1A1A; --ink-on-dark: #FAFAFA; --muted: #5A5A5A; --line: #E5E0D6; --highlight: #FEF08A; --soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --soft-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #E5E5E5; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } .slide { width: 1080px; height: 1350px; background: var(--bg); color: var(--ink); padding: 80px; display: flex; flex-direction: column; justify-content: center; page-break-after: always; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .slide.bg-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .hero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 96px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; } .headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 56px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; } .sub { font-size: 32px; line-height: 1.4; font-weight: 400; } .body { font-size: 28px; line-height: 1.5; font-weight: 400; } .caption { font-size: 22px; line-height: 1.5; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .highlight { background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%); padding: 0 6px; font-weight: 700; } .number-badge { position: absolute; top: 48px; right: 48px; font-family: 'Inter', monospace; font-size: 22px; color: var(--muted); letter-spacing: 0.08em; font-weight: 600; } .brand-ribbon { position: absolute; bottom: 48px; left: 80px; font-size: 22px; color: var(--muted); letter-spacing: 0.05em; font-weight: 600; } .icon-hero { width: 240px; height: 240px; max-width: 240px; max-height: 240px; flex-shrink: 0; stroke-width: 2.5; display: block; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } @media print { body { background: #FFFFFF; } .slide { margin: 0; box-shadow: none; } } </style> <style> /* === Image hook slide 1 overlay (injected by carousel_composer) === */ /* Format-responsive: slide dimensions come from html data-format attribute (set by slide_renderer via format.json). Defaults to 1:1 if no attr. */ .slide { aspect-ratio: 1 / 1; } html[data-format="4:5"] .slide, .slide[data-format="4:5"] { aspect-ratio: 4 / 5; } .slide.slide-1.hook-image { padding: 0 !important; position: relative; overflow: hidden; } .slide.slide-1 .hook-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .slide.slide-1 .hook-overlay { position: relative; z-index: 2; width: 100%; height: 100%; padding: 80px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.32) 100%); } .slide.slide-1 .hook-label { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.95; } .slide.slide-1 .hook-content { display: flex; flex-direction: column; gap: 18px; } .slide.slide-1 .hook-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 124px; line-height: 1.0; letter-spacing: -0.02em; max-width: 90%; margin: 0; } .slide.slide-1 .hook-title .serif-italic { font-family: 'Crimson Pro', 'Playfair Display', serif; font-weight: 600; font-style: italic; font-size: 130px; letter-spacing: 0; } .slide.slide-1 .hook-sub { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 500; max-width: 75%; line-height: 1.3; opacity: 0.94; margin: 0; } .slide.slide-1 .hook-cta { align-self: flex-start; font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 26px; background: rgba(255, 255, 255, 0.95); color: #1a1a1a; border-radius: 999px; text-shadow: none; } /* Typography variants */ .slide.slide-1.modern-sans-tight .hook-title, .slide.slide-1.modern-sans-tight .hook-title .serif-italic { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.04em; font-style: normal; } .slide.slide-1.minimal-display .hook-title { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; font-weight: 800; } .slide.slide-1.minimal-display .hook-title .serif-italic { font-family: 'Bricolage Grotesque', sans-serif; font-style: italic; } </style> <style> /* === Image hook v2 typography (injected by carousel_composer) === */ :root { --slide1-primary-font: 'Plus Jakarta Sans, DM Sans, or Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Poppins or Lexend ; alternatively DM Mono for tech appeal', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 800; --slide1-accent-style: italic; } .slide.slide-1 .hook-title { font-family: var(--slide1-primary-font) !important; font-weight: var(--slide1-primary-weight) !important; } .slide.slide-1 .hook-title .serif-italic, .slide.slide-1 .accent { font-family: var(--slide1-accent-font) !important; font-style: var(--slide1-accent-style) !important; } </style> </head> <body> <section class="slide slide-1 carousel-slide hook-image editorial-bold-serif"> <img src="/brands/bikin-musik-pakai-ai-masterclass/file/content/carousels/2026-06-03-carousel-lo-mixing-di-headphone-lalu-master-sounds-aneh-di--4/_assets/slide-1.png" class="hook-bg" alt="AUDIO MIXING · PRODUCTION SERIES" loading="eager"> <div class="hook-overlay"> <div class="hook-label">AUDIO MIXING · PRODUCTION SERIES</div> <div class="hook-content"> <h1 class="hook-title">Mix Lo Sounds <em class="serif-italic">Aneh</em></h1> <p class="hook-sub">Di speaker temen atau car audio</p> </div> <div class="hook-cta">Learn Now →</div> </div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">02 / 10</div> <div class="center-content"> <div style="position:relative; text-align:center; margin-bottom:40px;"> <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:200px; line-height:0.9; font-weight:800; color:rgba(239,68,68,0.15); letter-spacing:-0.04em;">🎧</div> <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:140px;">≠</div> <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:200px; line-height:0.9; font-weight:800; color:rgba(239,68,68,0.15); letter-spacing:-0.04em; margin-top:-40px;">🔊</div> </div> <h2 class="headline" style="text-align:center;">Di headphone lo <span class="highlight">sounds perfect.</span><br>Di speaker temen sounds kayak kamar mandi.</h2> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">03 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom:32px; color:var(--primary);">KENAPA?</span> <h2 class="headline">Headphone & speaker<br>punya <span style="color:var(--primary); font-weight:800;">frequency bias</span> berbeda.</h2> <p class="body" style="margin-top:32px;">Headphone <span class="highlight">isolate telinga lo</span> dari ruangan. Speaker interact sama walls & furniture.</p> <p class="body" style="margin-top:24px; color:var(--muted);">Ini 4 hal yang bikin mix lo nggak translate:</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">04 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--danger); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">1</div> <h2 class="headline" style="flex:1;">Bass trap: headphone boost low-end</h2> </div> <p class="body">Headphone sealed bikin <span class="highlight">bass sounds fuller</span> dari kenyataan. Di speaker: bass lo hilang atau muddy.</p> <div style="margin-top:40px; padding:32px; background:#1a1a1a; border-radius:12px; color:var(--ink-on-dark);"> <p class="body" style="font-size:24px;">Fix: cut <span style="font-family:'JetBrains Mono',monospace; color:#10b981;">60-100Hz</span> 1-2dB</p> <p class="body" style="font-size:24px; margin-top:12px; color:var(--muted);">Test mix di cheap earbuds atau laptop speaker</p> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(6,182,212,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(6,182,212,0.05), transparent 40%), var(--bg);"> <div class="number-badge">05 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">2</div> <h2 class="headline" style="flex:1;">Stereo width illusion</h2> </div> <p class="body">Headphone exaggerate <span class="highlight">stereo field.</span> Di speaker: sounds collapse to mono atau phase issue.</p> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--secondary); margin-bottom:16px;"> <p class="body" style="font-size:24px;">Fix: check mix in <span style="font-family:'JetBrains Mono',monospace; color:var(--secondary);">MONO</span></p> </div> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--accent);"> <p class="body" style="font-size:24px;">Jangan pan extreme hard L/R kecuali intentional</p> </div> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">06 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">3</div> <h2 class="headline" style="flex:1;">Vocal presence bias</h2> </div> <p class="body">Headphone intimate — vocal sounds <span class="highlight">lebih deket.</span> Di speaker: vocal tenggelam atau terlalu harsh.</p> <div style="margin-top:40px; padding:32px; background:#1a1a1a; border-radius:12px; color:var(--ink-on-dark);"> <p class="body" style="font-size:24px;">Fix: boost <span style="font-family:'JetBrains Mono',monospace; color:#10b981;">2-4kHz</span> 1dB untuk presence</p> <p class="body" style="font-size:24px; margin-top:12px; color:var(--muted);">Test di phone speaker — kalau vocal clear, you're good</p> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(168,85,247,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(168,85,247,0.05), transparent 40%), var(--bg);"> <div class="number-badge">07 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">4</div> <h2 class="headline" style="flex:1;">Reverb decay hidden</h2> </div> <p class="body">Headphone clarity → <span class="highlight">reverb tail kedengeran jelas.</span> Di speaker noisy room: reverb jadi mud.</p> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); margin-bottom:16px;"> <p class="body" style="font-size:24px;">Fix: cut reverb tail pakai hi-pass <span style="font-family:'JetBrains Mono',monospace; color:var(--accent);">200Hz+</span></p> </div> <div style="padding:24px 28px; background:var(--bg-soft);"> <p class="body" style="font-size:24px;">Reduce reverb time 10-15% dari yang sounds good di headphone</p> </div> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">08 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom:32px; color:var(--secondary);">PROTOCOL</span> <h2 class="headline">Mixing di headphone?<br>Cek di <span class="highlight">3 device berbeda.</span></h2> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--primary); margin-bottom:16px;"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--primary);">1.</span> Headphone (mixing main)</p> </div> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--secondary); margin-bottom:16px;"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--secondary);">2.</span> Laptop/phone speaker</p> </div> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--accent);"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--accent);">3.</span> Car audio (if possible)</p> </div> </div> <p class="body" style="margin-top:32px; color:var(--muted);">Kalau sounds good di ketiganya → mix lo translate.</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at center, rgba(239,68,68,0.35), transparent 60%), var(--bg-dark); color:var(--ink-on-dark);"> <div class="number-badge" style="color:var(--muted);">09 / 10</div> <div class="center-content" style="text-align:center;"> <svg style="width:120px; height:120px; margin:0 auto 40px;" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 18v-6a9 9 0 0 1 18 0v6"/> <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/> </svg> <h2 class="headline" style="font-size:72px; color:var(--ink-on-dark);">Headphone bukan musuh.<br><span style="color:var(--danger); font-weight:800;">Tapi bukan satu-satunya judge.</span></h2> <p class="body" style="margin-top:32px; font-size:32px; color:rgba(255,255,255,0.7);">Context switch = pro habit.</p> </div> <div class="brand-ribbon" style="color:var(--muted);">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">10 / 10</div> <div class="center-content"> <div style="width:64px; height:6px; background:var(--danger); border-radius:3px; margin-bottom:40px;"></div> <h2 class="headline">Save 4 fix ini.<br>Test di 3 device.</h2> <p class="body" style="margin-top:32px; color:var(--muted);">Atau share ke producer yang mixing di headphone doang terus kaget hasilnya beda di speaker.</p> <div style="margin-top:56px; padding:28px 40px; background:var(--danger); color:#fff; border-radius:8px; display:inline-block; font-size:32px; font-weight:700;"> <svg style="width:32px; height:32px; display:inline-block; vertical-align:middle; margin-right:12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/> </svg> Save Checklist </div> </div> <div style="position:absolute; bottom:48px; left:80px; right:80px; display:flex; justify-content:space-between; align-items:center;"> <span style="font-size:28px; font-weight:800; color:var(--danger);">TuneCash</span> <span class="caption">@tunecash.id</span> </div> </section> </body> </html> ``` --- # CAROUSEL 5: Lo Compress Vocal Tapi Malah Sounds Lifeless ## METADATA - Topic: Vocal compression technique — over-compression lifeless sound fix - Audience focus: Producer yang pakai compressor heavy tanpa tau attack/release/ratio sweet spot - Slide count: 10 - Suggested caption: Compression buat kontrol dynamic, bukan bunuh character. Save buat vocal session berikutnya. 🎙️ #TuneCash  ```json { "topic": "vocal compression over-compression lifeless sound fix", "subject_hint": "producer staring at flat compressed vocal waveform looking dead, compression plugin with extreme settings visible", "emotion": "disappointed, frustrated, over-engineered", "headline": "Vocal Lo Lifeless", "headline_pre": "Vocal Lo", "headline_serif_part": "Lifeless", "subheadline": "Padahal udah compress perfect", "label_top": "TUNECASH · VOCAL PRODUCTION", "cta_pill": "BRING LIFE BACK" } ```   <section class="slide slide-1 carousel-slide cover" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="top-bar"> <span class="brand-handle">@tunecash.id</span> <span class="slide-num">01 / 10</span> </div> <div class="hero-block"> <div style="position:relative; width:320px; height:320px; margin:0 auto 40px;"> <svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 320 320"> <circle cx="160" cy="160" r="150" stroke="var(--primary)" stroke-width="3" fill="none" opacity="0.2"/> <circle cx="160" cy="160" r="110" stroke="var(--primary)" stroke-width="4" fill="none" opacity="0.4"/> <circle cx="160" cy="160" r="70" fill="var(--bg-soft)"/> </svg> <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center;"> <svg class="icon-mega" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/> <path d="M19 10v2a7 7 0 0 1-14 0v-2"/> <line x1="12" y1="19" x2="12" y2="22"/> </svg> </div> </div> <h1 class="hero">Vocal Lo Sounds<br><span style="font-family:'Crimson Pro',serif; font-style:italic; color:var(--primary);">Lifeless.</span></h1> <p class="sub" style="margin-top:24px; color:var(--muted);">Padahal compress ratio udah 8:1</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> <span class="caption">Bring Character Back</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vocal Lo Lifeless — TuneCash</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1327BE; --secondary: #06B6D4; --accent: #A855F7; --danger: #EF4444; --neutral-light: #FFFFFF; --neutral-dark: #0A0A0A; --neutral-mid: #525252; --bg: #FDF8F3; --bg-soft: #F1ECE3; --bg-white: #FFFFFF; --bg-dark: #1A1A1A; --ink: #1A1A1A; --ink-on-dark: #FAFAFA; --muted: #5A5A5A; --line: #E5E0D6; --highlight: #FEF08A; --soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --soft-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #E5E5E5; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } .slide { width: 1080px; height: 1350px; background: var(--bg); color: var(--ink); padding: 80px; display: flex; flex-direction: column; justify-content: center; page-break-after: always; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .slide.bg-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .hero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 96px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; } .headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 56px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; } .sub { font-size: 32px; line-height: 1.4; font-weight: 400; } .body { font-size: 28px; line-height: 1.5; font-weight: 400; } .caption { font-size: 22px; line-height: 1.5; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .highlight { background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%); padding: 0 6px; font-weight: 700; } .number-badge { position: absolute; top: 48px; right: 48px; font-family: 'Inter', monospace; font-size: 22px; color: var(--muted); letter-spacing: 0.08em; font-weight: 600; } .brand-ribbon { position: absolute; bottom: 48px; left: 80px; font-size: 22px; color: var(--muted); letter-spacing: 0.05em; font-weight: 600; } .icon-hero { width: 240px; height: 240px; max-width: 240px; max-height: 240px; flex-shrink: 0; stroke-width: 2.5; display: block; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } @media print { body { background: #FFFFFF; } .slide { margin: 0; box-shadow: none; } } </style> <style> /* === Image hook slide 1 overlay (injected by carousel_composer) === */ /* Format-responsive: slide dimensions come from html data-format attribute (set by slide_renderer via format.json). Defaults to 1:1 if no attr. */ .slide { aspect-ratio: 1 / 1; } html[data-format="4:5"] .slide, .slide[data-format="4:5"] { aspect-ratio: 4 / 5; } .slide.slide-1.hook-image { padding: 0 !important; position: relative; overflow: hidden; } .slide.slide-1 .hook-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .slide.slide-1 .hook-overlay { position: relative; z-index: 2; width: 100%; height: 100%; padding: 80px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.32) 100%); } .slide.slide-1 .hook-label { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.95; } .slide.slide-1 .hook-content { display: flex; flex-direction: column; gap: 18px; } .slide.slide-1 .hook-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 124px; line-height: 1.0; letter-spacing: -0.02em; max-width: 90%; margin: 0; } .slide.slide-1 .hook-title .serif-italic { font-family: 'Crimson Pro', 'Playfair Display', serif; font-weight: 600; font-style: italic; font-size: 130px; letter-spacing: 0; } .slide.slide-1 .hook-sub { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 500; max-width: 75%; line-height: 1.3; opacity: 0.94; margin: 0; } .slide.slide-1 .hook-cta { align-self: flex-start; font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 26px; background: rgba(255, 255, 255, 0.95); color: #1a1a1a; border-radius: 999px; text-shadow: none; } /* Typography variants */ .slide.slide-1.modern-sans-tight .hook-title, .slide.slide-1.modern-sans-tight .hook-title .serif-italic { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.04em; font-style: normal; } .slide.slide-1.minimal-display .hook-title { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; font-weight: 800; } .slide.slide-1.minimal-display .hook-title .serif-italic { font-family: 'Bricolage Grotesque', sans-serif; font-style: italic; } </style> <style> /* === Image hook v2 typography (injected by carousel_composer) === */ :root { --slide1-primary-font: 'Plus Jakarta Sans, DM Sans, or Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Poppins or Lexend ; alternatively DM Mono for tech appeal', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 800; --slide1-accent-style: italic; } .slide.slide-1 .hook-title { font-family: var(--slide1-primary-font) !important; font-weight: var(--slide1-primary-weight) !important; } .slide.slide-1 .hook-title .serif-italic, .slide.slide-1 .accent { font-family: var(--slide1-accent-font) !important; font-style: var(--slide1-accent-style) !important; } </style> </head> <body> <section class="slide slide-1 carousel-slide hook-image editorial-bold-serif"> <img src="/brands/bikin-musik-pakai-ai-masterclass/file/content/carousels/2026-06-03-carousel-lo-compress-vocal-tapi-malah-sounds-lifeless-5/_assets/slide-1.png" class="hook-bg" alt="VOCAL PRODUCTION · COMPRESSION SERIES" loading="eager"> <div class="hook-overlay"> <div class="hook-label">VOCAL PRODUCTION · COMPRESSION SERIES</div> <div class="hook-content"> <h1 class="hook-title">Vocal Lo <em class="serif-italic">Lifeless</em></h1> <p class="hook-sub">Padahal udah compress perfect</p> </div> <div class="hook-cta">Learn the Fix →</div> </div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">02 / 10</div> <div class="center-content"> <div style="position:relative; text-align:center; margin-bottom:40px;"> <div style="font-family:'JetBrains Mono',monospace; font-size:240px; line-height:0.9; color:rgba(239,68,68,0.12); font-weight:800; letter-spacing:-0.04em;">8:1</div> </div> <h2 class="headline" style="text-align:center;">Lo set ratio 8:1,<br>attack 1ms, release 50ms.<br>Vocal lo <span class="highlight">sounds kayak robot.</span></h2> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(6,182,212,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(6,182,212,0.05), transparent 40%), var(--bg);"> <div class="number-badge">03 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom:32px; color:var(--secondary);">DIAGNOSIS</span> <h2 class="headline">Compression bukan<br>tentang <span style="color:var(--danger); font-weight:800;">kill dynamic.</span></h2> <p class="body" style="margin-top:32px;">Itu tentang <span class="highlight">kontrol dynamic range</span> sambil keep character vocal.</p> <p class="body" style="margin-top:24px; color:var(--muted);">Ini 4 parameter yang bikin vocal lo sounds natural:</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">04 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">1</div> <h2 class="headline" style="flex:1;">Ratio: 3:1 to 4:1</h2> </div> <p class="body">Ratio tinggi = <span class="highlight">over-squeeze.</span> 3-4:1 cukup buat vocal smooth tanpa bunuh transient.</p> <div style="margin-top:40px; padding:32px; background:#1a1a1a; border-radius:12px; color:var(--ink-on-dark);"> <p class="body" style="font-size:24px; color:#10b981;">Sweet spot: <span style="font-family:'JetBrains Mono',monospace;">3.5:1</span></p> <p class="body" style="font-size:24px; margin-top:12px; color:var(--muted);">8:1+ = limiter territory (bukan compressor)</p> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(168,85,247,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(168,85,247,0.05), transparent 40%), var(--bg);"> <div class="number-badge">05 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">2</div> <h2 class="headline" style="flex:1;">Attack: 10-30ms</h2> </div> <p class="body">Attack <span class="highlight">terlalu cepat</span> bunuh consonant "s", "t", "k". Lo butuh attack yang kasih transient breathe.</p> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--danger); margin-bottom:16px;"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--danger);">1ms</span> = instant squash (lifeless)</p> </div> <div style="padding:24px 28px; background:var(--bg-soft); border-left:4px solid var(--accent);"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--accent);">20ms</span> = natural punch (sweet spot)</p> </div> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">06 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">3</div> <h2 class="headline" style="flex:1;">Release: 100-200ms</h2> </div> <p class="body">Release cepat = <span class="highlight">pumping effect.</span> Slow release = natural decay.</p> <div style="margin-top:40px; padding:32px; background:#1a1a1a; border-radius:12px; color:var(--ink-on-dark);"> <p class="body" style="font-size:24px; color:#10b981;">Tempo slow → <span style="font-family:'JetBrains Mono',monospace;">180-200ms</span></p> <p class="body" style="font-size:24px; margin-top:12px; color:#10b981;">Tempo fast → <span style="font-family:'JetBrains Mono',monospace;">100-120ms</span></p> <p class="body" style="font-size:24px; margin-top:16px; color:var(--muted);">Match release sama tempo track lo</p> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">07 / 10</div> <div class="center-content"> <div style="display:flex; align-items:center; gap:32px; margin-bottom:40px;"> <div style="width:80px; height:80px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; flex-shrink:0;">4</div> <h2 class="headline" style="flex:1;">Threshold: -12 to -18dB</h2> </div> <p class="body">Threshold terlalu rendah = <span class="highlight">compress terlalu banyak.</span> Target cuma peak tertinggi.</p> <div style="margin-top:40px;"> <div style="padding:24px 28px; background:var(--bg-soft); margin-bottom:16px;"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--primary);">-15dB</span> → gentle control (natural)</p> </div> <div style="padding:24px 28px; background:var(--bg-soft);"> <p class="body" style="font-size:24px;"><span style="font-family:'JetBrains Mono',monospace; color:var(--danger);">-6dB</span> → aggressive squash (lifeless)</p> </div> </div> <p class="body" style="margin-top:32px; color:var(--muted);">Gain reduction target: 3-6dB max</p> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-white);"> <div class="number-badge">08 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom:32px; color:var(--accent);">PRO TIP</span> <h2 class="headline">Parallel compression<br>= <span class="highlight">best of both worlds.</span></h2> <p class="body" style="margin-top:32px;">Duplicate track. Compress 1 track heavy. Blend 30% dengan dry signal.</p> <div style="margin-top:40px; font-family:'JetBrains Mono',monospace; padding:20px 24px; background:#1a1a1a; color:#10b981; border-radius:6px; font-size:18px; line-height:1.8;"> <div><span style="color:#06b6d4;">Track 1:</span> Dry vocal <span style="color:#5a5a5a;">100%</span></div> <div style="margin-top:8px;"><span style="color:#06b6d4;">Track 2:</span> Compressed (6:1) <span style="color:#5a5a5a;">30%</span></div> <div style="margin-top:8px;"><span style="color:#5a5a5a;"># Mix to taste</span></div> </div> </div> <div class="brand-ribbon">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at center, rgba(19,39,190,0.35), transparent 60%), var(--bg-dark); color:var(--ink-on-dark);"> <div class="number-badge" style="color:var(--muted);">09 / 10</div> <div class="center-content" style="text-align:center;"> <svg style="width:120px; height:120px; margin:0 auto 40px;" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/> <path d="M19 10v2a7 7 0 0 1-14 0v-2"/> <line x1="12" y1="19" x2="12" y2="22"/> </svg> <h2 class="headline" style="font-size:72px; color:var(--ink-on-dark);">Compression <span style="color:var(--primary); font-weight:800;">kontrol dynamic.</span><br>Bukan bunuh character.</h2> <p class="body" style="margin-top:32px; font-size:32px; color:rgba(255,255,255,0.7);">Kalau vocal sounds lifeless → lo compress terlalu keras.</p> </div> <div class="brand-ribbon" style="color:var(--muted);">@tunecash.id</div> </section>  <section class="slide carousel-slide" style="background: radial-gradient(circle at 20% 80%, rgba(19,39,190,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(19,39,190,0.05), transparent 40%), var(--bg);"> <div class="number-badge">10 / 10</div> <div class="center-content"> <div style="width:64px; height:6px; background:var(--primary); border-radius:3px; margin-bottom:40px;"></div> <h2 class="headline">Save 4 parameter ini.<br>Test di vocal track lo.</h2> <p class="body" style="margin-top:32px; color:var(--muted);">Atau share ke producer yang vocal tracknya sounds kayak robot.</p> <div style="margin-top:56px; padding:28px 40px; background:var(--primary); color:#fff; border-radius:8px; display:inline-block; font-size:32px; font-weight:700;"> <svg style="width:32px; height:32px; display:inline-block; vertical-align:middle; margin-right:12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/> </svg> Save Settings </div> </div> <div style="position:absolute; bottom:48px; left:80px; right:80px; display:flex; justify-content:space-between; align-items:center;"> <span style="font-size:28px; font-weight:800; color:var(--primary);">TuneCash</span> <span class="caption">@tunecash.id</span> </div> </section> </body> </html> ```

Hapus

Error

Report a bug