docs: use a caption preview that reads at tile size and label it honestly

The karaoke clip rendered as an almost-black tile with one small pill, which is
weak proof on first load. Every caption component in the catalog is type on a
black ground rather than captions burned over footage, so 'Captions on footage'
was also the wrong label. Swapped to the highlight style, which holds up at
tile size, and renamed the tile 'Kinetic captions'.

Author: ukimsanov

docs/introduction.mdx

@@ -43,9 +43,9 @@ Every one of these is real HyperFrames output, running in your browser right now
     <video className="w-full aspect-video object-cover rounded-lg border border-zinc-200 dark:border-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
     <span className="block mt-2 text-sm text-zinc-500 dark:text-zinc-400">Animated data</span>
   </a>
-  <a href="/catalog/components/caption-pill-karaoke" className="block no-underline">
-    <video className="w-full aspect-video object-cover rounded-lg border border-zinc-200 dark:border-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png" autoPlay muted loop playsInline />
-    <span className="block mt-2 text-sm text-zinc-500 dark:text-zinc-400">Captions on footage</span>
+  <a href="/catalog/components/caption-highlight" className="block no-underline">
+    <video className="w-full aspect-video object-cover rounded-lg border border-zinc-200 dark:border-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png" autoPlay muted loop playsInline />
+    <span className="block mt-2 text-sm text-zinc-500 dark:text-zinc-400">Kinetic captions</span>
   </a>
   <a href="/catalog/blocks/spain-map" className="block no-underline">
     <video className="w-full aspect-video object-cover rounded-lg border border-zinc-200 dark:border-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />