@effectnode/media 0.5.0 → 0.7.0

package/frontend/src/movie-app/components/EditorTabs/MovieStudioTab.tsx

@@ -324,20 +324,38 @@ export default function MovieStudioTab({ projectId }: Props) {
 
           {/* ===== Submit ===== */}
           {store.generating ? (
-            <div className="flex items-center gap-3">
-              <div className="flex items-center gap-2 flex-1 px-4 py-3 bg-ink-50 border border-ink-200 rounded-2xl">
-                {SpinnerIcon}
-                <span className="text-sm font-medium text-ink-700">
-                  Generating production bible...
-                </span>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2 flex-1 px-4 py-3 bg-ink-50 border border-ink-200 rounded-2xl">
+                  {SpinnerIcon}
+                  <span className="text-sm font-medium text-ink-700">
+                    {store.generateStatus ?? "Generating production bible..."}
+                  </span>
+                </div>
+                <button
+                  onClick={() => store.stop()}
+                  className="flex items-center justify-center gap-2 px-4 py-3 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white text-sm font-semibold rounded-2xl transition-all duration-150 shadow-sm"
+                >
+                  {StopIcon}
+                  Stop
+                </button>
               </div>
-              <button
-                onClick={() => store.stop()}
-                className="flex items-center justify-center gap-2 px-4 py-3 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white text-sm font-semibold rounded-2xl transition-all duration-150 shadow-sm"
-              >
-                {StopIcon}
-                Stop
-              </button>
+              {store.generateProgress && store.generateProgress.total > 0 && (
+                <div className="flex items-center gap-3 px-1">
+                  <div className="flex-1 h-2 bg-ink-200 rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-tiffany-500 rounded-full transition-all duration-300"
+                      style={{
+                        width: `${(store.generateProgress.current / store.generateProgress.total) * 100}%`,
+                      }}
+                    />
+                  </div>
+                  <span className="text-xs font-semibold text-ink-700 tabular-nums whitespace-nowrap">
+                    {store.generateProgress.current}/
+                    {store.generateProgress.total}
+                  </span>
+                </div>
+              )}
             </div>
           ) : (
             <button
@@ -387,7 +405,10 @@ export default function MovieStudioTab({ projectId }: Props) {
                             `character:${c.slug}`,
                           );
                           return (
-                            <tr key={c.slug} className="border-b border-ink-200">
+                            <tr
+                              key={c.slug}
+                              className="border-b border-ink-200"
+                            >
                               <td className="border border-ink-200 px-2 py-1.5 align-top font-mono text-[11px] text-tiffany-700">
                                 {c.slug}
                               </td>
@@ -418,7 +439,9 @@ export default function MovieStudioTab({ projectId }: Props) {
                                     />
                                   </div>
                                 ) : (
-                                  <span className="text-ink-300 text-xs">—</span>
+                                  <span className="text-ink-300 text-xs">
+                                    —
+                                  </span>
                                 )}
                               </td>
                               <td className="border border-ink-200 px-2 py-1.5 align-top">
@@ -468,7 +491,10 @@ export default function MovieStudioTab({ projectId }: Props) {
                             `place:${p.slug}`,
                           );
                           return (
-                            <tr key={p.slug} className="border-b border-ink-200">
+                            <tr
+                              key={p.slug}
+                              className="border-b border-ink-200"
+                            >
                               <td className="border border-ink-200 px-2 py-1.5 align-top font-mono text-[11px] text-tiffany-700">
                                 {p.slug}
                               </td>
@@ -499,14 +525,18 @@ export default function MovieStudioTab({ projectId }: Props) {
                                     />
                                   </div>
                                 ) : (
-                                  <span className="text-ink-300 text-xs">—</span>
+                                  <span className="text-ink-300 text-xs">
+                                    —
+                                  </span>
                                 )}
                               </td>
                               <td className="border border-ink-200 px-2 py-1.5 align-top">
                                 <EditableTextarea
                                   value={p.imagePrompt}
                                   onChange={(v) =>
-                                    store.updatePlace(p.slug, { imagePrompt: v })
+                                    store.updatePlace(p.slug, {
+                                      imagePrompt: v,
+                                    })
                                   }
                                   rows={3}
                                 />
@@ -522,9 +552,47 @@ export default function MovieStudioTab({ projectId }: Props) {
 
               {/* Scenes */}
               <div>
-                <h3 className="text-sm font-semibold text-ink-900 mb-2">
-                  Scenes
-                </h3>
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-sm font-semibold text-ink-900">Scenes</h3>
+                  {store.videosRendering ? (
+                    <span className="flex items-center gap-1.5 text-xs text-tiffany-600">
+                      {SpinnerIcon}
+                      {store.videoStatus ?? "Rendering..."}
+                    </span>
+                  ) : (
+                    <button
+                      onClick={() => store.renderVideos(projectId)}
+                      className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-xl bg-tiffany-500 hover:bg-tiffany-600 text-ink-950 transition-colors"
+                    >
+                      {SparkleIcon}
+                      Generate All Videos
+                    </button>
+                  )}
+                </div>
+
+                {store.videosRendering &&
+                  store.videoProgress &&
+                  store.videoProgress.total > 0 && (
+                    <div className="flex items-center gap-3 mb-2 px-1">
+                      <div className="flex-1 h-2 bg-ink-200 rounded-full overflow-hidden">
+                        <div
+                          className="h-full bg-tiffany-500 rounded-full transition-all duration-300"
+                          style={{
+                            width: `${(store.videoProgress.current / store.videoProgress.total) * 100}%`,
+                          }}
+                        />
+                      </div>
+                      <span className="text-xs font-semibold text-ink-700 tabular-nums whitespace-nowrap">
+                        {store.videoProgress.current}/{store.videoProgress.total}
+                      </span>
+                    </div>
+                  )}
+
+                {store.videosError && (
+                  <div className="mb-2 p-3 bg-red-50 border border-red-200 rounded-xl text-red-600 text-xs">
+                    {store.videosError}
+                  </div>
+                )}
                 {store.result.scenes.length === 0 ? (
                   <p className="text-xs text-ink-500 italic py-3 border border-dashed border-ink-200 rounded-2xl text-center">
                     No scenes found.
@@ -552,6 +620,7 @@ export default function MovieStudioTab({ projectId }: Props) {
                           },
                           { key: "place", label: "Place", className: "w-24" },
                           { key: "image", label: "Image", className: "w-16" },
+                          { key: "video", label: "Video", className: "w-40" },
                           { key: "script", label: "Script", className: "w-60" },
                           {
                             key: "voiceover",
@@ -566,15 +635,26 @@ export default function MovieStudioTab({ projectId }: Props) {
                           const url = imageUrlFor("scene", s.slug);
                           const spinning =
                             store.regeneratingSceneImages.includes(s.slug);
+                          const video = store.videos.find(
+                            (v) => v.slug === s.slug,
+                          );
+                          const videoUrl = resolveUrl(video?.url);
+                          const videoSpinning =
+                            store.regeneratingVideos.includes(s.slug);
                           return (
-                            <tr key={s.slug} className="border-b border-ink-200">
+                            <tr
+                              key={s.slug}
+                              className="border-b border-ink-200"
+                            >
                               <td className="border border-ink-200 px-2 py-1.5 align-top font-mono text-[11px] text-tiffany-700">
                                 {s.slug}
                               </td>
                               <td className="border border-ink-200 px-2 py-1.5 align-top">
                                 <EditableInput
                                   type="number"
-                                  value={s.duration > 0 ? String(s.duration) : ""}
+                                  value={
+                                    s.duration > 0 ? String(s.duration) : ""
+                                  }
                                   onChange={(v) =>
                                     store.updateScene(s.slug, {
                                       duration: Number(v) || 0,
@@ -634,6 +714,30 @@ export default function MovieStudioTab({ projectId }: Props) {
                                       }
                                     />
                                   </div>
+                                ) : (
+                                  <span className="text-ink-300 text-xs">
+                                    —
+                                  </span>
+                                )}
+                              </td>
+                              <td className="border border-ink-200 px-2 py-1.5 align-top min-w-[180px]">
+                                {videoUrl ? (
+                                  <div className="flex flex-col items-start">
+                                    <video
+                                      src={`${videoUrl}&t=${video?.updatedAt}`}
+                                      controls
+                                      className="w-40 rounded-lg border border-ink-200 cursor-pointer"
+                                      onClick={() =>
+                                        openPreview(videoUrl, s.slug, "video")
+                                      }
+                                    />
+                                    <RegenerateButton
+                                      spinning={videoSpinning}
+                                      onClick={() =>
+                                        store.regenerateVideo(projectId, s.slug)
+                                      }
+                                    />
+                                  </div>
                                 ) : (
                                   <span className="text-ink-300 text-xs">—</span>
                                 )}

package/frontend/src/movie-app/components/EditorTabs/SetupAiModelTab.tsx

@@ -191,9 +191,19 @@ const DOWNLOAD_MODELS: {
     desc: "Character, place & scene images",
   },
   {
-    id: "qwen",
-    name: "AbstractFramework/qwen-image-edit-2511-8bit",
-    desc: "Image editing",
+    id: "ltx",
+    name: "dgrauet/ltx-2.3-mlx-q8",
+    desc: "Video generation",
+  },
+  {
+    id: "tts",
+    name: "Qwen/Qwen3-TTS-12Hz-1.7B-Base",
+    desc: "Voice-over & speech",
+  },
+  {
+    id: "gemma",
+    name: "mlx-community/gemma-4-e4b-it-8bit",
+    desc: "Story planning & dialogue (LLM)",
   },
 ];
 
@@ -228,7 +238,10 @@ export default function SetupAiModelTab() {
       <section>
         <h3 className="mb-2 text-sm font-semibold text-ink-900">Engines</h3>
         <div className="space-y-2">
-          <ModelRow name="mlx-gen" desc="Image generation engine (z-image · flux · qwen)">
+          <ModelRow
+            name="mlx-gen"
+            desc="Image generation engine (z-image · flux)"
+          >
             <StatusBadge
               value={store.mlxgenInstalled}
               okText="Installed"
@@ -259,6 +272,22 @@ export default function SetupAiModelTab() {
               {store.downloading === "mlx-vlm" ? "Installing…" : "Install"}
             </button>
           </ModelRow>
+
+          <ModelRow name="huggingface-cli" desc="HF CLI for downloading models">
+            <StatusBadge
+              value={store.hfInstalled}
+              okText="Installed"
+              missingText="Not installed"
+            />
+            <button
+              onClick={() => store.installTool("hf-cli")}
+              disabled={busy}
+              className="flex items-center gap-1.5 whitespace-nowrap rounded-xl border border-tiffany-500 px-3 py-1.5 text-xs font-medium text-tiffany-700 transition-colors hover:bg-tiffany-50 disabled:opacity-50"
+            >
+              {store.downloading === "hf-cli" ? SpinnerIcon : InstallIcon}
+              {store.downloading === "hf-cli" ? "Installing…" : "Install"}
+            </button>
+          </ModelRow>
         </div>
       </section>
 
@@ -266,27 +295,17 @@ export default function SetupAiModelTab() {
       <section>
         <h3 className="mb-2 text-sm font-semibold text-ink-900">Models</h3>
         <div className="space-y-2">
-          <ModelRow
-            name="mlx-community/gemma-4-e2b-it-4bit"
-            desc="Story planning & dialogue (LLM)"
-          >
-            <StatusBadge
-              value={store.mlxVlmInstalled}
-              okText="Ready"
-              missingText="Not set up"
-            />
-            <span className="text-xs italic text-ink-400">
-              Downloads on first server start
-            </span>
-          </ModelRow>
-
           {DOWNLOAD_MODELS.map((m) => {
             const downloaded =
               m.id === "z-image"
                 ? store.zImageDownloaded
                 : m.id === "flux"
                   ? store.fluxDownloaded
-                  : store.qwenDownloaded;
+                  : m.id === "ltx"
+                    ? store.ltxDownloaded
+                    : m.id === "gemma"
+                      ? store.gemmaDownloaded
+                      : store.ttsDownloaded;
             return (
               <ModelRow key={m.id} name={m.name} desc={m.desc}>
                 <StatusBadge value={downloaded} />
@@ -301,24 +320,6 @@ export default function SetupAiModelTab() {
               </ModelRow>
             );
           })}
-
-          <ModelRow
-            name="dgrauet/ltx-2.3-mlx-q8"
-            desc="Video generation"
-          >
-            <span className="text-xs italic text-ink-400">
-              Downloads on first render
-            </span>
-          </ModelRow>
-
-          <ModelRow
-            name="Qwen/Qwen3-TTS-12Hz-1.7B-Base"
-            desc="Voice-over & speech"
-          >
-            <span className="text-xs italic text-ink-400">
-              Downloads on first use
-            </span>
-          </ModelRow>
         </div>
       </section>
 

package/frontend/src/movie-app/components/EditorTabs/TaskQueuePanel.tsx

@@ -126,9 +126,11 @@ function StatusBadge({ status }: { status: QueueTaskStatus }) {
 
 function TaskRow({
   task,
+  showProject = false,
   onCancel,
 }: {
   task: QueueTask;
+  showProject?: boolean;
   onCancel: () => void;
 }) {
   const active = task.status === "pending" || task.status === "running";
@@ -142,6 +144,11 @@ function TaskRow({
     <li className="flex flex-col gap-1.5 px-3 py-2 rounded-xl border border-ink-200 bg-white">
       <div className="flex items-center gap-2">
         <StatusBadge status={task.status} />
+        {showProject && task.projectId && (
+          <span className="px-1.5 py-0.5 rounded bg-ink-100 text-ink-500 text-[10px] font-mono whitespace-nowrap">
+            {task.projectId}
+          </span>
+        )}
         <span className="flex-1 text-sm font-medium text-ink-800 truncate">
           {task.label}
         </span>
@@ -179,19 +186,25 @@ function TaskRow({
 
 export default function TaskQueuePanel({ projectId }: Props) {
   const tasks = useQueueStore((s) => s.tasks);
+  const allTasks = useQueueStore((s) => s.allTasks);
+  const showAll = useQueueStore((s) => s.showAll);
   const paused = useQueueStore((s) => s.paused);
   const cancel = useQueueStore((s) => s.cancel);
   const pause = useQueueStore((s) => s.pause);
   const resume = useQueueStore((s) => s.resume);
   const clearFinished = useQueueStore((s) => s.clearFinished);
+  const setShowAll = useQueueStore((s) => s.setShowAll);
+
+  const displayTasks = showAll ? allTasks : tasks;
 
-  if (tasks.length === 0 && !paused) return null;
+  if (!showAll && tasks.length === 0 && !paused) return null;
 
-  const hasActive = tasks.some(
+  const hasActive = displayTasks.some(
     (t) => t.status === "pending" || t.status === "running",
   );
-  const hasFinished = tasks.some(
-    (t) => t.status !== "pending" && t.status !== "running" && t.status !== "paused",
+  const hasFinished = displayTasks.some(
+    (t) =>
+      t.status !== "pending" && t.status !== "running" && t.status !== "paused",
   );
 
   return (
@@ -199,9 +212,22 @@ export default function TaskQueuePanel({ projectId }: Props) {
       <div className="flex items-center gap-2">
         <span className="text-tiffany-600">{QueueIcon}</span>
         <h3 className="text-sm font-semibold text-ink-900">Generation Queue</h3>
-        <span className="text-xs text-ink-500">{tasks.length}</span>
+        <span className="text-xs text-ink-500">{displayTasks.length}</span>
+
+        <button
+          onClick={() => setShowAll(!showAll)}
+          title={showAll ? "Show only this project" : "Show all projects"}
+          className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-xl transition-colors ${
+            showAll
+              ? "bg-tiffany-500 text-ink-950 hover:bg-tiffany-600"
+              : "border border-ink-200 text-ink-600 hover:border-ink-300 hover:text-ink-900"
+          }`}
+        >
+          {showAll ? "All projects" : "This project"}
+        </button>
+
         <div className="ml-auto flex items-center gap-2">
-          {paused ? (
+          {!showAll && paused ? (
             <button
               onClick={() => resume(projectId)}
               className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-xl bg-tiffany-500 hover:bg-tiffany-600 text-ink-950 transition-colors"
@@ -210,6 +236,7 @@ export default function TaskQueuePanel({ projectId }: Props) {
               Resume
             </button>
           ) : (
+            !showAll &&
             hasActive && (
               <button
                 onClick={() => pause(projectId)}
@@ -220,7 +247,7 @@ export default function TaskQueuePanel({ projectId }: Props) {
               </button>
             )
           )}
-          {hasFinished && (
+          {!showAll && hasFinished && (
             <button
               onClick={() => clearFinished(projectId)}
               className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-xl border border-ink-200 text-ink-600 hover:border-ink-300 hover:text-ink-900 transition-colors"
@@ -233,11 +260,12 @@ export default function TaskQueuePanel({ projectId }: Props) {
       </div>
 
       <ul className="flex flex-col gap-1.5">
-        {tasks.map((task) => (
+        {displayTasks.map((task) => (
           <TaskRow
             key={task.id}
             task={task}
-            onCancel={() => cancel(projectId, task.id)}
+            showProject={showAll}
+            onCancel={() => cancel(task.projectId ?? projectId, task.id)}
           />
         ))}
       </ul>

package/frontend/src/movie-app/components/ProjectEditorPage.tsx

@@ -8,7 +8,6 @@ import MovieStudioTab from "./EditorTabs/MovieStudioTab";
 import GenerateVideoTab from "./EditorTabs/GenerateVideoTab";
 import AgentTab from "./EditorTabs/AgentTab";
 import StoryWriterTab from "./EditorTabs/StoryWriterTab";
-import CharactersTab from "./EditorTabs/CharactersTab";
 import ExtractImageTab from "./EditorTabs/ExtractImageTab";
 import SceneVisualTab from "./EditorTabs/SceneVisualTab";
 import TextToImageTab from "./EditorTabs/TextToImageTab";
@@ -173,22 +172,6 @@ export default function ProjectEditorPage() {
     </svg>
   );
 
-  const CharacterIcon = (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-      <circle cx="12" cy="7" r="4" />
-    </svg>
-  );
-
   const ExtractIcon = (
     <svg
       width="18"
@@ -471,17 +454,6 @@ export default function ProjectEditorPage() {
               {StoryWriterIcon}
               Story Writer
             </button>
-            <button
-              onClick={() => store.setActiveTab("characters")}
-              className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "characters"
-                  ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
-                  : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
-              }`}
-            >
-              {CharacterIcon}
-              Characters
-            </button>
             <button
               onClick={() => store.setActiveTab("extract")}
               className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
@@ -597,11 +569,6 @@ export default function ProjectEditorPage() {
             <StoryWriterTab projectId={id!} />
           )}
 
-          {/* ========== CHARACTERS PANEL ========== */}
-          {store.activeTab === "characters" && (
-            <CharactersTab projectId={id!} />
-          )}
-
           {/* ========== EXTRACT IMAGE PANEL ========== */}
           {store.activeTab === "extract" && <ExtractImageTab projectId={id!} />}
 

package/frontend/src/movie-app/components/ProjectManager.tsx

@@ -168,7 +168,7 @@ export default function ProjectManager() {
       <header className="flex flex-col gap-7 md:flex-row md:items-end md:justify-between">
         <div className="max-w-xl">
           <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-tiffany-600">
-            Lambobo Studio
+            EffectNode Media
           </p>
           <h1 className="mt-3 font-display text-4xl font-light leading-[1.06] text-ink-900 md:text-5xl">
             Make the movies{" "}

package/frontend/src/movie-app/index.css

@@ -1,18 +1,20 @@
 @import "tailwindcss";
 
 /* ==========================================================================
-   Lambobo Studio — design tokens
+   EffectNode Media — design tokens
    A dreamy, tiffany-blue film studio. Gradients read like light through
    shallow water: tiffany teal → aqua → periwinkle → blush.
    ========================================================================== */
 
 @theme {
   /* ---- Type ---- */
-  --font-sans: "Avenir Next", Avenir, "Helvetica Neue", -apple-system,
-    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-display: "Cormorant", "Iowan Old Style", "Baskerville", "Georgia",
-    serif;
-  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
+  --font-sans:
+    "Avenir Next", Avenir, "Helvetica Neue", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, sans-serif;
+  --font-display:
+    "Cormorant", "Iowan Old Style", "Baskerville", "Georgia", serif;
+  --font-mono:
+    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
     "Liberation Mono", monospace;
 
   /* ---- Tiffany (the brand) ---- */
@@ -48,13 +50,14 @@
   --color-dream-mint: #c8f1e6;
 
   /* ---- Shadows ---- */
-  --shadow-glow: 0 8px 30px -6px rgba(10, 186, 181, 0.55),
+  --shadow-glow:
+    0 8px 30px -6px rgba(10, 186, 181, 0.55),
     0 2px 10px -2px rgba(10, 186, 181, 0.4);
   --shadow-glow-sm: 0 0 14px -2px rgba(10, 186, 181, 0.45);
-  --shadow-card: 0 1px 2px rgba(13, 25, 28, 0.04),
-    0 10px 30px -12px rgba(13, 25, 28, 0.16);
-  --shadow-card-hover: 0 2px 4px rgba(13, 25, 28, 0.05),
-    0 18px 44px -14px rgba(10, 186, 181, 0.35);
+  --shadow-card:
+    0 1px 2px rgba(13, 25, 28, 0.04), 0 10px 30px -12px rgba(13, 25, 28, 0.16);
+  --shadow-card-hover:
+    0 2px 4px rgba(13, 25, 28, 0.05), 0 18px 44px -14px rgba(10, 186, 181, 0.35);
   --shadow-modal: 0 24px 80px -16px rgba(13, 25, 28, 0.35);
 }
 
@@ -65,16 +68,28 @@
 body {
   margin: 0;
   background-color: #f3f7f7;
-  background-image: radial-gradient(
+  background-image:
+    radial-gradient(
       120% 90% at 85% -10%,
       rgba(183, 225, 251, 0.5),
       transparent 60%
     ),
-    radial-gradient(100% 80% at 0% 0%, rgba(255, 214, 234, 0.4), transparent 55%);
+    radial-gradient(
+      100% 80% at 0% 0%,
+      rgba(255, 214, 234, 0.4),
+      transparent 55%
+    );
   background-attachment: fixed;
   color: #283a40;
-  font-family: "Avenir Next", Avenir, "Helvetica Neue", -apple-system,
-    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family:
+    "Avenir Next",
+    Avenir,
+    "Helvetica Neue",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -82,7 +97,8 @@ body {
 code,
 pre,
 .font-mono {
-  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
+  font-family:
+    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
     "Liberation Mono", monospace;
 }
 
@@ -126,7 +142,8 @@ pre,
   z-index: 0;
   overflow: hidden;
   pointer-events: none;
-  background: radial-gradient(
+  background:
+    radial-gradient(
       120% 90% at 85% -10%,
       rgba(183, 225, 251, 0.55),
       transparent 60%
@@ -251,7 +268,12 @@ pre,
 }
 
 .thumb {
-  background-image: linear-gradient(135deg, #b0e8e3 0%, #81d8d0 50%, #c3b4f4 100%);
+  background-image: linear-gradient(
+    135deg,
+    #b0e8e3 0%,
+    #81d8d0 50%,
+    #c3b4f4 100%
+  );
 }
 
 .btn-primary {
@@ -263,12 +285,16 @@ pre,
   );
   color: #ffffff;
   box-shadow: var(--shadow-glow);
-  transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+  transition:
+    filter 150ms ease,
+    box-shadow 150ms ease,
+    transform 150ms ease;
 }
 
 .btn-primary:hover {
   filter: brightness(1.05);
-  box-shadow: 0 10px 34px -6px rgba(10, 186, 181, 0.6),
+  box-shadow:
+    0 10px 34px -6px rgba(10, 186, 181, 0.6),
     0 4px 12px -4px rgba(10, 186, 181, 0.45);
 }
 

package/frontend/src/movie-app/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="color-scheme" content="light" />
-  <title>Lambobo Studio</title>
+  <title>EffectNode Media</title>
 </head>
 
 <body>