fix: preview for ui/blocks in docs and add added blocks in registry

components/docs/component-card.tsx

@@ -2,11 +2,12 @@
 
 import { Player, type PlayerRef } from "@remotion/player";
 import Link from "next/link";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 import { useAutoplay } from "@/app/(home)/components/use-autoplay";
 import { cn } from "@/lib/utils";
 import registry from "@/registry/__index__";
 import { previewManifest } from "@/registry/__manifest__";
+import { Backdrop } from "@/registry/remocn/backdrop";
 import type { CardItem } from "./component-card-grid";
 
 function slugFromHref(href?: string) {
@@ -26,29 +27,49 @@ function CardPreview({ item }: { item: CardItem }) {
 
   const { containerRef } = useAutoplay(playerRef);
 
-  if (!entry || !preview) {
+  // Mirror PreviewStage's Backdrop wrap so card thumbnails with a
+  // previewBackdrop (e.g. blocks) match their detail-page background.
+  // Lazy to keep cards code-split: only the visible card's scene loads.
+  const lazyComponent = useMemo(() => {
+    if (!entry) return null;
+    const fill = preview?.previewBackdrop;
+    if (!fill) return entry.load;
+    return () =>
+      entry.load().then(({ default: Inner }) => ({
+        // biome-ignore lint/suspicious/noExplicitAny: dynamically-loaded scene, props shape varies
+        default: function CardStage(props: Record<string, any>) {
+          return (
+            <Backdrop fill={fill} padding={0} radius={0} shadow="">
+              <Inner {...props} />
+            </Backdrop>
+          );
+        },
+      }));
+  }, [entry, preview]);
+
+  if (entry && preview && lazyComponent) {
     return (
-      <div className="size-full">
-        <PreviewPlaceholder />
+      <div ref={containerRef} className="size-full">
+        <Player
+          ref={playerRef}
+          lazyComponent={lazyComponent}
+          inputProps={preview.defaults}
+          durationInFrames={preview.durationInFrames}
+          fps={preview.fps}
+          compositionWidth={preview.compositionWidth}
+          compositionHeight={preview.compositionHeight}
+          style={{ width: "100%", height: "100%", backgroundColor: "#f5f5f5" }}
+          controls={false}
+          loop
+          acknowledgeRemotionLicense
+        />
       </div>
     );
   }
 
   return (
-    <div ref={containerRef} className="size-full">
-      <Player
-        ref={playerRef}
-        lazyComponent={entry.load}
-        inputProps={preview.defaults}
-        durationInFrames={preview.durationInFrames}
-        fps={preview.fps}
-        compositionWidth={preview.compositionWidth}
-        compositionHeight={preview.compositionHeight}
-        style={{ width: "100%", height: "100%", backgroundColor: "#f5f5f5" }}
-        controls={false}
-        loop
-        acknowledgeRemotionLicense
-      />
+    <div className="size-full">
+      <PreviewPlaceholder />
     </div>
   );
 }

lib/customizer-config.ts

@@ -109,7 +109,18 @@ export const SHARED_CONTROLS: InteractivitySchema = {
 };
 
 /** Components that opt out of the shared `speed` control entirely. */
-const NO_SHARED_SPEED = new Set(["backdrop", "stage"]);
+const NO_SHARED_SPEED = new Set([
+  "backdrop",
+  "stage",
+  "signup-flow",
+  "ai-prompt-flow",
+  "chat-flow",
+  "telegram-chat-flow",
+  "imessage-chat-flow",
+  "checkout-flow",
+  "onboarding-stepper-flow",
+  "settings-toggle-flow",
+]);
 
 /**
  * Components whose animation rides a shared progress driver that must reach its

registry/__index__.tsx

@@ -2803,6 +2803,94 @@ const registry: Record<string, RegistryEntry> = {
     loadConfig: () =>
       import("@/registry/remocn/reel/config").then((m) => m.reelConfig),
   },
+  "signup-flow": {
+    load: () =>
+      import("@/components/docs/examples/signup-flow-example").then((m) => ({
+        default: m.SignupFlowExampleScene,
+      })),
+    loadConfig: () =>
+      import("@/registry/remocn-ui/signup-flow/config").then(
+        (m) => m.signupFlowConfig,
+      ),
+  },
+  "ai-prompt-flow": {
+    load: () =>
+      import("@/components/docs/examples/ai-prompt-flow-example").then((m) => ({
+        default: m.AiPromptFlowExampleScene,
+      })),
+    loadConfig: () =>
+      import("@/registry/remocn-ui/ai-prompt-flow/config").then(
+        (m) => m.aiPromptFlowConfig,
+      ),
+  },
+  "chat-flow": {
+    load: () =>
+      import("@/components/docs/examples/chat-flow-example").then((m) => ({
+        default: m.ChatFlowExampleScene,
+      })),
+    loadConfig: () =>
+      import("@/registry/remocn-ui/chat-flow/config").then(
+        (m) => m.chatFlowConfig,
+      ),
+  },
+  "telegram-chat-flow": {
+    load: () =>
+      import("@/components/docs/examples/telegram-chat-flow-example").then(
+        (m) => ({
+          default: m.TelegramChatFlowExampleScene,
+        }),
+      ),
+    loadConfig: () =>
+      import("@/registry/remocn-ui/telegram-chat-flow/config").then(
+        (m) => m.telegramChatFlowConfig,
+      ),
+  },
+  "imessage-chat-flow": {
+    load: () =>
+      import("@/components/docs/examples/imessage-chat-flow-example").then(
+        (m) => ({
+          default: m.ImessageChatFlowExampleScene,
+        }),
+      ),
+    loadConfig: () =>
+      import("@/registry/remocn-ui/imessage-chat-flow/config").then(
+        (m) => m.imessageChatFlowConfig,
+      ),
+  },
+  "checkout-flow": {
+    load: () =>
+      import("@/components/docs/examples/checkout-flow-example").then((m) => ({
+        default: m.CheckoutFlowExampleScene,
+      })),
+    loadConfig: () =>
+      import("@/registry/remocn-ui/checkout-flow/config").then(
+        (m) => m.checkoutFlowConfig,
+      ),
+  },
+  "onboarding-stepper-flow": {
+    load: () =>
+      import("@/components/docs/examples/onboarding-stepper-flow-example").then(
+        (m) => ({
+          default: m.OnboardingStepperFlowExampleScene,
+        }),
+      ),
+    loadConfig: () =>
+      import("@/registry/remocn-ui/onboarding-stepper-flow/config").then(
+        (m) => m.onboardingStepperFlowConfig,
+      ),
+  },
+  "settings-toggle-flow": {
+    load: () =>
+      import("@/components/docs/examples/settings-toggle-flow-example").then(
+        (m) => ({
+          default: m.SettingsToggleFlowExampleScene,
+        }),
+      ),
+    loadConfig: () =>
+      import("@/registry/remocn-ui/settings-toggle-flow/config").then(
+        (m) => m.settingsToggleFlowConfig,
+      ),
+  },
 };
 
 const configCache = new Map<string, Promise<ResolvedComponentConfig>>();

registry/__manifest__.ts

@@ -35,6 +35,17 @@ export const previewManifest: Record<string, PreviewManifestEntry> = {
       speed: 1,
     },
   },
+  "ai-prompt-flow": {
+    durationInFrames: 230,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {},
+  },
   "alert-dialog": {
     durationInFrames: 120,
     fps: 30,
@@ -300,6 +311,17 @@ export const previewManifest: Record<string, PreviewManifestEntry> = {
       speed: 1,
     },
   },
+  "chat-flow": {
+    durationInFrames: 360,
+    fps: 30,
+    compositionWidth: 432,
+    compositionHeight: 768,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {},
+  },
   "chat-gpt": {
     durationInFrames: 150,
     fps: 30,
@@ -370,6 +392,17 @@ export const previewManifest: Record<string, PreviewManifestEntry> = {
       speed: 1,
     },
   },
+  "checkout-flow": {
+    durationInFrames: 320,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(0.97 0 0)",
+    },
+    defaults: {},
+  },
   "chromatic-wave": {
     durationInFrames: 100,
     fps: 30,
@@ -2479,6 +2512,17 @@ export const previewManifest: Record<string, PreviewManifestEntry> = {
       speed: 1,
     },
   },
+  "imessage-chat-flow": {
+    durationInFrames: 360,
+    fps: 30,
+    compositionWidth: 432,
+    compositionHeight: 768,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {},
+  },
   "infinite-bento-pan": {
     durationInFrames: 300,
     fps: 30,
@@ -2828,6 +2872,17 @@ export const previewManifest: Record<string, PreviewManifestEntry> = {
       speed: 1,
     },
   },
+  "onboarding-stepper-flow": {
+    durationInFrames: 175,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {},
+  },
   opencode: {
     durationInFrames: 150,
     fps: 30,
@@ -3248,6 +3303,8 @@ export const previewManifest: Record<string, PreviewManifestEntry> = {
       phrase: "gone before you look",
       fontSize: 68,
       fontWeight: "400",
+      color: "#ffffff",
+      backgroundColor: "#000000",
       verticalStretch: 7,
       chromaticSpread: 1,
       restDuration: 12,
@@ -3342,6 +3399,17 @@ export const previewManifest: Record<string, PreviewManifestEntry> = {
       speed: 1,
     },
   },
+  "settings-toggle-flow": {
+    durationInFrames: 320,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(0.97 0 0)",
+    },
+    defaults: {},
+  },
   "shader-caustics": {
     durationInFrames: 150,
     fps: 30,
@@ -3768,6 +3836,17 @@ export const previewManifest: Record<string, PreviewManifestEntry> = {
       speed: 1,
     },
   },
+  "signup-flow": {
+    durationInFrames: 380,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(0.97 0 0)",
+    },
+    defaults: {},
+  },
   "simulated-cursor": {
     durationInFrames: 150,
     fps: 30,
@@ -4105,6 +4184,17 @@ export const previewManifest: Record<string, PreviewManifestEntry> = {
       speed: 1,
     },
   },
+  "telegram-chat-flow": {
+    durationInFrames: 360,
+    fps: 30,
+    compositionWidth: 432,
+    compositionHeight: 768,
+    previewBackdrop: {
+      type: "gradient",
+      value: "linear-gradient(180deg, #cfe0ec 0%, #a7c6e0 100%)",
+    },
+    defaults: {},
+  },
   "terminal-cursor-zoom": {
     durationInFrames: 90,
     fps: 30,

registry/remocn-ui/ai-prompt-flow/config.ts

@@ -0,0 +1,12 @@
+import { type ComponentConfig, FPS, H, W } from "@/lib/customizer-config";
+
+export const aiPromptFlowConfig: ComponentConfig = {
+  componentName: "AiPromptFlow",
+  importPath: "@/components/remocn/ai-prompt-flow",
+  controls: {},
+  durationInFrames: 230,
+  fps: FPS,
+  compositionWidth: W,
+  compositionHeight: H,
+  previewBackdrop: { type: "color", value: "oklch(1 0 0)" },
+};

registry/remocn-ui/chat-flow/config.ts

@@ -0,0 +1,12 @@
+import { type ComponentConfig, FPS } from "@/lib/customizer-config";
+
+export const chatFlowConfig: ComponentConfig = {
+  componentName: "ChatFlow",
+  importPath: "@/components/remocn/chat-flow",
+  controls: {},
+  durationInFrames: 360,
+  fps: FPS,
+  compositionWidth: 432,
+  compositionHeight: 768,
+  previewBackdrop: { type: "color", value: "oklch(1 0 0)" },
+};

registry/remocn-ui/checkout-flow/config.ts

@@ -0,0 +1,12 @@
+import { type ComponentConfig, FPS, H, W } from "@/lib/customizer-config";
+
+export const checkoutFlowConfig: ComponentConfig = {
+  componentName: "CheckoutFlow",
+  importPath: "@/components/remocn/checkout-flow",
+  controls: {},
+  durationInFrames: 320,
+  fps: FPS,
+  compositionWidth: W,
+  compositionHeight: H,
+  previewBackdrop: { type: "color", value: "oklch(0.97 0 0)" },
+};