diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..65a9942
Binary files /dev/null and b/assets/logo.png differ
diff --git a/assets/social-preview.png b/assets/social-preview.png
new file mode 100644
index 0000000..710534b
Binary files /dev/null and b/assets/social-preview.png differ
diff --git a/assets/social-preview.svg b/assets/social-preview.svg
new file mode 100644
index 0000000..4dcdc30
--- /dev/null
+++ b/assets/social-preview.svg
@@ -0,0 +1,132 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 640">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#141414"/>
+      <stop offset="100%" stop-color="#1a1a1a"/>
+    </linearGradient>
+    <linearGradient id="tl-bg" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#1e1e1e"/>
+      <stop offset="100%" stop-color="#262626"/>
+    </linearGradient>
+    <linearGradient id="sel" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#3c82dc" stop-opacity="0.55"/>
+      <stop offset="100%" stop-color="#3c82dc" stop-opacity="0.2"/>
+    </linearGradient>
+    <linearGradient id="eight" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#ffd230"/>
+      <stop offset="100%" stop-color="#d4a000"/>
+    </linearGradient>
+    <linearGradient id="glow" x1="0.5" y1="0" x2="0.5" y2="1">
+      <stop offset="0%" stop-color="#ffd230" stop-opacity="0.08"/>
+      <stop offset="100%" stop-color="#ffd230" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1280" height="640" fill="url(#bg)"/>
+
+  <!-- Subtle glow behind title -->
+  <ellipse cx="640" cy="200" rx="400" ry="140" fill="url(#glow)"/>
+
+  <!-- Title: "8" -->
+  <text x="440" y="250" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="180" font-weight="bold" fill="url(#eight)">8</text>
+
+  <!-- Title: "-cut" -->
+  <text x="560" y="244" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="110" font-weight="300" fill="#cccccc">-cut</text>
+
+  <!-- Tagline -->
+  <text x="640" y="310" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="26" fill="#777" text-anchor="middle">8-second video clips for SELVA datasets</text>
+
+  <!-- ===== Timeline ===== -->
+
+  <!-- Timeline track -->
+  <rect x="120" y="380" width="1040" height="72" rx="6" fill="url(#tl-bg)" stroke="#333" stroke-width="1"/>
+
+  <!-- Timeline lane -->
+  <rect x="120" y="398" width="1040" height="36" rx="3" fill="#2a2a2a"/>
+
+  <!-- Ruler ticks -->
+  <g stroke="#555" stroke-width="1">
+    <line x1="172" y1="380" x2="172" y2="392"/>
+    <line x1="224" y1="380" x2="224" y2="387"/>
+    <line x1="276" y1="380" x2="276" y2="392"/>
+    <line x1="328" y1="380" x2="328" y2="387"/>
+    <line x1="380" y1="380" x2="380" y2="392"/>
+    <line x1="432" y1="380" x2="432" y2="387"/>
+    <line x1="484" y1="380" x2="484" y2="392"/>
+    <line x1="536" y1="380" x2="536" y2="387"/>
+    <line x1="588" y1="380" x2="588" y2="392"/>
+    <line x1="640" y1="380" x2="640" y2="387"/>
+    <line x1="692" y1="380" x2="692" y2="392"/>
+    <line x1="744" y1="380" x2="744" y2="387"/>
+    <line x1="796" y1="380" x2="796" y2="392"/>
+    <line x1="848" y1="380" x2="848" y2="387"/>
+    <line x1="900" y1="380" x2="900" y2="392"/>
+    <line x1="952" y1="380" x2="952" y2="387"/>
+    <line x1="1004" y1="380" x2="1004" y2="392"/>
+    <line x1="1056" y1="380" x2="1056" y2="387"/>
+    <line x1="1108" y1="380" x2="1108" y2="392"/>
+  </g>
+
+  <!-- Selection region -->
+  <rect x="460" y="380" width="220" height="72" rx="2" fill="url(#sel)"/>
+  <line x1="460" y1="380" x2="460" y2="452" stroke="#3c82dc" stroke-width="2" stroke-opacity="0.8"/>
+  <line x1="680" y1="380" x2="680" y2="452" stroke="#3c82dc" stroke-width="2" stroke-opacity="0.8"/>
+
+  <!-- Playhead -->
+  <line x1="460" y1="372" x2="460" y2="456" stroke="#ffd230" stroke-width="2.5"/>
+  <polygon points="452,372 468,372 460,384" fill="#ffd230"/>
+
+  <!-- Duration label -->
+  <text x="570" y="422" font-family="'Courier New', monospace" font-size="18" fill="#aad4ff" text-anchor="middle" opacity="0.8">8.0s</text>
+
+  <!-- Export markers -->
+  <g>
+    <line x1="260" y1="380" x2="260" y2="452" stroke="#dc3c3c" stroke-width="2"/>
+    <rect x="260" y="383" width="18" height="15" rx="2" fill="#c83232"/>
+    <text x="269" y="395" font-family="sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">1</text>
+  </g>
+  <g>
+    <line x1="700" y1="380" x2="700" y2="452" stroke="#dc3c3c" stroke-width="2"/>
+    <rect x="700" y="383" width="18" height="15" rx="2" fill="#c83232"/>
+    <text x="709" y="395" font-family="sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">2</text>
+  </g>
+  <g>
+    <line x1="940" y1="380" x2="940" y2="452" stroke="#dc3c3c" stroke-width="2"/>
+    <rect x="940" y="383" width="18" height="15" rx="2" fill="#c83232"/>
+    <text x="949" y="395" font-family="sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">3</text>
+  </g>
+
+  <!-- Scissors icon -->
+  <g transform="translate(554, 356) scale(0.9)" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round">
+    <circle cx="5" cy="5" r="4"/>
+    <circle cx="5" cy="19" r="4"/>
+    <line x1="9" y1="7" x2="20" y2="17"/>
+    <line x1="9" y1="17" x2="20" y2="7"/>
+  </g>
+
+  <!-- Time labels below timeline -->
+  <text x="120" y="476" font-family="'Courier New', monospace" font-size="13" fill="#555">0:00</text>
+  <text x="448" y="476" font-family="'Courier New', monospace" font-size="13" fill="#e6a800">2:30</text>
+  <text x="1110" y="476" font-family="'Courier New', monospace" font-size="13" fill="#555">8:20</text>
+
+  <!-- ===== Feature pills ===== -->
+  <g font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="15">
+    <!-- Pill backgrounds -->
+    <rect x="260" y="520" width="120" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
+    <rect x="400" y="520" width="130" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
+    <rect x="550" y="520" width="120" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
+    <rect x="690" y="520" width="140" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
+    <rect x="850" y="520" width="130" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
+
+    <!-- Pill text -->
+    <text x="320" y="540" fill="#aaa" text-anchor="middle">Batch export</text>
+    <text x="465" y="540" fill="#aaa" text-anchor="middle">Portrait crop</text>
+    <text x="610" y="540" fill="#aaa" text-anchor="middle">Annotation</text>
+    <text x="760" y="540" fill="#aaa" text-anchor="middle">Fuzzy matching</text>
+    <text x="915" y="540" fill="#aaa" text-anchor="middle">WebP + WAV</text>
+  </g>
+
+  <!-- Bottom border accent -->
+  <rect x="0" y="636" width="1280" height="4" fill="#ffd230" opacity="0.3"/>
+</svg>