feat(site): add util reference pipeline (#537)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

site/src/components/docs/demos/use-media/react/css/BasicUsage.css

@@ -0,0 +1,36 @@
+.react-use-media-basic {
+  position: relative;
+}
+
+.react-use-media-basic video {
+  width: 100%;
+}
+
+.react-use-media-basic__info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 0.8125rem;
+}
+
+.react-use-media-basic__info div {
+  display: flex;
+  gap: 8px;
+}
+
+.react-use-media-basic__info dt {
+  color: #6b7280;
+  min-width: 80px;
+}
+
+.react-use-media-basic__info dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx

@@ -0,0 +1,52 @@
+import { createPlayer, features, useMedia } from '@videojs/react';
+import { Video } from '@videojs/react/video';
+
+import './BasicUsage.css';
+
+const { Provider, Container } = createPlayer({
+  features: features.video,
+});
+
+function MediaInfo() {
+  const media = useMedia();
+
+  if (!media) return null;
+
+  return (
+    <dl className="react-use-media-basic__info">
+      <div>
+        <dt>tagName</dt>
+        <dd>{media.tagName.toLowerCase()}</dd>
+      </div>
+      <div>
+        <dt>src</dt>
+        <dd>{media.currentSrc || '—'}</dd>
+      </div>
+      <div>
+        <dt>videoWidth</dt>
+        <dd>{media.videoWidth}px</dd>
+      </div>
+      <div>
+        <dt>videoHeight</dt>
+        <dd>{media.videoHeight}px</dd>
+      </div>
+    </dl>
+  );
+}
+
+export default function BasicUsage() {
+  return (
+    <Provider>
+      <Container className="react-use-media-basic">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MediaInfo />
+      </Container>
+    </Provider>
+  );
+}