fix(videos): enhance ambient compositions visibility and atmosphere

- FloatingTools: increase layer opacities (back 0.12, mid 0.22, front 0.35),
  add depth-of-field blur (1px back, 0.5px mid), radial vignette overlay,
  increase X oscillation amplitude from 3px to 8px
- BrandGradient: add center SnapOtter logo with subtle scale pulse, scatter
  faint tool names at 5% opacity for texture, add radial vignette
- FormatUniverse: replace buggy ghost badge duplicates with proper CSS opacity
  trail (3 copies at decreasing opacity: 1.0, 0.3, 0.1), increase logo pulse
  from 3% to 5% scale oscillation, add faint elliptical SVG orbit ring lines
  at 5% opacity behind each ring

apps/videos/src/compositions/ambient/BrandGradient.tsx

@@ -1,8 +1,10 @@
 import type React from "react";
-import { AbsoluteFill } from "remotion";
+import { AbsoluteFill, Img, staticFile, useCurrentFrame } from "remotion";
 import { GradientBlob } from "@/components/GradientBlob";
 import { GrainOverlay } from "@/components/GrainOverlay";
 import { COLOR } from "@/lib/colors";
+import { FONT } from "@/lib/fonts";
+import { TOOLS } from "@/lib/tools";
 
 const DURATION = 150;
 
@@ -69,11 +71,70 @@ const BLOBS = [
   },
 ];
 
-export const BrandGradient: React.FC = () => (
-  <AbsoluteFill style={{ backgroundColor: COLOR.dark, overflow: "hidden" }}>
-    {BLOBS.map((blob) => (
-      <GradientBlob key={blob.color} config={blob} duration={DURATION} />
-    ))}
-    <GrainOverlay opacity={0.04} />
-  </AbsoluteFill>
-);
+/** Pre-computed scattered tool name positions (frozen, for texture) */
+const SCATTERED_TOOLS = TOOLS.slice(0, 15).map((tool, i) => ({
+  name: tool.name,
+  x: ((i * 137 + 47) % 750) + 25,
+  y: ((i * 89 + 23) % 550) + 25,
+  fontSize: 11 + (i % 3) * 2,
+}));
+
+export const BrandGradient: React.FC = () => {
+  const frame = useCurrentFrame();
+  const logoScale = 1 + Math.sin(frame * 0.08) * 0.03;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: COLOR.dark, overflow: "hidden" }}>
+      {/* Scattered tool names for texture (frozen, 5% opacity) */}
+      {SCATTERED_TOOLS.map((tool) => (
+        <span
+          key={tool.name}
+          style={{
+            position: "absolute",
+            left: tool.x,
+            top: tool.y,
+            fontFamily: FONT.body,
+            fontSize: tool.fontSize,
+            fontWeight: 500,
+            color: "rgba(255,255,255,0.05)",
+            whiteSpace: "nowrap",
+            pointerEvents: "none",
+          }}
+        >
+          {tool.name}
+        </span>
+      ))}
+
+      {BLOBS.map((blob) => (
+        <GradientBlob key={blob.color} config={blob} duration={DURATION} />
+      ))}
+
+      {/* Center logo with subtle scale pulse */}
+      <Img
+        src={staticFile("logo.png")}
+        style={{
+          position: "absolute",
+          width: 80,
+          height: 80,
+          left: 400 - 40,
+          top: 300 - 40,
+          transform: `scale(${logoScale})`,
+          zIndex: 10,
+        }}
+      />
+
+      {/* Radial vignette */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background:
+            "radial-gradient(ellipse 60% 55% at 50% 50%, transparent 0%, rgba(0,0,0,0.5) 100%)",
+          pointerEvents: "none",
+        }}
+      />
+
+      <GrainOverlay opacity={0.04} />
+    </AbsoluteFill>
+  );
+};

apps/videos/src/compositions/ambient/FloatingTools.tsx

@@ -7,9 +7,9 @@ import { FONT } from "@/lib/fonts";
 import { TOOLS } from "@/lib/tools";
 
 const LAYERS = [
-  { speed: 0.8, fontSize: 14, opacity: 0.06, count: 10 },
-  { speed: 1.5, fontSize: 18, opacity: 0.12, count: 9 },
-  { speed: 2.5, fontSize: 24, opacity: 0.2, count: 6 },
+  { speed: 0.8, fontSize: 14, opacity: 0.12, count: 10, blur: 1 },
+  { speed: 1.5, fontSize: 18, opacity: 0.22, count: 9, blur: 0.5 },
+  { speed: 2.5, fontSize: 24, opacity: 0.35, count: 6, blur: 0 },
 ];
 
 const X_FREQ = (2 * Math.PI) / 120;
@@ -41,7 +41,7 @@ export const FloatingTools: React.FC = () => {
       {items.map((item, idx) => {
         const rawY = item.startY - frame * item.layer.speed;
         const y = (((rawY % wrapH) + wrapH) % wrapH) - 50;
-        const xOffset = Math.sin(frame * X_FREQ + item.phase) * 3;
+        const xOffset = Math.sin(frame * X_FREQ + item.phase) * 8;
 
         return (
           <span
@@ -56,12 +56,23 @@ export const FloatingTools: React.FC = () => {
               color: COLOR.category[item.tool.category] ?? COLOR.accent,
               opacity: item.layer.opacity,
               whiteSpace: "nowrap",
+              filter: item.layer.blur > 0 ? `blur(${item.layer.blur}px)` : undefined,
             }}
           >
             {item.tool.name}
           </span>
         );
       })}
+      {/* Radial vignette */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background:
+            "radial-gradient(ellipse 60% 55% at 50% 50%, transparent 0%, rgba(0,0,0,0.6) 100%)",
+          pointerEvents: "none",
+        }}
+      />
       <GrainOverlay opacity={0.02} />
     </AbsoluteFill>
   );