upload demo files

.gitattributes

@@ -33,3 +33,13 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+dist/fonts/JetBrains/JetBrainsMono-Italic-VariableFont_wght.ttf filter=lfs diff=lfs merge=lfs -text
+dist/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf filter=lfs diff=lfs merge=lfs -text
+dist/fonts/Söhne/Söhne-Buch.otf filter=lfs diff=lfs merge=lfs -text
+dist/fonts/Söhne/Söhne-Kräftig.otf filter=lfs diff=lfs merge=lfs -text
+dist/fonts/Söhne/Söhne-Leicht.otf filter=lfs diff=lfs merge=lfs -text
+public/fonts/JetBrains/JetBrainsMono-Italic-VariableFont_wght.ttf filter=lfs diff=lfs merge=lfs -text
+public/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf filter=lfs diff=lfs merge=lfs -text
+public/fonts/Söhne/Söhne-Buch.otf filter=lfs diff=lfs merge=lfs -text
+public/fonts/Söhne/Söhne-Kräftig.otf filter=lfs diff=lfs merge=lfs -text
+public/fonts/Söhne/Söhne-Leicht.otf filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,16 @@
 ---
 title: LFM2 VL WebGPU
-emoji: 🌍
+emoji: 📹
 colorFrom: blue
 colorTo: purple
 sdk: static
 pinned: false
+short_description: Real-time video captioning in your browser
+models:
+- LiquidAI/LFM2-VL-450M
+- onnx-community/LFM2-VL-450M-ONNX
+thumbnail: https://cdn-uploads.huggingface.co/production/uploads/61b253b7ac5ecaae3d1efe0c/Obs_kK1de825UGpsBIuAI.png
+app_file: dist/index.html
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

dist/assets/index-BOaEXwaP.css

@@ -0,0 +1 @@
+@font-face{font-family:Sohne;font-style:normal;font-weight:400;src:url(/fonts/S%C3%B6hne/S%C3%B6hne-Buch.otf)format("opentype")}@font-face{font-family:Sohne;font-style:normal;font-weight:300;src:url(/fonts/S%C3%B6hne/S%C3%B6hne-Leicht.otf)format("opentype")}@font-face{font-family:Sohne;font-style:normal;font-weight:700;src:url(/fonts/S%C3%B6hne/S%C3%B6hne-Kr%C3%A4ftig.otf)format("opentype")}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;src:url(/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf)format("truetype")}:root{--bg:#050814;--bg-soft:#080d19b8;--panel:#0a0f1cad;--panel-strong:#ffffff1f;--line:#ffffff1f;--line-strong:#ffffff38;--text:#f3f7ff;--text-soft:#f3f7ffb8;--text-muted:#f3f7ff8a;--accent:#9de0ff;--accent-strong:#d7f4ff;--shadow:0 28px 80px #02061159;--font-body:"Sohne", sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box}html,body,#root{min-height:100%}html{background:var(--bg)}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}button,input,textarea{color:inherit;font:inherit}button{cursor:pointer;border:0}img{max-width:100%;display:block}.hidden-file-input,.capture-canvas{display:none}.fluid-backdrop{background:#000;position:fixed;inset:0}.fluid-backdrop canvas{display:block}.fluid-backdrop__scene{opacity:0;width:100%;height:100%;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transform:scale(1.02)}.fluid-backdrop__scene.is-ready{opacity:1;transform:scale(1)}.fluid-backdrop__veil{pointer-events:none;background:0 0;transition:background-color .32s;position:absolute;inset:0}.fluid-backdrop__veil.is-subdued{background:#03071042}.landing-scene,.scene-shell,.capture-scene{z-index:1;position:relative}.landing-scene{text-align:left;background:0 0;width:100%;min-height:100vh;padding:28px}.landing-inner{flex-direction:column;justify-content:space-between;gap:32px;width:min(1120px,100%);min-height:calc(100vh - 56px);margin:0 auto;display:flex}.brand-mark{border:1px solid var(--line);width:fit-content;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);background:#070b168a;border-radius:999px;align-items:center;gap:14px;padding:11px 17px 11px 11px;display:inline-flex}.brand-logo{object-fit:contain;width:36px;height:36px}.brand-copy{flex-direction:column;gap:3px;display:flex}.brand-copy span{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;font-size:.7rem}.brand-copy strong{letter-spacing:.01em;font-size:.95rem;font-weight:700}.hero-copy{max-width:760px}.eyebrow,.dock-label{color:var(--accent);font-family:var(--font-mono);letter-spacing:.22em;text-transform:uppercase;font-size:.73rem;display:inline-block}.hero-copy h1,.loading-card h2,.source-card h2{letter-spacing:-.06em;margin:18px 0 0;font-size:clamp(3.4rem,9vw,7.8rem);font-weight:700;line-height:.95}.hero-copy p,.source-card p{max-width:620px;color:var(--text-soft);margin:20px 0 0;font-size:clamp(1.05rem,2.6vw,1.42rem);line-height:1.5}.hero-inline-icon{vertical-align:text-bottom;width:1.6rem;height:1.6rem;margin:0 .25rem 1px .35rem;display:inline-block}.hero-inline-wordmark{display:inline-block}.begin-prompt{border:1px solid var(--line-strong);width:fit-content;color:var(--accent-strong);letter-spacing:.02em;-webkit-backdrop-filter:blur(16px);background:#ffffff14;border-radius:999px;align-items:center;gap:12px;margin:0 auto;padding:14px 20px;font-size:.96rem;display:inline-flex}.scene-shell{flex-direction:column;justify-content:center;width:100%;min-height:100vh;padding:28px;display:flex}.scene-shell--centered{align-items:center;gap:28px}.scene-header{position:absolute;top:28px;left:28px}.loading-card,.source-card,.prompt-dock,.floating-alert{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px)}.loading-card{border-radius:32px;width:min(520px,100%);padding:30px}.loading-card h2{margin-top:16px;font-size:clamp(2.3rem,6vw,4.3rem)}.loading-card p{color:var(--text-soft);font-family:var(--font-mono);margin:16px 0 0;font-size:.9rem}.progress-track{background:#ffffff14;border-radius:999px;width:100%;height:12px;margin-top:24px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg,#80deffcc,#f5fbfffa);height:100%;box-shadow:0 0 40px #9ce4ff66}.source-card{border-radius:36px;width:min(860px,100%);margin:0 auto;padding:32px}.source-card h2{margin-top:16px;font-size:clamp(2.2rem,5vw,4.8rem)}.source-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px;display:grid}.source-option,.ghost-button,.primary-button,.prompt-chip{transition:transform .18s,border-color .18s,background-color .18s,opacity .18s}.source-option{border:1px solid var(--line);text-align:left;background:#ffffff0d;border-radius:28px;flex-direction:column;justify-content:space-between;gap:8px;padding:26px;display:flex}.source-option strong{letter-spacing:-.02em;font-size:1.45rem;font-weight:700}.source-option__header{align-items:center;gap:14px;display:inline-flex}.source-option__icon,.button-icon{color:var(--accent)}.source-option span{color:var(--text-soft);font-size:1.06rem;line-height:1.5}.source-option:hover,.ghost-button:hover,.primary-button:hover,.prompt-chip:hover{transform:translateY(-2px)}.capture-scene{background:#03050a;min-height:100vh;overflow:hidden}.capture-video,.capture-scrim{position:absolute;inset:0}.capture-video{object-fit:cover;width:100%;height:100%}.capture-scrim{background:linear-gradient(#03050a26,#03050a47 36%,#03050aad),radial-gradient(circle at 0 0,#92dcff33,#0000 34%),radial-gradient(circle at 100% 100%,#ffffff17,#0000 24%)}.capture-toolbar{z-index:2;justify-content:space-between;gap:16px;padding:24px;display:flex;position:relative}.capture-toolbar__left{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.status-pill,.ghost-button,.primary-button{border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);background:#080d1870;border-radius:999px;align-items:center;gap:10px;padding:12px 16px;display:inline-flex}.button-icon{flex-shrink:0}.status-pill{color:var(--text-soft);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}.status-dot{background:#ffffff4d;border-radius:999px;width:8px;height:8px}.status-dot.is-live{background:#9ce5ff;box-shadow:0 0 16px #9ce5ffb3}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.ghost-button{color:var(--text)}.ghost-button--small{padding:8px 12px}.primary-button{background:#ffffff1f;width:fit-content;margin-top:18px}.floating-alert{z-index:3;border-radius:20px;align-items:center;gap:14px;max-width:min(620px,100vw - 48px);padding:14px 16px;display:inline-flex;position:absolute;top:96px;left:24px}.floating-alert--secondary{top:156px}.error-banner{color:#ffd9d9;background:#ff787814;border:1px solid #ffa0a04d;border-radius:18px;margin-top:18px;padding:14px 16px;line-height:1.5}.prompt-dock,.capture-side-rail{z-index:2;position:absolute;bottom:24px}.prompt-dock{border-radius:30px;width:min(520px,100vw - 48px);padding:18px;left:24px}.prompt-chip-row{flex-wrap:wrap;gap:10px;margin:14px 0 16px;display:flex}.prompt-chip{border:1px solid var(--line);color:var(--text-soft);background:#ffffff0d;border-radius:999px;padding:10px 14px}.prompt-chip.is-active{color:var(--accent-strong);background:#9de0ff24;border-color:#9de0ff6b}.prompt-input{border:1px solid var(--line);width:100%;min-height:78px;color:var(--text);resize:none;background:#ffffff0a;border-radius:20px;padding:14px 16px;line-height:1.5}.prompt-input::placeholder{color:var(--text-muted)}.prompt-input:focus{border-color:#9de0ff70;outline:1px solid #9de0ff70}.capture-side-rail{flex-direction:column;gap:14px;width:min(400px,100vw - 48px);display:flex;right:24px}.capture-actions{z-index:4;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex;position:fixed;top:24px;right:24px}.caption-dock{flex-direction:column;align-items:stretch;gap:12px;width:100%;display:flex}.caption-bubble{color:#07101b;border-radius:30px 30px 12px;width:100%;padding:16px 18px;line-height:1.48;box-shadow:0 20px 48px #0307113d}.caption-bubble--history{background:#ffffffc7}.caption-bubble--active{background:#fffffffa;min-height:74px}.caption-meta{color:#07101b8a;font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;font-size:.72rem}.caption-placeholder{color:#07101b80}@media (width<=900px){body{overflow:auto}.landing-scene,.scene-shell{padding:22px}.landing-inner{min-height:calc(100vh - 44px)}.source-grid{grid-template-columns:1fr}.capture-toolbar{flex-direction:column;align-items:flex-start}.prompt-dock,.capture-side-rail{width:auto;margin:0 22px 22px;position:relative;bottom:auto;left:auto;right:auto}.capture-actions{justify-content:flex-start;top:22px;left:22px;right:22px}.capture-scene{flex-direction:column;justify-content:flex-end;min-height:100dvh;display:flex}.capture-scrim{background:linear-gradient(#03050a33,#03050a6b 42%,#03050ad6),radial-gradient(circle at 0 0,#92dcff2e,#0000 30%)}}@media (width<=640px){.hero-copy h1,.loading-card h2,.source-card h2{letter-spacing:-.05em}.floating-alert{flex-direction:column;align-items:flex-start;inset:auto 22px 22px}.floating-alert--secondary{bottom:96px}}

dist/fonts/JetBrains/JetBrainsMono-Italic-VariableFont_wght.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2a1563e89aa3c3816abfbca03e295abcdca11d9cbd689a7754cc1c5f454d18f
+size 191988

dist/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b6490e1a902e56fc84050bee9aad91509e6f45aa00f96f882dab53c9abaf83eb
+size 187860

dist/fonts/Söhne/Söhne-Buch.otf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d3e050e7df5a5695e1ba1691633f2a8767ea9c6ac747fccf7b23a38e4ca02cc2
+size 191552

dist/fonts/Söhne/Söhne-Kräftig.otf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7f17003124700a22684c3f83ac8252793f1e6e902842e385d4bd4220f94a79cb
+size 245976

dist/fonts/Söhne/Söhne-Leicht.otf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:366970f59ef3332afd6d0a2a5bc84e71c002c2a351a93a8a66f315e5892be028
+size 191884

dist/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💧</text></svg>"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>lfm2-vl-webgpu</title>
+    <script type="module" crossorigin src="/assets/index-BD4hRAJu.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BOaEXwaP.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist", "src/react-fluid-distortion/**"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

index.html

@@ -1,19 +1,16 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💧</text></svg>"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>lfm2-vl-webgpu</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "lfm2-vl-webgpu",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "^4.0.0-next.7",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/postprocessing": "^3.0.4",
+    "lucide-react": "^0.577.0",
+    "postprocessing": "^6.38.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^8.0.0-beta.13"
+  },
+  "overrides": {
+    "vite": "^8.0.0-beta.13"
+  }
+}

public/fonts/JetBrains/JetBrainsMono-Italic-VariableFont_wght.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2a1563e89aa3c3816abfbca03e295abcdca11d9cbd689a7754cc1c5f454d18f
+size 191988

public/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b6490e1a902e56fc84050bee9aad91509e6f45aa00f96f882dab53c9abaf83eb
+size 187860

public/fonts/Söhne/Söhne-Buch.otf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d3e050e7df5a5695e1ba1691633f2a8767ea9c6ac747fccf7b23a38e4ca02cc2
+size 191552

public/fonts/Söhne/Söhne-Kräftig.otf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7f17003124700a22684c3f83ac8252793f1e6e902842e385d4bd4220f94a79cb
+size 245976

public/fonts/Söhne/Söhne-Leicht.otf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:366970f59ef3332afd6d0a2a5bc84e71c002c2a351a93a8a66f315e5892be028
+size 191884

src/App.tsx

@@ -0,0 +1,326 @@
+import { startTransition, useEffect, useRef, useState } from "react";
+import { Camera, Film } from "lucide-react";
+import { BrandMark } from "./components/BrandMark";
+import { CaptureScene, type CaptureSource } from "./components/CaptureScene";
+import { FluidBackdrop } from "./components/FluidBackdrop";
+import { HfIcon } from "./components/HfIcon";
+import { VLMProvider } from "./context/VLMProvider";
+import { useVLM } from "./context/VLMContext";
+
+const PROMPT_PRESETS = [
+  {
+    display: "Describe the scene",
+    prompt: "Describe the scene in one sentence.",
+  },
+  {
+    display: "What color shirt am I wearing?",
+    prompt: "What color shirt am I wearing?",
+  },
+  {
+    display: "What am I holding?",
+    prompt: "What am I holding?",
+  },
+  {
+    display: "How old do I look?",
+    prompt: "How old do I look?",
+  },
+] as const;
+
+type Scene = "landing" | "loading" | "source" | "capture";
+
+function disposeSource(source: CaptureSource | null) {
+  if (!source) {
+    return;
+  }
+
+  if (source.kind === "webcam") {
+    source.stream.getTracks().forEach((track) => track.stop());
+    return;
+  }
+
+  URL.revokeObjectURL(source.url);
+}
+
+function getErrorMessage(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return "Something went wrong.";
+}
+
+function AppContent() {
+  const [scene, setScene] = useState<Scene>("landing");
+  const [source, setSource] = useState<CaptureSource | null>(null);
+  const [prompt, setPrompt] = useState<string>(PROMPT_PRESETS[0].prompt);
+  const [mediaError, setMediaError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const sourceRef = useRef<CaptureSource | null>(null);
+
+  const { error, loadModel, message, progress, status } = useVLM();
+
+  useEffect(() => {
+    sourceRef.current = source;
+  }, [source]);
+
+  useEffect(() => {
+    return () => {
+      disposeSource(sourceRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (scene !== "loading" || status === "ready") {
+      return;
+    }
+
+    let cancelled = false;
+
+    void loadModel()
+      .then(() => {
+        if (cancelled) {
+          return;
+        }
+
+        startTransition(() => {
+          setScene("source");
+        });
+      })
+      .catch(() => undefined);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [loadModel, scene, status]);
+
+  const beginExperience = () => {
+    startTransition(() => {
+      setScene("loading");
+    });
+  };
+
+  const replaceSource = (nextSource: CaptureSource) => {
+    disposeSource(source);
+    setMediaError(null);
+    setSource(nextSource);
+
+    startTransition(() => {
+      setScene("capture");
+    });
+  };
+
+  const handleUseWebcam = async () => {
+    try {
+      if (!navigator.mediaDevices?.getUserMedia) {
+        throw new Error("Camera access is not available in this browser.");
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: false,
+        video: {
+          facingMode: "user",
+          width: { ideal: 1280 },
+          height: { ideal: 720 },
+        },
+      });
+
+      replaceSource({
+        kind: "webcam",
+        label: "Live camera",
+        stream,
+      });
+    } catch (cameraError) {
+      setMediaError(getErrorMessage(cameraError));
+    }
+  };
+
+  const openVideoPicker = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleVideoSelection = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+
+    if (!file) {
+      return;
+    }
+
+    replaceSource({
+      kind: "file",
+      label: file.name,
+      url: URL.createObjectURL(file),
+    });
+  };
+
+  const exitCapture = () => {
+    disposeSource(source);
+    setSource(null);
+    setMediaError(null);
+
+    startTransition(() => {
+      setScene("source");
+    });
+  };
+
+  const showBackdrop = scene !== "capture";
+
+  return (
+    <>
+      {showBackdrop ? <FluidBackdrop subdued={scene === "loading"} /> : null}
+
+      <input
+        ref={fileInputRef}
+        accept="video/*"
+        className="hidden-file-input"
+        onChange={handleVideoSelection}
+        type="file"
+      />
+
+      {scene === "landing" ? (
+        <button
+          className="landing-scene"
+          onClick={beginExperience}
+          type="button"
+        >
+          <div className="landing-inner">
+            <BrandMark />
+
+            <div className="hero-copy">
+              <h1>LFM2-VL WebGPU</h1>
+              <p>
+                Real-time video captioning in your browser,
+                <br />
+                powered by
+                <HfIcon className="hero-inline-icon" />
+                <span className="hero-inline-wordmark">Transformers.js</span>
+              </p>
+            </div>
+
+            <div className="begin-prompt">Click anywhere to begin</div>
+          </div>
+        </button>
+      ) : null}
+
+      {scene === "loading" ? (
+        <main className="scene-shell scene-shell--centered">
+          <BrandMark />
+
+          <section className="loading-card">
+            <span className="eyebrow">Loading Model</span>
+            <h2>{message}</h2>
+            <div aria-hidden="true" className="progress-track">
+              <div
+                className="progress-fill"
+                style={{
+                  width: `${Math.max(progress, status === "ready" ? 100 : 6)}%`,
+                }}
+              />
+            </div>
+            <p>{Math.round(progress)}%</p>
+
+            {error ? (
+              <>
+                <div className="error-banner" role="alert">
+                  {error}
+                </div>
+                <button
+                  className="primary-button"
+                  onClick={() => void loadModel()}
+                  type="button"
+                >
+                  Retry loading
+                </button>
+              </>
+            ) : null}
+          </section>
+        </main>
+      ) : null}
+
+      {scene === "source" ? (
+        <main className="scene-shell">
+          <div className="scene-header">
+            <BrandMark />
+          </div>
+
+          <section className="source-card">
+            <span className="eyebrow">Choose Input</span>
+            <h2>Caption a live camera or a local video file.</h2>
+            <p>
+              The model is ready. Pick a source and we&apos;ll start captioning
+              each frame as quickly as the browser can process it.
+            </p>
+
+            <div className="source-grid">
+              <button
+                className="source-option"
+                onClick={() => void handleUseWebcam()}
+                type="button"
+              >
+                <div className="source-option__header">
+                  <Camera
+                    className="source-option__icon"
+                    size={28}
+                    strokeWidth={1.9}
+                  />
+                  <strong>Webcam</strong>
+                </div>
+                <span>
+                  Start a live camera stream and caption it in real time.
+                </span>
+              </button>
+
+              <button
+                className="source-option"
+                onClick={openVideoPicker}
+                type="button"
+              >
+                <div className="source-option__header">
+                  <Film
+                    className="source-option__icon"
+                    size={28}
+                    strokeWidth={1.9}
+                  />
+                  <strong>File</strong>
+                </div>
+                <span>
+                  Upload a local clip and run the same caption loop against it.
+                </span>
+              </button>
+            </div>
+
+            {mediaError ? (
+              <div className="error-banner" role="alert">
+                {mediaError}
+              </div>
+            ) : null}
+          </section>
+        </main>
+      ) : null}
+
+      {scene === "capture" && source ? (
+        <CaptureScene
+          mediaError={mediaError}
+          onChooseVideo={openVideoPicker}
+          onChooseWebcam={handleUseWebcam}
+          onDismissMediaError={() => setMediaError(null)}
+          onExit={exitCapture}
+          onPromptChange={setPrompt}
+          prompt={prompt}
+          promptPresets={PROMPT_PRESETS}
+          source={source}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function App() {
+  return (
+    <VLMProvider>
+      <AppContent />
+    </VLMProvider>
+  );
+}
+
+export default App;

src/components/BrandMark.tsx

@@ -0,0 +1,11 @@
+export function BrandMark() {
+  return (
+    <div className="brand-mark">
+      <img alt="Liquid AI icon" className="brand-logo" src="/logo-light.webp" />
+      <div className="brand-copy">
+        <span>Liquid AI</span>
+        <strong>LFM2-VL WebGPU</strong>
+      </div>
+    </div>
+  );
+}

src/components/CaptureScene.tsx

@@ -0,0 +1,419 @@
+import {
+  startTransition,
+  useDeferredValue,
+  useEffect,
+  useEffectEvent,
+  useRef,
+  useState,
+} from "react";
+import { ArrowLeft, Camera, Film, Pause, Play } from "lucide-react";
+import { BrandMark } from "./BrandMark";
+import { useVLM } from "../context/VLMContext";
+
+export type CaptureSource =
+  | {
+      kind: "webcam";
+      label: string;
+      stream: MediaStream;
+    }
+  | {
+      kind: "file";
+      label: string;
+      url: string;
+    };
+
+type CaptionEntry = {
+  id: string;
+  text: string;
+};
+
+type CaptureSceneProps = {
+  mediaError: string | null;
+  onChooseVideo: () => void;
+  onChooseWebcam: () => Promise<void>;
+  onDismissMediaError: () => void;
+  onExit: () => void;
+  onPromptChange: (prompt: string) => void;
+  prompt: string;
+  promptPresets: readonly {
+    display: string;
+    prompt: string;
+  }[];
+  source: CaptureSource;
+};
+
+const CAPTION_LIMIT = 4;
+
+function wait(milliseconds: number) {
+  return new Promise<void>((resolve) => {
+    window.setTimeout(resolve, milliseconds);
+  });
+}
+
+function createCaptionId() {
+  return (
+    globalThis.crypto?.randomUUID?.() ??
+    `caption-${Date.now()}-${Math.random()}`
+  );
+}
+
+function normalizePrompt(text: string) {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+function getErrorMessage(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return "Something went wrong while captioning the current frame.";
+}
+
+export function CaptureScene({
+  mediaError,
+  onChooseVideo,
+  onChooseWebcam,
+  onDismissMediaError,
+  onExit,
+  onPromptChange,
+  prompt,
+  promptPresets,
+  source,
+}: CaptureSceneProps) {
+  const { generateCaption } = useVLM();
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const loopIdRef = useRef(0);
+
+  const [activeCaption, setActiveCaption] = useState("");
+  const [captionHistory, setCaptionHistory] = useState<CaptionEntry[]>([]);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const [runtimeError, setRuntimeError] = useState<string | null>(null);
+  const [videoReady, setVideoReady] = useState(false);
+
+  const deferredPrompt = useDeferredValue(
+    normalizePrompt(prompt) || promptPresets[0].prompt,
+  );
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) {
+      return;
+    }
+
+    setVideoReady(false);
+    setRuntimeError(null);
+
+    if (source.kind === "webcam") {
+      video.srcObject = source.stream;
+      video.removeAttribute("src");
+      void video.play().catch(() => undefined);
+
+      return () => {
+        video.pause();
+        video.srcObject = null;
+      };
+    }
+
+    video.srcObject = null;
+    video.src = source.url;
+    video.load();
+    void video.play().catch(() => undefined);
+
+    return () => {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    };
+  }, [source]);
+
+  useEffect(() => {
+    setCaptionHistory([]);
+    setActiveCaption("");
+    setIsGenerating(false);
+    setIsPaused(false);
+  }, [source]);
+
+  useEffect(() => {
+    if (!isPaused) {
+      return;
+    }
+
+    setActiveCaption("");
+    setIsGenerating(false);
+  }, [isPaused]);
+
+  const handleCanPlay = () => {
+    setVideoReady(true);
+    void videoRef.current?.play().catch(() => undefined);
+  };
+
+  const captureFrame = useEffectEvent(() => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+
+    if (
+      !video ||
+      !canvas ||
+      !videoReady ||
+      video.paused ||
+      video.ended ||
+      video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA ||
+      video.videoWidth === 0 ||
+      video.videoHeight === 0
+    ) {
+      return null;
+    }
+
+    const maxDimension = 960;
+    const scale = Math.min(
+      1,
+      maxDimension / Math.max(video.videoWidth, video.videoHeight),
+    );
+    const width = Math.max(1, Math.round(video.videoWidth * scale));
+    const height = Math.max(1, Math.round(video.videoHeight * scale));
+
+    if (canvas.width !== width) {
+      canvas.width = width;
+    }
+
+    if (canvas.height !== height) {
+      canvas.height = height;
+    }
+
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    if (!context) {
+      return null;
+    }
+
+    context.drawImage(video, 0, 0, width, height);
+    return context.getImageData(0, 0, width, height);
+  });
+
+  const runCaptionPass = useEffectEvent(async (loopId: number) => {
+    if (isPaused) {
+      await wait(120);
+      return;
+    }
+
+    const frame = captureFrame();
+    if (!frame) {
+      await wait(120);
+      return;
+    }
+
+    setRuntimeError(null);
+    setIsGenerating(true);
+    setActiveCaption("");
+
+    try {
+      const finalCaption = await generateCaption({
+        frame,
+        onStream: (text) => {
+          if (loopIdRef.current !== loopId) {
+            return;
+          }
+
+          setActiveCaption(text);
+        },
+        prompt: deferredPrompt,
+      });
+
+      if (loopIdRef.current !== loopId) {
+        return;
+      }
+
+      const normalizedCaption = normalizePrompt(finalCaption);
+      if (normalizedCaption.length === 0) {
+        return;
+      }
+
+      startTransition(() => {
+        setCaptionHistory((current) => {
+          if (current[0]?.text === normalizedCaption) {
+            return current;
+          }
+
+          return [
+            { id: createCaptionId(), text: normalizedCaption },
+            ...current,
+          ].slice(0, CAPTION_LIMIT);
+        });
+      });
+    } catch (error) {
+      if (loopIdRef.current !== loopId) {
+        return;
+      }
+
+      setRuntimeError(getErrorMessage(error));
+      await wait(240);
+    } finally {
+      if (loopIdRef.current === loopId) {
+        setActiveCaption("");
+        setIsGenerating(false);
+      }
+    }
+  });
+
+  useEffect(() => {
+    loopIdRef.current += 1;
+    const currentLoopId = loopIdRef.current;
+    let mounted = true;
+
+    const loop = async () => {
+      while (mounted && loopIdRef.current === currentLoopId) {
+        await runCaptionPass(currentLoopId);
+        await wait(72);
+      }
+    };
+
+    void loop();
+
+    return () => {
+      mounted = false;
+      loopIdRef.current += 1;
+    };
+  }, [source]);
+
+  const displayedHistory = [...captionHistory].reverse();
+
+  return (
+    <main className="capture-scene">
+      <video
+        ref={videoRef}
+        autoPlay
+        className="capture-video"
+        loop={source.kind === "file"}
+        muted
+        onCanPlay={handleCanPlay}
+        playsInline
+      />
+      <canvas ref={canvasRef} className="capture-canvas" />
+      <div className="capture-scrim" />
+
+      <header className="capture-toolbar">
+        <div className="capture-toolbar__left">
+          <BrandMark />
+          <div className="status-pill">
+            <span className={`status-dot ${videoReady ? "is-live" : ""}`} />
+            {source.kind === "webcam" ? "Webcam" : source.label}
+          </div>
+        </div>
+      </header>
+
+      {mediaError ? (
+        <div className="floating-alert" role="alert">
+          <span>{mediaError}</span>
+          <button
+            className="ghost-button ghost-button--small"
+            onClick={onDismissMediaError}
+            type="button"
+          >
+            Dismiss
+          </button>
+        </div>
+      ) : null}
+
+      {runtimeError ? (
+        <div className="floating-alert floating-alert--secondary" role="alert">
+          <span>{runtimeError}</span>
+        </div>
+      ) : null}
+
+      <section className="prompt-dock">
+        <span className="dock-label">Prompt</span>
+        <div className="prompt-chip-row">
+          {promptPresets.map((preset) => (
+            <button
+              key={preset.display}
+              className={`prompt-chip ${prompt === preset.prompt ? "is-active" : ""}`}
+              onClick={() => onPromptChange(preset.prompt)}
+              type="button"
+            >
+              {preset.display}
+            </button>
+          ))}
+        </div>
+
+        <textarea
+          className="prompt-input"
+          onChange={(event) => onPromptChange(event.target.value)}
+          placeholder="Ask the model anything about the current frame."
+          rows={3}
+          spellCheck={false}
+          value={prompt}
+        />
+      </section>
+
+      <section className="capture-side-rail">
+        <div className="capture-actions">
+          <button
+            className="ghost-button"
+            onClick={() => setIsPaused((current) => !current)}
+            type="button"
+          >
+            {isPaused ? (
+              <Play className="button-icon" size={16} strokeWidth={1.8} />
+            ) : (
+              <Pause className="button-icon" size={16} strokeWidth={1.8} />
+            )}
+            {isPaused ? "Resume" : "Pause"}
+          </button>
+          <button
+            className="ghost-button"
+            onClick={() => void onChooseWebcam()}
+            type="button"
+          >
+            <Camera className="button-icon" size={16} strokeWidth={1.8} />
+            Webcam
+          </button>
+          <button
+            className="ghost-button"
+            onClick={onChooseVideo}
+            type="button"
+          >
+            <Film className="button-icon" size={16} strokeWidth={1.8} />
+            Video file
+          </button>
+          <button className="ghost-button" onClick={onExit} type="button">
+            <ArrowLeft className="button-icon" size={16} strokeWidth={1.8} />
+            Back
+          </button>
+        </div>
+
+        <section className="caption-dock">
+          {displayedHistory.map((caption, index) => {
+            const depth = displayedHistory.length - index;
+            const opacity = Math.max(0.18, 1 - depth * 0.18);
+            const scale = 1 - depth * 0.04;
+
+            return (
+              <article
+                key={caption.id}
+                className="caption-bubble caption-bubble--history"
+                style={{
+                  opacity,
+                  transform: `translateY(${-depth * 8}px) scale(${scale})`,
+                }}
+              >
+                {caption.text}
+              </article>
+            );
+          })}
+
+          {activeCaption || isGenerating ? (
+            <article className="caption-bubble caption-bubble--active">
+              <div className="caption-meta">Live caption</div>
+              {activeCaption || (
+                <span className="caption-placeholder">
+                  Scanning current frame...
+                </span>
+              )}
+            </article>
+          ) : null}
+        </section>
+      </section>
+    </main>
+  );
+}

src/components/FluidBackdrop.tsx

@@ -0,0 +1,151 @@
+import {
+  Environment,
+  Float,
+  MeshTransmissionMaterial,
+} from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import { EffectComposer } from "@react-three/postprocessing";
+import { Suspense, useEffect, useState } from "react";
+import { DEFAULT_CONFIG, Fluid } from "../react-fluid-distortion";
+
+function BackdropGeometry() {
+  return (
+    <>
+      <ambientLight intensity={1.4} />
+      <directionalLight color="#ddf6ff" intensity={3.2} position={[3, 4, 6]} />
+      <directionalLight
+        color="#6ebfff"
+        intensity={1.5}
+        position={[-6, -3, -2]}
+      />
+      <Environment preset="city" />
+
+      <Float floatIntensity={1.1} rotationIntensity={0.9} speed={1.45}>
+        <mesh position={[-4.6, 1.9, -4.2]} rotation={[0.95, 0.35, 0.55]}>
+          <torusGeometry args={[1.12, 0.16, 48, 160]} />
+          <MeshTransmissionMaterial
+            anisotropy={0.4}
+            chromaticAberration={0.09}
+            distortion={0.2}
+            roughness={0.03}
+            thickness={1.3}
+            transmission={1}
+          />
+        </mesh>
+      </Float>
+
+      <Float floatIntensity={1.2} rotationIntensity={1.1} speed={1.55}>
+        <mesh position={[4.7, -1.7, -3.2]}>
+          <torusKnotGeometry args={[1.05, 0.24, 240, 32]} />
+          <MeshTransmissionMaterial
+            anisotropy={0.42}
+            chromaticAberration={0.1}
+            distortion={0.18}
+            roughness={0.03}
+            thickness={1.25}
+            transmission={1}
+          />
+        </mesh>
+      </Float>
+
+      <Float floatIntensity={1.25} rotationIntensity={1} speed={1.7}>
+        <mesh position={[4.9, 2.3, -4.5]} rotation={[0.35, 0.6, 1.05]}>
+          <dodecahedronGeometry args={[0.92, 0]} />
+          <MeshTransmissionMaterial
+            anisotropy={0.35}
+            chromaticAberration={0.08}
+            distortion={0.14}
+            roughness={0.03}
+            thickness={1.1}
+            transmission={1}
+          />
+        </mesh>
+      </Float>
+
+      <Float floatIntensity={1} rotationIntensity={0.85} speed={1.25}>
+        <mesh position={[-1.4, -2.3, -5.5]} rotation={[0.45, 0.75, 0.25]}>
+          <octahedronGeometry args={[1.18, 0]} />
+          <MeshTransmissionMaterial
+            anisotropy={0.32}
+            chromaticAberration={0.07}
+            distortion={0.12}
+            roughness={0.035}
+            thickness={1.15}
+            transmission={1}
+          />
+        </mesh>
+      </Float>
+
+      <Float floatIntensity={0.85} rotationIntensity={0.65} speed={1.1}>
+        <mesh position={[0.4, 0.35, -6.1]}>
+          <sphereGeometry args={[1.38, 64, 64]} />
+          <MeshTransmissionMaterial
+            anisotropy={0.28}
+            chromaticAberration={0.06}
+            distortion={0.08}
+            roughness={0.02}
+            thickness={1.4}
+            transmission={1}
+          />
+        </mesh>
+      </Float>
+    </>
+  );
+}
+
+type FluidBackdropProps = {
+  subdued?: boolean;
+};
+
+function BackdropReadySignal({ onReady }: { onReady: () => void }) {
+  useEffect(() => {
+    let raf = window.requestAnimationFrame(() => {
+      raf = window.requestAnimationFrame(() => {
+        onReady();
+      });
+    });
+
+    return () => {
+      window.cancelAnimationFrame(raf);
+    };
+  }, [onReady]);
+
+  return null;
+}
+
+export function FluidBackdrop({ subdued = false }: FluidBackdropProps) {
+  const backgroundColor = subdued ? "#060912" : DEFAULT_CONFIG.backgroundColor;
+  const [isReady, setIsReady] = useState(false);
+
+  return (
+    <div aria-hidden="true" className="fluid-backdrop">
+      <div className={`fluid-backdrop__scene ${isReady ? "is-ready" : ""}`}>
+        <Canvas
+          camera={{ fov: 42, position: [0, 0, 8] }}
+          dpr={[1, 2]}
+          gl={{ antialias: false }}
+        >
+          <color attach="background" args={[backgroundColor]} />
+
+          <Suspense fallback={null}>
+            <BackdropReadySignal onReady={() => setIsReady(true)} />
+            <BackdropGeometry />
+
+            <EffectComposer multisampling={0}>
+              <Fluid
+                {...DEFAULT_CONFIG}
+                backgroundColor={backgroundColor}
+                distortion={subdued ? 0.32 : 0.46}
+                fluidColor={subdued ? "#6fcff8" : "#96d8ff"}
+                intensity={subdued ? 1.35 : 1.9}
+                radius={0.24}
+                rainbow={false}
+              />
+            </EffectComposer>
+          </Suspense>
+        </Canvas>
+      </div>
+      <div className={`fluid-backdrop__veil ${subdued ? "is-subdued" : ""}`} />
+    </div>
+  );
+}

src/components/HfIcon.tsx

@@ -0,0 +1,39 @@
+type HfIconProps = {
+  className?: string;
+};
+
+export function HfIcon({ className }: HfIconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 8 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M230.721 172.7C230.183 170.673 229.313 168.75 228.146 167.008C228.396 166.091 228.587 165.159 228.714 164.217C229.543 158.241 227.471 152.77 223.567 148.537C221.452 146.225 219.185 144.698 216.784 143.761C218.36 137.018 219.157 130.117 219.161 123.193C219.161 120.03 218.982 116.932 218.682 113.88C218.526 112.356 218.337 110.836 218.115 109.32C217.428 104.847 216.408 100.431 215.064 96.11C214.183 93.2707 213.164 90.476 212.01 87.736C210.281 83.6782 208.262 79.75 205.969 75.982C204.465 73.475 202.827 71.0508 201.062 68.72C200.197 67.543 199.296 66.3938 198.358 65.274C195.58 61.898 192.561 58.7277 189.325 55.788C188.25 54.7997 187.145 53.8453 186.01 52.926C184.893 51.9943 183.751 51.0927 182.586 50.222C180.241 48.4766 177.818 46.8392 175.324 45.315C161.543 36.945 145.382 32.145 128.109 32.145C77.817 32.145 37.057 72.907 37.057 123.196C37.055 130.208 37.867 137.196 39.477 144.02C37.317 144.958 35.247 146.42 33.327 148.535C29.424 152.766 27.351 158.217 28.18 164.193C28.306 165.142 28.495 166.082 28.747 167.006C27.5811 168.749 26.7117 170.673 26.174 172.7C24.974 177.261 25.369 181.374 26.894 184.978C25.236 189.688 25.65 194.704 27.809 199.065C29.379 202.25 31.626 204.714 34.396 206.916C37.689 209.534 41.811 211.758 46.783 213.892C52.715 216.422 59.956 218.799 63.249 219.671C71.755 221.873 79.911 223.269 88.177 223.337C99.954 223.446 110.096 220.677 117.357 213.59C120.924 214.027 124.515 214.246 128.109 214.244C131.906 214.236 135.699 213.997 139.467 213.529C146.711 220.661 156.892 223.455 168.712 223.343C176.977 223.277 185.133 221.881 193.617 219.676C196.932 218.804 204.17 216.427 210.105 213.897C215.077 211.76 219.199 209.536 222.514 206.922C225.263 204.719 227.508 202.256 229.079 199.071C231.26 194.709 231.652 189.693 230.017 184.983C231.527 181.379 231.92 177.257 230.721 172.7Z"
+        fill="white"
+      />
+      <path
+        d="M221.784 183.816C222.786 182.312 223.458 180.613 223.756 178.831C224.053 177.048 223.97 175.223 223.512 173.475C222.848 170.952 221.476 168.854 219.615 167.347C220.512 165.873 221.1 164.233 221.344 162.525C221.881 158.811 220.648 155.103 217.874 152.079C215.716 149.726 212.662 148.431 209.282 148.431C208.889 148.431 208.489 148.452 208.081 148.492C210.643 140.304 211.942 131.774 211.933 123.195C211.933 76.5231 174.097 38.6851 127.424 38.6851C80.75 38.6851 42.9099 76.5191 42.9099 123.195C42.9015 131.752 44.1936 140.261 46.742 148.43H46.6519C43.2719 148.43 40.219 149.724 38.06 152.077C35.287 155.098 34.0529 158.81 34.5899 162.523C34.8346 164.231 35.4231 165.872 36.3199 167.346C34.4579 168.852 33.086 170.95 32.422 173.473C31.9642 175.222 31.8817 177.047 32.1799 178.83C32.4781 180.612 33.1501 182.312 34.1519 183.816C33.9739 184.094 33.8099 184.381 33.6549 184.676C31.9849 187.847 31.877 191.43 33.352 194.767C35.588 199.824 41.1419 203.808 51.9289 208.085C58.6359 210.745 64.779 212.446 64.833 212.461C73.705 214.762 81.729 215.931 88.675 215.931C100.081 215.931 108.591 212.811 114.026 206.647C123.222 208.106 132.594 208.052 141.773 206.489C147.201 212.757 155.76 215.931 167.262 215.931C174.208 215.931 182.232 214.762 191.103 212.461C191.158 212.446 197.298 210.745 204.008 208.085C214.795 203.808 220.35 199.824 222.585 194.767C224.059 191.43 223.952 187.847 222.281 184.676C222.129 184.379 221.961 184.091 221.784 183.816Z"
+        fill="#FFD21E"
+      />
+      <path
+        clipRule="evenodd"
+        d="M152.047 102.567C153.229 102.985 154.108 104.257 154.944 105.468C156.074 107.104 157.126 108.627 158.74 107.769C160.644 106.756 162.205 105.202 163.225 103.302C164.246 101.402 164.681 99.2427 164.475 97.096C164.321 95.4908 163.813 93.9398 162.987 92.5548C162.161 91.1697 161.038 89.985 159.7 89.0862C158.361 88.1874 156.839 87.5968 155.245 87.3569C153.65 87.117 152.022 87.2339 150.478 87.699C148.934 88.1639 147.513 88.9653 146.316 90.0455C145.119 91.1257 144.176 92.4578 143.556 93.946C142.936 95.4342 142.653 97.0415 142.728 98.652C142.804 100.263 143.235 101.836 143.992 103.26C144.74 104.667 146.4 104.003 148.152 103.302C149.525 102.753 150.956 102.181 152.047 102.567ZM100.672 102.567C99.49 102.985 98.611 104.258 97.775 105.468C96.645 107.105 95.592 108.627 93.979 107.769C91.5845 106.501 89.7482 104.386 88.8278 101.838C87.9075 99.2895 87.9692 96.4896 89.0008 93.9841C90.0324 91.4786 91.9601 89.4471 94.408 88.2855C96.856 87.1239 99.6488 86.9156 102.242 87.701C104.307 88.3228 106.141 89.5427 107.513 91.2065C108.885 92.8704 109.732 94.9035 109.949 97.049C110.165 99.1945 109.74 101.356 108.728 103.26C107.979 104.667 106.319 104.003 104.567 103.303C103.193 102.753 101.764 102.181 100.672 102.567ZM144.099 149.318C152.242 142.903 155.233 132.429 155.233 125.977C155.233 120.877 151.802 122.482 146.309 125.202L145.999 125.355C140.957 127.852 134.245 131.177 126.877 131.177C119.508 131.177 112.796 127.852 107.755 125.354C102.084 122.545 98.527 120.783 98.527 125.978C98.527 132.634 101.709 143.563 110.443 149.912C111.596 147.573 113.219 145.497 115.211 143.813C117.202 142.129 119.52 140.874 122.018 140.126C122.89 139.866 123.788 141.367 124.707 142.904C125.594 144.386 126.501 145.902 127.423 145.902C128.406 145.902 129.371 144.408 130.314 142.95C131.299 141.425 132.26 139.94 133.189 140.237C137.864 141.738 141.775 144.993 144.099 149.318Z"
+        fill="#32343D"
+        fillRule="evenodd"
+      />
+      <path
+        d="M144.097 149.317C139.856 152.659 134.219 154.9 126.878 154.9C119.981 154.9 114.587 152.922 110.443 149.911C111.596 147.572 113.219 145.495 115.211 143.812C117.202 142.128 119.52 140.873 122.018 140.125C123.73 139.614 125.545 145.901 127.423 145.901C129.433 145.901 131.37 139.655 133.189 140.236C137.863 141.738 141.773 144.993 144.097 149.317Z"
+        fill="#FF323D"
+      />
+      <path
+        clipRule="evenodd"
+        d="M81.2 111.64C80.2312 112.288 79.1173 112.687 77.9572 112.801C76.7971 112.916 75.6267 112.742 74.55 112.295C73.6893 111.94 72.9072 111.418 72.2488 110.759C71.5903 110.101 71.0684 109.319 70.713 108.458C70.267 107.381 70.0935 106.211 70.2082 105.051C70.3228 103.891 70.7219 102.777 71.37 101.808C72.1488 100.642 73.2558 99.7333 74.5512 99.1967C75.8466 98.6601 77.272 98.5197 78.6471 98.7935C80.0223 99.0672 81.2853 99.7427 82.2764 100.734C83.2675 101.726 83.9422 102.99 84.215 104.365C84.4883 105.74 84.3477 107.165 83.8113 108.46C83.2748 109.755 82.3654 110.861 81.2 111.64ZM182.613 111.64C181.644 112.288 180.53 112.687 179.37 112.801C178.209 112.916 177.039 112.742 175.962 112.295C175.101 111.939 174.319 111.418 173.661 110.759C173.003 110.101 172.481 109.319 172.125 108.458C171.68 107.381 171.507 106.211 171.621 105.051C171.736 103.891 172.135 102.777 172.782 101.808C173.364 100.936 174.133 100.205 175.032 99.6658C175.931 99.1269 176.938 98.7942 177.981 98.6917C179.025 98.5891 180.078 98.7193 181.064 99.0728C182.051 99.4264 182.947 99.9944 183.688 100.736C184.68 101.727 185.355 102.99 185.628 104.365C185.902 105.74 185.761 107.165 185.224 108.46C184.687 109.755 183.779 110.861 182.613 111.64Z"
+        fill="#FFAD03"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+}

src/context/VLMContext.ts

@@ -0,0 +1,29 @@
+import { createContext, useContext } from "react";
+
+export type LoadState = {
+  error: string | null;
+  message: string;
+  progress: number;
+  status: "idle" | "loading" | "ready" | "error";
+};
+
+export type VLMContextValue = LoadState & {
+  generateCaption: (request: {
+    frame: ImageData;
+    onStream?: (text: string) => void;
+    prompt: string;
+  }) => Promise<string>;
+  loadModel: () => Promise<void>;
+};
+
+export const VLMContext = createContext<VLMContextValue | null>(null);
+
+export function useVLM() {
+  const context = useContext(VLMContext);
+
+  if (!context) {
+    throw new Error("useVLM must be used within a VLMProvider.");
+  }
+
+  return context;
+}

src/context/VLMProvider.tsx

@@ -0,0 +1,247 @@
+import {
+  AutoModelForImageTextToText,
+  AutoProcessor,
+  RawImage,
+  TextStreamer,
+  type ProgressInfo,
+  type Tensor,
+} from "@huggingface/transformers";
+import { useCallback, useRef, useState, type PropsWithChildren } from "react";
+import { VLMContext, type LoadState } from "./VLMContext";
+
+const MODEL_ID = "onnx-community/LFM2-VL-450M-ONNX";
+const MODEL_FILE_COUNT = 3;
+const MAX_NEW_TOKENS = 128;
+
+type CaptionRequest = {
+  frame: ImageData;
+  onStream?: (text: string) => void;
+  prompt: string;
+};
+
+type ProcessorType = Awaited<ReturnType<typeof AutoProcessor.from_pretrained>>;
+type ModelType = Awaited<
+  ReturnType<typeof AutoModelForImageTextToText.from_pretrained>
+>;
+
+const initialLoadState: LoadState = {
+  error: null,
+  message: "Downloading...",
+  progress: 0,
+  status: "idle",
+};
+
+function normalizeText(text: string) {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+function getErrorMessage(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return "The model could not be loaded.";
+}
+
+export function VLMProvider({ children }: PropsWithChildren) {
+  const [loadState, setLoadState] = useState(initialLoadState);
+  const processorRef = useRef<ProcessorType | null>(null);
+  const modelRef = useRef<ModelType | null>(null);
+  const loadPromiseRef = useRef<Promise<void> | null>(null);
+  const generationInFlightRef = useRef(false);
+
+  const setLoadProgress = useCallback((state: Partial<LoadState>) => {
+    setLoadState((current) => ({
+      ...current,
+      ...state,
+    }));
+  }, []);
+
+  const loadModel = useCallback(async () => {
+    if (processorRef.current && modelRef.current) {
+      setLoadProgress({
+        error: null,
+        message: "Model ready",
+        progress: 100,
+        status: "ready",
+      });
+      return;
+    }
+
+    if (loadPromiseRef.current) {
+      return loadPromiseRef.current;
+    }
+
+    if (!("gpu" in navigator)) {
+      const message = "WebGPU is not available in this browser.";
+      setLoadProgress({
+        error: message,
+        message: "WebGPU unavailable",
+        progress: 0,
+        status: "error",
+      });
+      throw new Error(message);
+    }
+
+    loadPromiseRef.current = (async () => {
+      try {
+        const processor = await AutoProcessor.from_pretrained(MODEL_ID);
+        processorRef.current = processor;
+
+        setLoadProgress({
+          message: "Downloading...",
+          progress: 0,
+          status: "loading",
+        });
+
+        const progressMap = new Map<string, number>();
+        const progressCallback = (info: ProgressInfo) => {
+          if (
+            info.status !== "progress" ||
+            !info.file.endsWith(".onnx_data") ||
+            info.total === 0
+          ) {
+            return;
+          }
+
+          progressMap.set(info.file, info.loaded / info.total);
+
+          const totalProgress =
+            (Array.from(progressMap.values()).reduce(
+              (sum, value) => sum + value,
+              0,
+            ) /
+              MODEL_FILE_COUNT) *
+            100;
+
+          setLoadProgress({
+            message: "Downloading...",
+            progress: totalProgress,
+            status: "loading",
+          });
+        };
+
+        modelRef.current = await AutoModelForImageTextToText.from_pretrained(
+          MODEL_ID,
+          {
+            device: "webgpu",
+            dtype: {
+              vision_encoder: "fp16",
+              embed_tokens: "fp16",
+              decoder_model_merged: "q4f16",
+            },
+            progress_callback: progressCallback,
+          },
+        );
+
+        setLoadProgress({
+          error: null,
+          message: "Model ready",
+          progress: 100,
+          status: "ready",
+        });
+      } catch (error) {
+        const message = getErrorMessage(error);
+        setLoadProgress({
+          error: message,
+          message: "Unable to load model",
+          progress: 0,
+          status: "error",
+        });
+        throw error;
+      } finally {
+        loadPromiseRef.current = null;
+      }
+    })();
+
+    return loadPromiseRef.current;
+  }, [setLoadProgress]);
+
+  const generateCaption = useCallback(
+    async ({ frame, onStream, prompt }: CaptionRequest) => {
+      const processor = processorRef.current;
+      const model = modelRef.current;
+
+      if (!processor || !model || !processor.tokenizer) {
+        throw new Error("The model is not ready yet.");
+      }
+
+      if (generationInFlightRef.current) {
+        return "";
+      }
+
+      generationInFlightRef.current = true;
+
+      try {
+        const messages = [
+          {
+            content: [
+              { type: "image" },
+              { text: normalizeText(prompt), type: "text" },
+            ],
+            role: "user",
+          },
+        ];
+
+        const chatPrompt = processor.apply_chat_template(messages, {
+          add_generation_prompt: true,
+        });
+        const rawFrame = new RawImage(frame.data, frame.width, frame.height, 4);
+
+        const inputs = await processor(rawFrame, chatPrompt, {
+          add_special_tokens: false,
+        });
+
+        let streamedText = "";
+        const streamer = new TextStreamer(processor.tokenizer, {
+          callback_function: (text) => {
+            streamedText += text;
+            const normalized = normalizeText(streamedText);
+
+            if (normalized.length > 0) {
+              onStream?.(normalized);
+            }
+          },
+          skip_prompt: true,
+          skip_special_tokens: true,
+        });
+
+        const outputs = (await model.generate({
+          ...inputs,
+          do_sample: false,
+          max_new_tokens: MAX_NEW_TOKENS,
+          repetition_penalty: 1.08,
+          streamer,
+        })) as Tensor;
+
+        const inputLength = inputs.input_ids.dims.at(-1) ?? 0;
+        const generated = outputs.slice(null, [inputLength, null]);
+        const [decoded] = processor.batch_decode(generated, {
+          skip_special_tokens: true,
+        });
+
+        const finalCaption = normalizeText(decoded ?? streamedText);
+        if (finalCaption.length > 0) {
+          onStream?.(finalCaption);
+        }
+
+        return finalCaption;
+      } finally {
+        generationInFlightRef.current = false;
+      }
+    },
+    [],
+  );
+
+  return (
+    <VLMContext.Provider
+      value={{
+        ...loadState,
+        generateCaption,
+        loadModel,
+      }}
+    >
+      {children}
+    </VLMContext.Provider>
+  );
+}

src/index.css

@@ -0,0 +1,735 @@
+@font-face {
+  font-family: "Sohne";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/fonts/Söhne/Söhne-Buch.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Sohne";
+  font-style: normal;
+  font-weight: 300;
+  src: url("/fonts/Söhne/Söhne-Leicht.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Sohne";
+  font-style: normal;
+  font-weight: 700;
+  src: url("/fonts/Söhne/Söhne-Kräftig.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 100 800;
+  src: url("/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf")
+    format("truetype");
+}
+
+:root {
+  --bg: #050814;
+  --bg-soft: rgba(8, 13, 25, 0.72);
+  --panel: rgba(10, 15, 28, 0.68);
+  --panel-strong: rgba(255, 255, 255, 0.12);
+  --line: rgba(255, 255, 255, 0.12);
+  --line-strong: rgba(255, 255, 255, 0.22);
+  --text: #f3f7ff;
+  --text-soft: rgba(243, 247, 255, 0.72);
+  --text-muted: rgba(243, 247, 255, 0.54);
+  --accent: #9de0ff;
+  --accent-strong: #d7f4ff;
+  --shadow: 0 28px 80px rgba(2, 6, 17, 0.35);
+  --font-body: "Sohne", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+html {
+  background: var(--bg);
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-synthesis: none;
+  overflow: hidden;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+input,
+textarea {
+  color: inherit;
+  font: inherit;
+}
+
+button {
+  border: 0;
+  cursor: pointer;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+.hidden-file-input,
+.capture-canvas {
+  display: none;
+}
+
+.fluid-backdrop {
+  position: fixed;
+  inset: 0;
+  background: #000;
+}
+
+.fluid-backdrop canvas {
+  display: block;
+}
+
+.fluid-backdrop__scene {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition:
+    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
+    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform: scale(1.02);
+}
+
+.fluid-backdrop__scene.is-ready {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.fluid-backdrop__veil {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  transition: background-color 320ms ease;
+}
+
+.fluid-backdrop__veil.is-subdued {
+  background: rgba(3, 7, 16, 0.26);
+}
+
+.landing-scene,
+.scene-shell,
+.capture-scene {
+  position: relative;
+  z-index: 1;
+}
+
+.landing-scene {
+  width: 100%;
+  min-height: 100vh;
+  padding: 28px;
+  background: transparent;
+  text-align: left;
+}
+
+.landing-inner {
+  width: min(1120px, 100%);
+  min-height: calc(100vh - 56px);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 32px;
+}
+
+.brand-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  width: fit-content;
+  padding: 11px 17px 11px 11px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(7, 11, 22, 0.54);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+.brand-logo {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+}
+
+.brand-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.brand-copy span {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.brand-copy strong {
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.hero-copy {
+  max-width: 760px;
+}
+
+.eyebrow,
+.dock-label {
+  display: inline-block;
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 0.73rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+
+.hero-copy h1,
+.loading-card h2,
+.source-card h2 {
+  margin: 18px 0 0;
+  font-size: clamp(3.4rem, 9vw, 7.8rem);
+  font-weight: 700;
+  letter-spacing: -0.06em;
+  line-height: 0.95;
+}
+
+.hero-copy p,
+.source-card p {
+  max-width: 620px;
+  margin: 20px 0 0;
+  color: var(--text-soft);
+  font-size: clamp(1.05rem, 2.6vw, 1.42rem);
+  line-height: 1.5;
+}
+
+.hero-inline-icon {
+  display: inline-block;
+  width: 1.6rem;
+  height: 1.6rem;
+  margin: 0 0.25rem 1px 0.35rem;
+  vertical-align: text-bottom;
+}
+
+.hero-inline-wordmark {
+  display: inline-block;
+}
+
+.begin-prompt {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  width: fit-content;
+  margin: 0 auto;
+  padding: 14px 20px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--accent-strong);
+  font-size: 0.96rem;
+  letter-spacing: 0.02em;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.scene-shell {
+  width: 100%;
+  min-height: 100vh;
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.scene-shell--centered {
+  align-items: center;
+  gap: 28px;
+}
+
+.scene-header {
+  position: absolute;
+  top: 28px;
+  left: 28px;
+}
+
+.loading-card,
+.source-card,
+.prompt-dock,
+.floating-alert {
+  border: 1px solid var(--line);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+
+.loading-card {
+  width: min(520px, 100%);
+  padding: 30px;
+  border-radius: 32px;
+}
+
+.loading-card h2 {
+  margin-top: 16px;
+  font-size: clamp(2.3rem, 6vw, 4.3rem);
+}
+
+.loading-card p {
+  margin: 16px 0 0;
+  color: var(--text-soft);
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+}
+
+.progress-track {
+  width: 100%;
+  height: 12px;
+  margin-top: 24px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    rgba(128, 222, 255, 0.8),
+    rgba(245, 251, 255, 0.98)
+  );
+  box-shadow: 0 0 40px rgba(156, 228, 255, 0.4);
+}
+
+.source-card {
+  width: min(860px, 100%);
+  margin: 0 auto;
+  padding: 32px;
+  border-radius: 36px;
+}
+
+.source-card h2 {
+  margin-top: 16px;
+  font-size: clamp(2.2rem, 5vw, 4.8rem);
+}
+
+.source-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 30px;
+}
+
+.source-option,
+.ghost-button,
+.primary-button,
+.prompt-chip {
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    background-color 180ms ease,
+    opacity 180ms ease;
+}
+
+.source-option {
+  display: flex;
+  padding: 26px;
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.05);
+  flex-direction: column;
+  justify-content: space-between;
+  text-align: left;
+  gap: 8px;
+}
+
+.source-option strong {
+  font-size: 1.45rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.source-option__header {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.source-option__icon,
+.button-icon {
+  color: var(--accent);
+}
+
+.source-option span {
+  color: var(--text-soft);
+  font-size: 1.06rem;
+  line-height: 1.5;
+}
+
+.source-option:hover,
+.ghost-button:hover,
+.primary-button:hover,
+.prompt-chip:hover {
+  transform: translateY(-2px);
+}
+
+.capture-scene {
+  min-height: 100vh;
+  background: #03050a;
+  overflow: hidden;
+}
+
+.capture-video,
+.capture-scrim {
+  position: absolute;
+  inset: 0;
+}
+
+.capture-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.capture-scrim {
+  background: linear-gradient(
+      180deg,
+      rgba(3, 5, 10, 0.15),
+      rgba(3, 5, 10, 0.28) 36%,
+      rgba(3, 5, 10, 0.68)
+    ),
+    radial-gradient(
+      circle at top left,
+      rgba(146, 220, 255, 0.2),
+      transparent 34%
+    ),
+    radial-gradient(
+      circle at bottom right,
+      rgba(255, 255, 255, 0.09),
+      transparent 24%
+    );
+}
+
+.capture-toolbar {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px;
+}
+
+.capture-toolbar__left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.status-pill,
+.ghost-button,
+.primary-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(8, 13, 24, 0.44);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.button-icon {
+  flex-shrink: 0;
+}
+
+.status-pill {
+  color: var(--text-soft);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.status-dot.is-live {
+  background: #9ce5ff;
+  box-shadow: 0 0 16px rgba(156, 229, 255, 0.7);
+}
+
+.toolbar-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.ghost-button {
+  color: var(--text);
+}
+
+.ghost-button--small {
+  padding: 8px 12px;
+}
+
+.primary-button {
+  width: fit-content;
+  margin-top: 18px;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.floating-alert {
+  position: absolute;
+  top: 96px;
+  left: 24px;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  max-width: min(620px, calc(100vw - 48px));
+  padding: 14px 16px;
+  border-radius: 20px;
+}
+
+.floating-alert--secondary {
+  top: 156px;
+}
+
+.error-banner {
+  margin-top: 18px;
+  padding: 14px 16px;
+  border: 1px solid rgba(255, 160, 160, 0.3);
+  border-radius: 18px;
+  background: rgba(255, 120, 120, 0.08);
+  color: #ffd9d9;
+  line-height: 1.5;
+}
+
+.prompt-dock,
+.capture-side-rail {
+  position: absolute;
+  bottom: 24px;
+  z-index: 2;
+}
+
+.prompt-dock {
+  left: 24px;
+  width: min(520px, calc(100vw - 48px));
+  padding: 18px;
+  border-radius: 30px;
+}
+
+.prompt-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 14px 0 16px;
+}
+
+.prompt-chip {
+  padding: 10px 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-soft);
+}
+
+.prompt-chip.is-active {
+  border-color: rgba(157, 224, 255, 0.42);
+  background: rgba(157, 224, 255, 0.14);
+  color: var(--accent-strong);
+}
+
+.prompt-input {
+  width: 100%;
+  min-height: 78px;
+  padding: 14px 16px;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+  line-height: 1.5;
+  resize: none;
+}
+
+.prompt-input::placeholder {
+  color: var(--text-muted);
+}
+
+.prompt-input:focus {
+  outline: 1px solid rgba(157, 224, 255, 0.44);
+  border-color: rgba(157, 224, 255, 0.44);
+}
+
+.capture-side-rail {
+  right: 24px;
+  width: min(400px, calc(100vw - 48px));
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.capture-actions {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  z-index: 4;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+  pointer-events: auto;
+}
+
+.caption-dock {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+}
+
+.caption-bubble {
+  width: 100%;
+  padding: 16px 18px;
+  border-radius: 30px 30px 12px 30px;
+  color: #07101b;
+  line-height: 1.48;
+  box-shadow: 0 20px 48px rgba(3, 7, 17, 0.24);
+}
+
+.caption-bubble--history {
+  background: rgba(255, 255, 255, 0.78);
+}
+
+.caption-bubble--active {
+  min-height: 74px;
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.caption-meta {
+  margin-bottom: 8px;
+  color: rgba(7, 16, 27, 0.54);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.caption-placeholder {
+  color: rgba(7, 16, 27, 0.5);
+}
+
+@media (max-width: 900px) {
+  body {
+    overflow: auto;
+  }
+
+  .landing-scene,
+  .scene-shell {
+    padding: 22px;
+  }
+
+  .landing-inner {
+    min-height: calc(100vh - 44px);
+  }
+
+  .source-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .capture-toolbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .prompt-dock,
+  .capture-side-rail {
+    position: relative;
+    left: auto;
+    right: auto;
+    bottom: auto;
+    width: auto;
+    margin: 0 22px 22px;
+  }
+
+  .capture-actions {
+    top: 22px;
+    right: 22px;
+    left: 22px;
+    justify-content: flex-start;
+  }
+
+  .capture-scene {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-height: 100dvh;
+  }
+
+  .capture-scrim {
+    background: linear-gradient(
+        180deg,
+        rgba(3, 5, 10, 0.2),
+        rgba(3, 5, 10, 0.42) 42%,
+        rgba(3, 5, 10, 0.84)
+      ),
+      radial-gradient(
+        circle at top left,
+        rgba(146, 220, 255, 0.18),
+        transparent 30%
+      );
+  }
+}
+
+@media (max-width: 640px) {
+  .hero-copy h1,
+  .loading-card h2,
+  .source-card h2 {
+    letter-spacing: -0.05em;
+  }
+
+  .floating-alert {
+    top: auto;
+    left: 22px;
+    right: 22px;
+    bottom: 22px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .floating-alert--secondary {
+    bottom: 96px;
+  }
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

src/react-fluid-distortion/Fluid.tsx

@@ -0,0 +1,204 @@
+import { createPortal, useFrame, useThree } from "@react-three/fiber";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Camera, Color, Mesh, Scene, Texture, Vector2, Vector3 } from "three";
+import { ShaderPass } from "three/examples/jsm/Addons.js";
+import { Effect as FluidEffect } from "./effect/Fluid";
+import { useFBOs } from "./hooks/useFBOs";
+import { useMaterials } from "./hooks/useMaterials";
+import { DEFAULT_CONFIG } from "./constant";
+import { usePointer } from "./hooks/usePointer";
+import { normalizeScreenHz } from "./utils";
+import { type FluidProps } from "./types";
+
+type MaterialName = keyof ReturnType<typeof useMaterials>;
+type FBONames = keyof ReturnType<typeof useFBOs>;
+
+type Uniforms = {
+  uColor: Vector3 | Color;
+  uPointer: Vector2;
+  uTarget: Texture | null;
+  uVelocity: Texture;
+  uCurl: Texture;
+  uTexture: Texture;
+  uPressure: Texture;
+  uDivergence: Texture;
+  uSource: Texture;
+  uRadius: number;
+  uClearValue: number;
+  uCurlValue: number;
+  uDissipation: number;
+};
+
+export const Fluid = ({
+  blend = DEFAULT_CONFIG.blend,
+  force = DEFAULT_CONFIG.force,
+  radius = DEFAULT_CONFIG.radius,
+  curl = DEFAULT_CONFIG.curl,
+  swirl = DEFAULT_CONFIG.swirl,
+  intensity = DEFAULT_CONFIG.intensity,
+  distortion = DEFAULT_CONFIG.distortion,
+  fluidColor = DEFAULT_CONFIG.fluidColor,
+  backgroundColor = DEFAULT_CONFIG.backgroundColor,
+  showBackground = DEFAULT_CONFIG.showBackground,
+  rainbow = DEFAULT_CONFIG.rainbow,
+  pressure = DEFAULT_CONFIG.pressure,
+  densityDissipation = DEFAULT_CONFIG.densityDissipation,
+  velocityDissipation = DEFAULT_CONFIG.velocityDissipation,
+  blendFunction = DEFAULT_CONFIG.blendFunction,
+}: FluidProps) => {
+  const size = useThree((three) => three.size);
+  const gl = useThree((three) => three.gl);
+
+  const [bufferScene] = useState(() => new Scene());
+  const bufferCamera = useMemo(() => new Camera(), []);
+
+  const meshRef = useRef<Mesh>(null);
+  const postRef = useRef<ShaderPass>(null);
+  const pointerRef = useRef(new Vector2());
+  const colorRef = useRef(new Vector3());
+
+  const FBOs = useFBOs();
+  const materials = useMaterials();
+  const splatStack = usePointer({ force });
+
+  const setShaderMaterial = useCallback(
+    (name: MaterialName) => {
+      if (!meshRef.current) return;
+
+      meshRef.current.material = materials[name];
+      meshRef.current.material.needsUpdate = true;
+    },
+    [materials],
+  );
+
+  const setRenderTarget = useCallback(
+    (name: FBONames) => {
+      const target = FBOs[name];
+
+      if ("write" in target) {
+        gl.setRenderTarget(target.write);
+        gl.clear();
+        gl.render(bufferScene, bufferCamera);
+        target.swap();
+      } else {
+        gl.setRenderTarget(target);
+        gl.clear();
+        gl.render(bufferScene, bufferCamera);
+      }
+    },
+    [bufferCamera, bufferScene, FBOs, gl],
+  );
+
+  const setUniforms = useCallback(
+    <K extends keyof Uniforms>(
+      material: MaterialName,
+      uniform: K,
+      value: Uniforms[K],
+    ) => {
+      const mat = materials[material];
+
+      if (mat && mat.uniforms[uniform]) {
+        mat.uniforms[uniform].value = value;
+      }
+    },
+    [materials],
+  );
+
+  useFrame((_, delta) => {
+    if (!meshRef.current || !postRef.current) return;
+
+    for (let i = splatStack.length - 1; i >= 0; i--) {
+      const { mouseX, mouseY, velocityX, velocityY } = splatStack[i];
+
+      pointerRef.current.set(mouseX, mouseY);
+      colorRef.current.set(velocityX, velocityY, 10.0);
+
+      setShaderMaterial("splat");
+      setUniforms("splat", "uTarget", FBOs.velocity.read.texture);
+      setUniforms("splat", "uPointer", pointerRef.current);
+      setUniforms("splat", "uColor", colorRef.current);
+      setUniforms("splat", "uRadius", radius / 100.0);
+      setRenderTarget("velocity");
+      setUniforms("splat", "uTarget", FBOs.density.read.texture);
+      setRenderTarget("density");
+
+      splatStack.pop();
+    }
+
+    setShaderMaterial("curl");
+    setUniforms("curl", "uVelocity", FBOs.velocity.read.texture);
+    setRenderTarget("curl");
+
+    setShaderMaterial("vorticity");
+    setUniforms("vorticity", "uVelocity", FBOs.velocity.read.texture);
+    setUniforms("vorticity", "uCurl", FBOs.curl.texture);
+    setUniforms("vorticity", "uCurlValue", curl);
+    setRenderTarget("velocity");
+
+    setShaderMaterial("divergence");
+    setUniforms("divergence", "uVelocity", FBOs.velocity.read.texture);
+    setRenderTarget("divergence");
+
+    setShaderMaterial("clear");
+    setUniforms("clear", "uTexture", FBOs.pressure.read.texture);
+    setUniforms("clear", "uClearValue", normalizeScreenHz(pressure, delta));
+    setRenderTarget("pressure");
+
+    setShaderMaterial("pressure");
+    setUniforms("pressure", "uDivergence", FBOs.divergence.texture);
+
+    for (let i = 0; i < swirl; i++) {
+      setUniforms("pressure", "uPressure", FBOs.pressure.read.texture);
+      setRenderTarget("pressure");
+    }
+
+    setShaderMaterial("gradientSubstract");
+    setUniforms("gradientSubstract", "uPressure", FBOs.pressure.read.texture);
+    setUniforms("gradientSubstract", "uVelocity", FBOs.velocity.read.texture);
+    setRenderTarget("velocity");
+
+    setShaderMaterial("advection");
+    setUniforms("advection", "uVelocity", FBOs.velocity.read.texture);
+    setUniforms("advection", "uSource", FBOs.velocity.read.texture);
+    setUniforms(
+      "advection",
+      "uDissipation",
+      normalizeScreenHz(velocityDissipation, delta),
+    );
+
+    setRenderTarget("velocity");
+    setUniforms("advection", "uVelocity", FBOs.velocity.read.texture);
+    setUniforms("advection", "uSource", FBOs.density.read.texture);
+    setUniforms(
+      "advection",
+      "uDissipation",
+      normalizeScreenHz(densityDissipation, delta),
+    );
+
+    setRenderTarget("density");
+  });
+
+  return (
+    <>
+      {createPortal(
+        <mesh ref={meshRef} scale={[size.width, size.height, 1]}>
+          <planeGeometry args={[2, 2]} />
+        </mesh>,
+        bufferScene,
+      )}
+
+      <FluidEffect
+        blendFunction={blendFunction}
+        intensity={intensity}
+        rainbow={rainbow}
+        distortion={distortion}
+        backgroundColor={backgroundColor}
+        blend={blend}
+        fluidColor={fluidColor}
+        showBackground={showBackground}
+        ref={postRef}
+        tFluid={FBOs.density.read.texture}
+      />
+    </>
+  );
+};

src/react-fluid-distortion/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 whatisjery
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/react-fluid-distortion/constant.ts

@@ -0,0 +1,23 @@
+import { BlendFunction } from "postprocessing";
+
+export const DEFAULT_CONFIG = {
+  blend: 5,
+  intensity: 2,
+  force: 1.1,
+  distortion: 0.4,
+  curl: 1.9,
+  radius: 0.3,
+  swirl: 4,
+  pressure: 0.8,
+  densityDissipation: 0.96,
+  velocityDissipation: 1.0,
+  fluidColor: "#3300ff",
+  backgroundColor: "#070410",
+  showBackground: true,
+  rainbow: false,
+  dyeRes: 512,
+  simRes: 128,
+  blendFunction: BlendFunction.SET,
+} as const;
+
+export const REFRESH_RATE = 60;

src/react-fluid-distortion/effect/Fluid.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, useEffect, useMemo } from "react";
+import { FluidEffect } from "./FluidEffect";
+import type { EffectProps } from "../types";
+
+export const Effect = forwardRef(function Fluid(props: EffectProps, ref) {
+  // prevent re-creating the effect on every render
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const effect = useMemo(() => new FluidEffect(props), []);
+
+  useEffect(() => {
+    effect.state = { ...props };
+    effect.update();
+  }, [effect, props]);
+
+  useEffect(() => {
+    return () => {
+      effect.dispose?.();
+    };
+  }, [effect]);
+
+  return <primitive ref={ref} object={effect} dispose={null} />;
+});

src/react-fluid-distortion/effect/FluidEffect.tsx

@@ -0,0 +1,61 @@
+import { Effect, EffectAttribute } from "postprocessing";
+import { Texture, Uniform, Vector3 } from "three";
+import compositeFrag from "../glsl/composite.frag?raw";
+import { hexToRgb } from "../utils";
+import { type EffectProps } from "../types";
+
+type Uniforms = {
+  tFluid: Texture;
+  uColor: Vector3;
+  uBackgroundColor: Vector3;
+  uRainbow: boolean;
+  uShowBackground: boolean;
+  uDistort: number;
+  uBlend: number;
+  uIntensity: number;
+};
+
+export class FluidEffect extends Effect {
+  state: EffectProps;
+
+  constructor(props: EffectProps) {
+    const uniforms: Record<keyof Uniforms, Uniform> = {
+      tFluid: new Uniform(props.tFluid),
+      uDistort: new Uniform(props.distortion),
+      uRainbow: new Uniform(props.rainbow),
+      uIntensity: new Uniform(props.intensity),
+      uBlend: new Uniform(props.blend),
+      uShowBackground: new Uniform(props.showBackground),
+      uColor: new Uniform(hexToRgb(props.fluidColor!)),
+      uBackgroundColor: new Uniform(hexToRgb(props.backgroundColor!)),
+    };
+
+    super("FluidEffect", compositeFrag, {
+      blendFunction: props.blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map(Object.entries(uniforms)),
+    });
+
+    this.state = props;
+  }
+
+  private updateUniform<K extends keyof Uniforms>(key: K, value: Uniforms[K]) {
+    const uniform = this.uniforms.get(key);
+    if (uniform) {
+      uniform.value = value;
+    }
+  }
+
+  update() {
+    this.updateUniform("uIntensity", this.state.intensity);
+    this.updateUniform("uDistort", this.state.distortion);
+    this.updateUniform("uRainbow", this.state.rainbow);
+    this.updateUniform("uBlend", this.state.blend);
+    this.updateUniform("uShowBackground", this.state.showBackground);
+    this.updateUniform("uColor", hexToRgb(this.state.fluidColor));
+    this.updateUniform(
+      "uBackgroundColor",
+      hexToRgb(this.state.backgroundColor),
+    );
+  }
+}

src/react-fluid-distortion/glsl.d.ts

@@ -0,0 +1,24 @@
+declare module "*.glsl" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.vert" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.frag" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.vert?raw" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.frag?raw" {
+  const value: string;
+  export default value;
+}

src/react-fluid-distortion/glsl/advection.frag

@@ -0,0 +1,16 @@
+precision highp float;
+
+varying vec2 vUv;
+uniform sampler2D uVelocity;
+uniform sampler2D uSource;
+uniform vec2 texelSize;
+uniform float dt;
+uniform float uDissipation;
+
+void main() {
+    vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
+
+    gl_FragColor = uDissipation * texture2D(uSource, coord);
+
+    gl_FragColor.a = 1.0;
+}

src/react-fluid-distortion/glsl/base.vert

@@ -0,0 +1,26 @@
+#ifdef USE_V_UV
+  varying vec2 vUv;
+#endif
+
+#ifdef USE_OFFSETS
+  varying vec2 vL;
+  varying vec2 vR;
+  varying vec2 vT;
+  varying vec2 vB;
+  uniform vec2 texelSize;
+#endif
+
+void main() {
+  #ifdef USE_V_UV
+    vUv = uv;
+  #endif
+
+  #ifdef USE_OFFSETS
+    vL = uv - vec2(texelSize.x, 0.0);
+    vR = uv + vec2(texelSize.x, 0.0);
+    vT = uv + vec2(0.0, texelSize.y);
+    vB = uv - vec2(0.0, texelSize.y);
+  #endif
+
+  gl_Position = vec4(position, 1.0);
+}

src/react-fluid-distortion/glsl/clear.frag

@@ -0,0 +1,7 @@
+precision highp float;
+
+varying vec2 vUv;
+uniform sampler2D uTexture;
+uniform float uClearValue;
+
+void main() { gl_FragColor = uClearValue * texture2D(uTexture, vUv); }

src/react-fluid-distortion/glsl/composite.frag

@@ -0,0 +1,41 @@
+uniform sampler2D tFluid;
+
+uniform vec3 uColor;
+uniform vec3 uBackgroundColor;
+
+uniform float uDistort;
+uniform float uIntensity;
+uniform float uRainbow;
+uniform float uBlend;
+uniform float uShowBackground;
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+
+    vec3 fluidColor = texture2D(tFluid, uv).rgb;
+
+    vec2 distortedUv = uv - fluidColor.rg * uDistort * 0.001;
+
+    vec4 texture = texture2D(inputBuffer, distortedUv);
+
+    float intensity = length(fluidColor) * uIntensity * 0.0001;
+
+    vec3 selectedColor = uColor * length(fluidColor);
+
+    vec4 colorForFluidEffect = vec4(uRainbow == 1.0 ? fluidColor : selectedColor, 1.0);
+
+    vec4 computedBgColor = uShowBackground != 0.0 ? vec4(uBackgroundColor, 1.0) : vec4(0.0, 0.0, 0.0, 0.0);
+
+    outputColor = mix(texture, colorForFluidEffect, intensity);
+
+    vec4 computedFluidColor = mix(texture, colorForFluidEffect, uBlend * 0.01);
+
+    vec4 finalColor;
+
+    if(texture.a < 0.1) {
+        finalColor = mix(computedBgColor, colorForFluidEffect, intensity);
+    } else {
+        finalColor = mix(computedFluidColor, computedBgColor, 1.0 - texture.a);
+    }
+
+    outputColor = finalColor;
+}

src/react-fluid-distortion/glsl/curl.frag

@@ -0,0 +1,22 @@
+precision highp float;
+
+varying vec2 vL;
+varying vec2 vR;
+varying vec2 vT;
+varying vec2 vB;
+
+uniform sampler2D uVelocity;
+
+void main() {
+    float L = texture2D(uVelocity, vL).y;
+
+    float R = texture2D(uVelocity, vR).y;
+
+    float T = texture2D(uVelocity, vT).x;
+
+    float B = texture2D(uVelocity, vB).x;
+
+    float vorticity = R - L - T + B;
+
+    gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);
+}

src/react-fluid-distortion/glsl/divergence.frag

@@ -0,0 +1,41 @@
+precision highp float;
+
+varying highp vec2 vUv;
+varying highp vec2 vL;
+varying highp vec2 vR;
+varying highp vec2 vT;
+varying highp vec2 vB;
+
+uniform sampler2D uVelocity;
+
+void main() {
+    float L = texture2D(uVelocity, vL).x;
+
+    float R = texture2D(uVelocity, vR).x;
+
+    float T = texture2D(uVelocity, vT).y;
+
+    float B = texture2D(uVelocity, vB).y;
+
+    vec2 C = texture2D(uVelocity, vUv).xy;
+
+    if(vL.x < 0.0) {
+        L = -C.x;
+    }
+
+    if(vR.x > 1.0) {
+        R = -C.x;
+    }
+
+    if(vT.y > 1.0) {
+        T = -C.y;
+    }
+
+    if(vB.y < 0.0) {
+        B = -C.y;
+    }
+
+    float div = 0.5 * (R - L + T - B);
+
+    gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
+}

src/react-fluid-distortion/glsl/gradientSubstract.frag

@@ -0,0 +1,26 @@
+precision highp float;
+
+varying highp vec2 vUv;
+varying highp vec2 vL;
+varying highp vec2 vR;
+varying highp vec2 vT;
+varying highp vec2 vB;
+
+uniform sampler2D uPressure;
+uniform sampler2D uVelocity;
+
+void main() {
+    float L = texture2D(uPressure, vL).x;
+
+    float R = texture2D(uPressure, vR).x;
+
+    float T = texture2D(uPressure, vT).x;
+
+    float B = texture2D(uPressure, vB).x;
+
+    vec2 velocity = texture2D(uVelocity, vUv).xy;
+
+    velocity.xy -= vec2(R - L, T - B);
+
+    gl_FragColor = vec4(velocity, 0.0, 1.0);
+}

src/react-fluid-distortion/glsl/pressure.frag

@@ -0,0 +1,28 @@
+precision highp float;
+
+varying highp vec2 vUv;
+varying highp vec2 vL;
+varying highp vec2 vR;
+varying highp vec2 vT;
+varying highp vec2 vB;
+
+uniform sampler2D uPressure;
+uniform sampler2D uDivergence;
+
+void main() {
+    float L = texture2D(uPressure, vL).x;
+
+    float R = texture2D(uPressure, vR).x;
+
+    float T = texture2D(uPressure, vT).x;
+
+    float B = texture2D(uPressure, vB).x;
+
+    float C = texture2D(uPressure, vUv).x;
+
+    float divergence = texture2D(uDivergence, vUv).x;
+
+    float pressure = (L + R + B + T - divergence) * 0.25;
+
+    gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
+}

src/react-fluid-distortion/glsl/splat.frag

@@ -0,0 +1,19 @@
+varying vec2 vUv;
+
+uniform sampler2D uTarget;
+uniform float aspectRatio;
+uniform vec3 uColor;
+uniform vec2 uPointer;
+uniform float uRadius;
+
+void main() {
+    vec2 p = vUv - uPointer.xy;
+
+    p.x *= aspectRatio;
+
+    vec3 splat = exp(-dot(p, p) / uRadius) * uColor;
+
+    vec3 base = texture2D(uTarget, vUv).xyz;
+
+    gl_FragColor = vec4(base + splat, 1.0);
+}

src/react-fluid-distortion/glsl/vorticity.frag

@@ -0,0 +1,36 @@
+precision highp float;
+
+varying vec2 vUv;
+varying vec2 vL;
+varying vec2 vR;
+varying vec2 vT;
+varying vec2 vB;
+
+uniform sampler2D uVelocity;
+uniform sampler2D uCurl;
+uniform float uCurlValue;
+uniform float dt;
+
+void main() {
+    float L = texture2D(uCurl, vL).x;
+
+    float R = texture2D(uCurl, vR).x;
+
+    float T = texture2D(uCurl, vT).x;
+
+    float B = texture2D(uCurl, vB).x;
+
+    float C = texture2D(uCurl, vUv).x;
+
+    vec2 force = vec2(abs(T) - abs(B), abs(R) - abs(L)) * 0.5;
+
+    force /= length(force) + 1.;
+
+    force *= uCurlValue * C;
+
+    force.y *= -1.;
+
+    vec2 vel = texture2D(uVelocity, vUv).xy;
+
+    gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
+}

src/react-fluid-distortion/hooks/useDoubleFBO.tsx

@@ -0,0 +1,41 @@
+import * as THREE from "three";
+import { useFBO, type FboProps } from "@react-three/drei";
+import { useRef } from "react";
+
+type FBO = {
+  read: THREE.WebGLRenderTarget;
+  write: THREE.WebGLRenderTarget;
+  swap: () => void;
+  dispose: () => void;
+  setGenerateMipmaps: (value: boolean) => void;
+};
+
+export const useDoubleFBO = (
+  width: number,
+  height: number,
+  options: FboProps,
+) => {
+  const read = useFBO(width, height, options);
+
+  const write = useFBO(width, height, options);
+
+  const fbo = useRef<FBO>({
+    read,
+    write,
+    swap: () => {
+      const temp = fbo.read;
+      fbo.read = fbo.write;
+      fbo.write = temp;
+    },
+    dispose: () => {
+      read.dispose();
+      write.dispose();
+    },
+    setGenerateMipmaps: (value: boolean) => {
+      read.texture.generateMipmaps = value;
+      write.texture.generateMipmaps = value;
+    },
+  }).current;
+
+  return fbo;
+};