diff --git a/components/changelog/changelog-preview.tsx b/components/changelog/changelog-preview.tsx
index da0f98d6..169b5ba3 100644
--- a/components/changelog/changelog-preview.tsx
+++ b/components/changelog/changelog-preview.tsx
@@ -1,14 +1,14 @@
 "use client";
 
-import { Suspense, useMemo } from "react";
-import { type ComponentConfig, getDefaults } from "@/lib/customizer-config";
 import { PreviewStage } from "@/lib/ui-preview-internals";
 import registry from "@/registry/__index__";
+import { previewManifest } from "@/registry/__manifest__";
 
 export function ChangelogPreview({ name }: { name: string }) {
   const entry = registry[name];
+  const preview = previewManifest[name];
 
-  if (!entry) {
+  if (!entry || !preview) {
     return (
       <div className="not-prose mb-6 rounded-lg border border-fd-border p-4 text-sm text-fd-muted-foreground">
         Unknown component: <code>{name}</code>
@@ -16,43 +16,17 @@ export function ChangelogPreview({ name }: { name: string }) {
     );
   }
 
-  return (
-    <Suspense
-      fallback={
-        <div className="not-prose mb-6 aspect-[1.9/1] w-full animate-pulse rounded-2xl bg-muted" />
-      }
-    >
-      <Preview name={name} config={entry.config} load={entry.load} />
-    </Suspense>
-  );
-}
-
-function Preview({
-  name,
-  config,
-  load,
-}: {
-  name: string;
-  config: ComponentConfig;
-  // biome-ignore lint/suspicious/noExplicitAny: dynamically-loaded Remotion composition, props shape varies per component
-  load: () => Promise<{ default: React.ComponentType<any> }>;
-}) {
-  const inputProps = useMemo(
-    () => getDefaults(config.controls),
-    [config.controls],
-  );
-
   return (
     <div className="not-prose mb-6 w-full">
       <PreviewStage
         name={name}
-        load={load}
-        inputProps={inputProps}
-        durationInFrames={config.durationInFrames}
-        fps={config.fps}
-        compositionWidth={config.compositionWidth}
-        compositionHeight={config.compositionHeight}
-        previewBackdrop={config.previewBackdrop}
+        load={entry.load}
+        inputProps={preview.defaults}
+        durationInFrames={preview.durationInFrames}
+        fps={preview.fps}
+        compositionWidth={preview.compositionWidth}
+        compositionHeight={preview.compositionHeight}
+        previewBackdrop={preview.previewBackdrop}
       />
     </div>
   );
diff --git a/components/docs/component-card.tsx b/components/docs/component-card.tsx
index 2b192b3e..88803667 100644
--- a/components/docs/component-card.tsx
+++ b/components/docs/component-card.tsx
@@ -4,9 +4,9 @@ import { Player, type PlayerRef } from "@remotion/player";
 import Link from "next/link";
 import { useRef } from "react";
 import { useAutoplay } from "@/app/(home)/components/use-autoplay";
-import { getDefaults } from "@/lib/customizer-config";
 import { cn } from "@/lib/utils";
 import registry from "@/registry/__index__";
+import { previewManifest } from "@/registry/__manifest__";
 import type { CardItem } from "./component-card-grid";
 
 function slugFromHref(href?: string) {
@@ -21,11 +21,12 @@ function PreviewPlaceholder() {
 function CardPreview({ item }: { item: CardItem }) {
   const slug = slugFromHref(item.href);
   const entry = slug ? registry[slug] : undefined;
+  const preview = slug ? previewManifest[slug] : undefined;
   const playerRef = useRef<PlayerRef>(null);
 
   useAutoplay(playerRef);
 
-  if (!entry) {
+  if (!entry || !preview) {
     return (
       <div className="size-full">
         <PreviewPlaceholder />
@@ -33,19 +34,16 @@ function CardPreview({ item }: { item: CardItem }) {
     );
   }
 
-  const { load, config } = entry;
-  const inputProps = getDefaults(config.controls);
-
   return (
     <div className="size-full">
       <Player
         ref={playerRef}
-        lazyComponent={load}
-        inputProps={inputProps}
-        durationInFrames={config.durationInFrames}
-        fps={config.fps}
-        compositionWidth={config.compositionWidth}
-        compositionHeight={config.compositionHeight}
+        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
diff --git a/components/docs/component-preview.tsx b/components/docs/component-preview.tsx
index b6f30c8d..2542d167 100644
--- a/components/docs/component-preview.tsx
+++ b/components/docs/component-preview.tsx
@@ -2,14 +2,14 @@
 
 import { CheckIcon, LinkIcon, RotateCcwIcon } from "lucide-react";
 import { useQueryStates } from "nuqs";
-import { Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, use, useEffect, useMemo, useRef, useState } from "react";
 import { CodeBlock } from "@/components/docs/code-block";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useTrackEvent } from "@/lib/analytics";
 import { type ComponentConfig, getDefaults } from "@/lib/customizer-config";
 import { buildParsers, PreviewStage } from "@/lib/ui-preview-internals";
-import registry from "@/registry/__index__";
+import registry, { loadComponentConfig } from "@/registry/__index__";
 import { ComponentCustomizer } from "./component-customizer";
 
 export function ComponentPreview({ name }: { name: string }) {
@@ -29,21 +29,22 @@ export function ComponentPreview({ name }: { name: string }) {
         <div className="not-prose mb-6 aspect-[1.9/1] w-full animate-pulse rounded-2xl bg-muted" />
       }
     >
-      <Preview name={name} config={entry.config} load={entry.load} />
+      <Preview name={name} load={entry.load} />
     </Suspense>
   );
 }
 
 function Preview({
   name,
-  config,
   load,
 }: {
   name: string;
-  config: ComponentConfig;
   // biome-ignore lint/suspicious/noExplicitAny: dynamically-loaded Remotion composition, props shape varies per component
   load: () => Promise<{ default: React.ComponentType<any> }>;
 }) {
+  // Suspends until this component's config chunk resolves, then returns
+  // synchronously from the cached promise. No other config is fetched.
+  const config = use(loadComponentConfig(name));
   const trackEvent = useTrackEvent();
   const { parsers, urlKeys } = useMemo(
     () => buildParsers(name, config.controls),
diff --git a/components/docs/icons-gallery.tsx b/components/docs/icons-gallery.tsx
index 72f8a519..75a60511 100644
--- a/components/docs/icons-gallery.tsx
+++ b/components/docs/icons-gallery.tsx
@@ -8,6 +8,10 @@ import { AbsoluteFill } from "remotion";
 import { usePrefersReducedMotion } from "@/lib/use-prefers-reduced-motion";
 import { cn } from "@/lib/utils";
 import registry, { type RegistryEntry } from "@/registry/__index__";
+import {
+  type PreviewManifestEntry,
+  previewManifest,
+} from "@/registry/__manifest__";
 import { ActivityIconStatic } from "@/registry/remocn-icons/icon-activity";
 import { AlertTriangleIconStatic } from "@/registry/remocn-icons/icon-alert-triangle";
 import { ArrowDownIconStatic } from "@/registry/remocn-icons/icon-arrow-down";
@@ -838,8 +842,9 @@ function IconTile({
   const reducedMotion = usePrefersReducedMotion();
   const [copied, setCopied] = useState(false);
   const entry = registry[icon.name];
+  const preview = previewManifest[icon.name];
   const command = `npx shadcn@latest add @remocn/${icon.name}`;
-  const playing = active && !reducedMotion && Boolean(entry);
+  const playing = active && !reducedMotion && Boolean(entry && preview);
   const Static = icon.Static;
 
   const handleCopy = () => {
@@ -867,8 +872,8 @@ function IconTile({
         className="flex items-center justify-center"
         style={{ width: MEDIA_SIZE, height: MEDIA_SIZE }}
       >
-        {playing && entry ? (
-          <IconPlayer entry={entry} />
+        {playing && entry && preview ? (
+          <IconPlayer load={entry.load} preview={preview} />
         ) : (
           <Static size={GLYPH_SIZE} strokeWidth={2} />
         )}
@@ -885,9 +890,14 @@ function IconTile({
   );
 }
 
-function IconPlayer({ entry }: { entry: RegistryEntry }) {
+function IconPlayer({
+  load,
+  preview,
+}: {
+  load: RegistryEntry["load"];
+  preview: PreviewManifestEntry;
+}) {
   const playerRef = useRef<PlayerRef>(null);
-  const { config, load } = entry;
 
   const centeredComponent = useMemo(
     () => () =>
@@ -931,8 +941,8 @@ function IconPlayer({ entry }: { entry: RegistryEntry }) {
     <Player
       ref={playerRef}
       lazyComponent={centeredComponent}
-      durationInFrames={config.durationInFrames}
-      fps={config.fps}
+      durationInFrames={preview.durationInFrames}
+      fps={preview.fps}
       compositionWidth={COMPOSITION_SIZE}
       compositionHeight={COMPOSITION_SIZE}
       style={{ width: MEDIA_SIZE, height: MEDIA_SIZE }}
diff --git a/components/docs/ui-component-preview.tsx b/components/docs/ui-component-preview.tsx
index 972a2349..4b4f6445 100644
--- a/components/docs/ui-component-preview.tsx
+++ b/components/docs/ui-component-preview.tsx
@@ -9,7 +9,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useTrackEvent } from "@/lib/analytics";
 import { type ControlConfig, getDefaults } from "@/lib/customizer-config";
 import { buildParsers, PreviewStage } from "@/lib/ui-preview-internals";
-import registry from "@/registry/__index__";
+import registry, { loadComponentConfig } from "@/registry/__index__";
 import { ComponentCustomizer } from "./component-customizer";
 import {
   loadUiScene,
@@ -44,7 +44,7 @@ export function UiComponentPreview({ name }: { name: string }) {
         <div className="not-prose mb-6 aspect-[1.9/1] w-full animate-pulse rounded-2xl bg-muted" />
       }
     >
-      <UiPreview name={name} timing={timing} controls={entry.config.controls} />
+      <UiPreview name={name} timing={timing} />
     </Suspense>
   );
 }
@@ -52,16 +52,15 @@ export function UiComponentPreview({ name }: { name: string }) {
 function UiPreview({
   name,
   timing,
-  controls,
 }: {
   name: string;
   timing: UiPreviewTiming;
-  controls: ControlConfig;
 }) {
   // Suspends on first render until this component's scene chunk resolves, then
   // returns synchronously from the cached promise. Gives us the scene component,
   // its honored-control list, and its code template — no other scene is fetched.
   const scene = use(loadUiScene(name));
+  const controls: ControlConfig = use(loadComponentConfig(name)).controls;
   const honored = scene.controls;
   const trackEvent = useTrackEvent();
 
diff --git a/lib/customizer-config.ts b/lib/customizer-config.ts
index cb80052e..40bbfb35 100644
--- a/lib/customizer-config.ts
+++ b/lib/customizer-config.ts
@@ -56,8 +56,8 @@ export const FONT_WEIGHT_OPTIONS = ["400", "500", "600", "700"];
 
 /**
  * Controls present on every animation. Merged into each component's controls
- * inside the registry index so every animation in the customizer exposes the
- * same baseline knobs.
+ * by `resolveControls` so every animation in the customizer exposes the same
+ * baseline knobs.
  */
 export const SHARED_CONTROLS: ControlConfig = {
   speed: {
@@ -70,6 +70,59 @@ export const SHARED_CONTROLS: ControlConfig = {
   },
 };
 
+/** Components that opt out of the shared `speed` control entirely. */
+const NO_SHARED_SPEED = new Set(["backdrop"]);
+
+/**
+ * Components whose animation rides a shared progress driver that must reach its
+ * final frame — a count-up landing on the last frame, a lockup revealed at a
+ * fixed point. A speed < 1 stalls the driver before the payoff, so these cap
+ * `speed` at a minimum of 1 instead of the shared 0.25.
+ */
+const SPEED_MIN_ONE = new Set([
+  "chat-gpt",
+  "claude-chat",
+  "claude-code",
+  "github-sponsors",
+  "github-stars",
+  "number-wheel",
+  "opencode",
+  "rolling-number",
+  "v0",
+  "x-follow-card",
+  "x-followers-overview",
+]);
+
+const SPEED_MIN_ONE_CONTROL: ControlType = {
+  type: "number",
+  default: 1,
+  min: 1,
+  max: 4,
+  step: 0.25,
+  label: "Speed",
+};
+
+export function resolveControls(
+  slug: string,
+  controls: ControlConfig,
+): ControlConfig {
+  const out: ControlConfig = { ...controls, ...SHARED_CONTROLS };
+  if (NO_SHARED_SPEED.has(slug)) {
+    delete out.speed;
+    return out;
+  }
+  // Reassigning the existing key keeps `speed` in its merged position.
+  if (SPEED_MIN_ONE.has(slug)) out.speed = SPEED_MIN_ONE_CONTROL;
+  return out;
+}
+
+export function resolveConfig(
+  slug: string,
+  config: ComponentConfig,
+): ComponentConfig {
+  return { ...config, controls: resolveControls(slug, config.controls) };
+}
+
 export function getDefaults(controls: ControlConfig): Record<string, unknown> {
   const out: Record<string, unknown> = {};
   for (const [key, ctrl] of Object.entries(controls)) {
diff --git a/package.json b/package.json
index 2b5170da..12104102 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "format": "biome format --write",
     "registry:build": "shadcn build --output registry-artifacts && biome format --write registry-artifacts",
     "registry:check": "shadcn build --output registry-artifacts && biome format --write registry-artifacts && git diff --quiet -- registry-artifacts || (echo 'registry-artifacts is out of sync with registry/ sources. Run: bun run registry:build and commit the result.' && exit 1)",
+    "manifest:build": "bun scripts/build-preview-manifest.mts && biome format --write registry/__manifest__.ts",
+    "manifest:check": "bun run manifest:build && git diff --quiet -- registry/__manifest__.ts || (echo 'registry/__manifest__.ts is out of sync with registry config sources. Run: bun run manifest:build and commit the result.' && exit 1)",
     "remotion:browser": "bun scripts/ensure-browser.mts",
     "bundle:remotion": "bun scripts/bundle-remotion.mts",
     "render:demos": "bun scripts/render-demos.mts",
diff --git a/registry/__index__.tsx b/registry/__index__.tsx
index 93e658fd..3f64690e 100644
--- a/registry/__index__.tsx
+++ b/registry/__index__.tsx
@@ -1,273 +1,10 @@
 import type React from "react";
-import { type ComponentConfig, SHARED_CONTROLS } from "@/lib/customizer-config";
-
-import { animatedBarChartConfig } from "@/registry/remocn/animated-bar-chart/config";
-import { animatedLineChartConfig } from "@/registry/remocn/animated-line-chart/config";
-import { asciiDissolveConfig } from "@/registry/remocn/ascii-dissolve/config";
-import { asciiRenderConfig } from "@/registry/remocn/ascii-render/config";
-import { backdropConfig } from "@/registry/remocn/backdrop/config";
-import { blurOutUpConfig } from "@/registry/remocn/blur-out-up/config";
-import { bottomUpLettersConfig } from "@/registry/remocn/bottom-up-letters/config";
-import { cameraLensConfig } from "@/registry/remocn/camera-lens/config";
-import { caretWipeConfig } from "@/registry/remocn/caret-wipe/config";
-import { chatGptConfig } from "@/registry/remocn/chat-gpt/config";
-import { chatToPreviewLayoutConfig } from "@/registry/remocn/chat-to-preview-layout/config";
-import { checkListConfig } from "@/registry/remocn/check-list/config";
-import { claudeChatConfig } from "@/registry/remocn/claude-chat/config";
-import { claudeCodeConfig } from "@/registry/remocn/claude-code/config";
-import { confettiConfig } from "@/registry/remocn/confetti/config";
-import { crtScreenConfig } from "@/registry/remocn/crt-screen/config";
-import { crumpleTossConfig } from "@/registry/remocn/crumple-toss/config";
-import { dataFlowPipesConfig } from "@/registry/remocn/data-flow-pipes/config";
-import { displacementConfig } from "@/registry/remocn/displacement/config";
-import { ditherDissolveConfig } from "@/registry/remocn/dither-dissolve/config";
-import { driftConfig } from "@/registry/remocn/drift/config";
-import { ecosystemConstellationConfig } from "@/registry/remocn/ecosystem-constellation/config";
-import { emberBurnConfig } from "@/registry/remocn/ember-burn/config";
-import { fadeThroughConfig } from "@/registry/remocn/fade-through/config";
-import { focusBlurResolveConfig } from "@/registry/remocn/focus-blur-resolve/config";
-import { focusPullConfig } from "@/registry/remocn/focus-pull/config";
-import { githubSponsorsConfig } from "@/registry/remocn/github-sponsors/config";
-import { githubStarsConfig } from "@/registry/remocn/github-stars/config";
-import { glassCodeBlockConfig } from "@/registry/remocn/glass-code-block/config";
-import { glassCodeWalkConfig } from "@/registry/remocn/glass-code-walk/config";
-import { glitchCutConfig } from "@/registry/remocn/glitch-cut/config";
-import { grainDissolveConfig } from "@/registry/remocn/grain-dissolve/config";
-import { gridWaveConfig } from "@/registry/remocn/grid-wave/config";
-import { halftonePrintConfig } from "@/registry/remocn/halftone-print/config";
-import { handCountConfig } from "@/registry/remocn/hand-count/config";
-import { handwriteConfig } from "@/registry/remocn/handwrite/config";
-import { hologramConfig } from "@/registry/remocn/hologram/config";
-import { iconScatterConfig } from "@/registry/remocn/icon-scatter/config";
-import { infiniteBentoPanConfig } from "@/registry/remocn/infinite-bento-pan/config";
-import { infiniteMarqueeConfig } from "@/registry/remocn/infinite-marquee/config";
-import { inkArrowConfig } from "@/registry/remocn/ink-arrow/config";
-import { inkUnderlineConfig } from "@/registry/remocn/ink-underline/config";
-import { inlineHighlightConfig } from "@/registry/remocn/inline-highlight/config";
-import { kineticCenterBuildConfig } from "@/registry/remocn/kinetic-center-build/config";
-import { lineByLineSlideConfig } from "@/registry/remocn/line-by-line-slide/config";
-import { liveCodeCompilationConfig } from "@/registry/remocn/live-code-compilation/config";
-import { logoEnterConfig } from "@/registry/remocn/logo-enter/config";
-import { markerHighlightConfig } from "@/registry/remocn/marker-highlight/config";
-import { maskRevealUpConfig } from "@/registry/remocn/mask-reveal-up/config";
-import { matrixDecodeConfig } from "@/registry/remocn/matrix-decode/config";
-import { microScaleFadeConfig } from "@/registry/remocn/micro-scale-fade/config";
-import { numberWheelConfig } from "@/registry/remocn/number-wheel/config";
-import { opencodeConfig } from "@/registry/remocn/opencode/config";
-import { pageTurnConfig } from "@/registry/remocn/page-turn/config";
-import { paperStickerConfig } from "@/registry/remocn/paper-sticker/config";
-import { paperWobbleConfig } from "@/registry/remocn/paper-wobble/config";
-import { particleDissolveConfig } from "@/registry/remocn/particle-dissolve/config";
-import { perCharacterRiseConfig } from "@/registry/remocn/per-character-rise/config";
-import { perWordCrossfadeConfig } from "@/registry/remocn/per-word-crossfade/config";
-import { perlinDissolveConfig } from "@/registry/remocn/perlin-dissolve/config";
-import { perspectiveMarqueeConfig } from "@/registry/remocn/perspective-marquee/config";
-import { pixelateRegionConfig } from "@/registry/remocn/pixelate-region/config";
-import { polaroidConfig } from "@/registry/remocn/polaroid/config";
-import { progressStepsConfig } from "@/registry/remocn/progress-steps/config";
-import { pushThroughConfig } from "@/registry/remocn/push-through/config";
-import { reelConfig } from "@/registry/remocn/reel/config";
-import { rgbGlitchTextConfig } from "@/registry/remocn/rgb-glitch-text/config";
-import { rippleZoomConfig } from "@/registry/remocn/ripple-zoom/config";
-import { rollingNumberConfig } from "@/registry/remocn/rolling-number/config";
-import { rolodexFlipConfig } from "@/registry/remocn/rolodex-flip/config";
-import { scaleDownFadeConfig } from "@/registry/remocn/scale-down-fade/config";
-import { scribbleCircleConfig } from "@/registry/remocn/scribble-circle/config";
-import { securityCamConfig } from "@/registry/remocn/security-cam/config";
-import { shaderCausticsConfig } from "@/registry/remocn/shader-caustics/config";
-import { shaderColorPanelsConfig } from "@/registry/remocn/shader-color-panels/config";
-import { shaderDitheringConfig } from "@/registry/remocn/shader-dithering/config";
-import { shaderDotOrbitConfig } from "@/registry/remocn/shader-dot-orbit/config";
-import { shaderGemSmokeConfig } from "@/registry/remocn/shader-gem-smoke/config";
-import { shaderGodRaysConfig } from "@/registry/remocn/shader-god-rays/config";
-import { shaderGrainGradientConfig } from "@/registry/remocn/shader-grain-gradient/config";
-import { shaderLiquidMetalConfig } from "@/registry/remocn/shader-liquid-metal/config";
-import { shaderMeshGradientConfig } from "@/registry/remocn/shader-mesh-gradient/config";
-import { shaderMetaballsConfig } from "@/registry/remocn/shader-metaballs/config";
-import { shaderNeuroNoiseConfig } from "@/registry/remocn/shader-neuro-noise/config";
-import { shaderPerlinNoiseConfig } from "@/registry/remocn/shader-perlin-noise/config";
-import { shaderPulsingBorderConfig } from "@/registry/remocn/shader-pulsing-border/config";
-import { shaderSimplexNoiseConfig } from "@/registry/remocn/shader-simplex-noise/config";
-import { shaderSmokeRingConfig } from "@/registry/remocn/shader-smoke-ring/config";
-import { shaderSpiralConfig } from "@/registry/remocn/shader-spiral/config";
-import { shaderStrataConfig } from "@/registry/remocn/shader-strata/config";
-import { shaderSwirlConfig } from "@/registry/remocn/shader-swirl/config";
-import { shaderVoronoiConfig } from "@/registry/remocn/shader-voronoi/config";
-import { shaderWarpConfig } from "@/registry/remocn/shader-warp/config";
-import { shaderWaterConfig } from "@/registry/remocn/shader-water/config";
-import { shaderWeaveConfig } from "@/registry/remocn/shader-weave/config";
-import { sharedAxisYConfig } from "@/registry/remocn/shared-axis-y/config";
-import { sharedAxisZConfig } from "@/registry/remocn/shared-axis-z/config";
-import { shimmerSweepConfig } from "@/registry/remocn/shimmer-sweep/config";
-import { shortSlideDownConfig } from "@/registry/remocn/short-slide-down/config";
-import { shortSlideRightConfig } from "@/registry/remocn/short-slide-right/config";
-import { simulatedCursorConfig } from "@/registry/remocn/simulated-cursor/config";
-import { slideSwapConfig } from "@/registry/remocn/slide-swap/config";
-import { slotMachineRollConfig } from "@/registry/remocn/slot-machine-roll/config";
-import { smokeDissolveConfig } from "@/registry/remocn/smoke-dissolve/config";
-import { softBlurInConfig } from "@/registry/remocn/soft-blur-in/config";
-import { springScaleInConfig } from "@/registry/remocn/spring-scale-in/config";
-import { springSettleConfig } from "@/registry/remocn/spring-settle/config";
-import { staggeredFadeUpConfig } from "@/registry/remocn/staggered-fade-up/config";
-import { strikethroughReplaceConfig } from "@/registry/remocn/strikethrough-replace/config";
-import { sustainedGlitchConfig } from "@/registry/remocn/sustained-glitch/config";
-import { swirlDissolveConfig } from "@/registry/remocn/swirl-dissolve/config";
-import { terminalCursorZoomConfig } from "@/registry/remocn/terminal-cursor-zoom/config";
-import { terminalSimulatorConfig } from "@/registry/remocn/terminal-simulator/config";
-import { topDownLettersConfig } from "@/registry/remocn/top-down-letters/config";
-import { trackingInConfig } from "@/registry/remocn/tracking-in/config";
-import { tvPowerOffConfig } from "@/registry/remocn/tv-power-off/config";
-import { typewriterConfig } from "@/registry/remocn/typewriter/config";
-import { underwaterRippleConfig } from "@/registry/remocn/underwater-ripple/config";
-import { v0Config } from "@/registry/remocn/v0/config";
-import { valueSwapConfig } from "@/registry/remocn/value-swap/config";
-import { vhsFilterConfig } from "@/registry/remocn/vhs-filter/config";
-import { warpDissolveConfig } from "@/registry/remocn/warp-dissolve/config";
-import { waveWipeConfig } from "@/registry/remocn/wave-wipe/config";
-import { whipPanConfig } from "@/registry/remocn/whip-pan/config";
-import { xFollowCardConfig } from "@/registry/remocn/x-follow-card/config";
-import { xFollowersOverviewConfig } from "@/registry/remocn/x-followers-overview/config";
-import { zoomBlurConfig } from "@/registry/remocn/zoom-blur/config";
-import { iconActivityConfig } from "@/registry/remocn-icons/icon-activity/config";
-import { iconAlertTriangleConfig } from "@/registry/remocn-icons/icon-alert-triangle/config";
-import { iconArrowDownConfig } from "@/registry/remocn-icons/icon-arrow-down/config";
-import { iconArrowLeftConfig } from "@/registry/remocn-icons/icon-arrow-left/config";
-import { iconArrowRightConfig } from "@/registry/remocn-icons/icon-arrow-right/config";
-import { iconArrowUpConfig } from "@/registry/remocn-icons/icon-arrow-up/config";
-import { iconAtSignConfig } from "@/registry/remocn-icons/icon-at-sign/config";
-import { iconAwardConfig } from "@/registry/remocn-icons/icon-award/config";
-import { iconBarChart3Config } from "@/registry/remocn-icons/icon-bar-chart-3/config";
-import { iconBellConfig } from "@/registry/remocn-icons/icon-bell/config";
-import { iconBookmarkConfig } from "@/registry/remocn-icons/icon-bookmark/config";
-import { iconCalendarConfig } from "@/registry/remocn-icons/icon-calendar/config";
-import { iconCameraConfig } from "@/registry/remocn-icons/icon-camera/config";
-import { iconCheckConfig } from "@/registry/remocn-icons/icon-check/config";
-import { iconCheckCircleConfig } from "@/registry/remocn-icons/icon-check-circle/config";
-import { iconChevronDownConfig } from "@/registry/remocn-icons/icon-chevron-down/config";
-import { iconChevronLeftConfig } from "@/registry/remocn-icons/icon-chevron-left/config";
-import { iconChevronRightConfig } from "@/registry/remocn-icons/icon-chevron-right/config";
-import { iconChevronUpConfig } from "@/registry/remocn-icons/icon-chevron-up/config";
-import { iconClockConfig } from "@/registry/remocn-icons/icon-clock/config";
-import { iconCloudConfig } from "@/registry/remocn-icons/icon-cloud/config";
-import { iconCodeConfig } from "@/registry/remocn-icons/icon-code/config";
-import { iconCopyConfig } from "@/registry/remocn-icons/icon-copy/config";
-import { iconCreditCardConfig } from "@/registry/remocn-icons/icon-credit-card/config";
-import { iconCrownConfig } from "@/registry/remocn-icons/icon-crown/config";
-import { iconDatabaseConfig } from "@/registry/remocn-icons/icon-database/config";
-import { iconDollarSignConfig } from "@/registry/remocn-icons/icon-dollar-sign/config";
-import { iconDownloadConfig } from "@/registry/remocn-icons/icon-download/config";
-import { iconExternalLinkConfig } from "@/registry/remocn-icons/icon-external-link/config";
-import { iconEyeConfig } from "@/registry/remocn-icons/icon-eye/config";
-import { iconEyeOffConfig } from "@/registry/remocn-icons/icon-eye-off/config";
-import { iconFileTextConfig } from "@/registry/remocn-icons/icon-file-text/config";
-import { iconFilterConfig } from "@/registry/remocn-icons/icon-filter/config";
-import { iconFlameConfig } from "@/registry/remocn-icons/icon-flame/config";
-import { iconFolderConfig } from "@/registry/remocn-icons/icon-folder/config";
-import { iconGemConfig } from "@/registry/remocn-icons/icon-gem/config";
-import { iconGiftConfig } from "@/registry/remocn-icons/icon-gift/config";
-import { iconGlobeConfig } from "@/registry/remocn-icons/icon-globe/config";
-import { iconHeartConfig } from "@/registry/remocn-icons/icon-heart/config";
-import { iconHelpCircleConfig } from "@/registry/remocn-icons/icon-help-circle/config";
-import { iconHomeConfig } from "@/registry/remocn-icons/icon-home/config";
-import { iconImageConfig } from "@/registry/remocn-icons/icon-image/config";
-import { iconInboxConfig } from "@/registry/remocn-icons/icon-inbox/config";
-import { iconInfoConfig } from "@/registry/remocn-icons/icon-info/config";
-import { iconKeyConfig } from "@/registry/remocn-icons/icon-key/config";
-import { iconLayoutGridConfig } from "@/registry/remocn-icons/icon-layout-grid/config";
-import { iconLinkConfig } from "@/registry/remocn-icons/icon-link/config";
-import { iconLoaderConfig } from "@/registry/remocn-icons/icon-loader/config";
-import { iconLockConfig } from "@/registry/remocn-icons/icon-lock/config";
-import { iconLogOutConfig } from "@/registry/remocn-icons/icon-log-out/config";
-import { iconMailConfig } from "@/registry/remocn-icons/icon-mail/config";
-import { iconMaximizeConfig } from "@/registry/remocn-icons/icon-maximize/config";
-import { iconMenuConfig } from "@/registry/remocn-icons/icon-menu/config";
-import { iconMessageCircleConfig } from "@/registry/remocn-icons/icon-message-circle/config";
-import { iconMicConfig } from "@/registry/remocn-icons/icon-mic/config";
-import { iconMonitorConfig } from "@/registry/remocn-icons/icon-monitor/config";
-import { iconMoonConfig } from "@/registry/remocn-icons/icon-moon/config";
-import { iconMoreHorizontalConfig } from "@/registry/remocn-icons/icon-more-horizontal/config";
-import { iconPackageConfig } from "@/registry/remocn-icons/icon-package/config";
-import { iconPartyPopperConfig } from "@/registry/remocn-icons/icon-party-popper/config";
-import { iconPauseConfig } from "@/registry/remocn-icons/icon-pause/config";
-import { iconPencilConfig } from "@/registry/remocn-icons/icon-pencil/config";
-import { iconPhoneConfig } from "@/registry/remocn-icons/icon-phone/config";
-import { iconPlayConfig } from "@/registry/remocn-icons/icon-play/config";
-import { iconPlusConfig } from "@/registry/remocn-icons/icon-plus/config";
-import { iconPlusCircleConfig } from "@/registry/remocn-icons/icon-plus-circle/config";
-import { iconRefreshCwConfig } from "@/registry/remocn-icons/icon-refresh-cw/config";
-import { iconRocketConfig } from "@/registry/remocn-icons/icon-rocket/config";
-import { iconSaveConfig } from "@/registry/remocn-icons/icon-save/config";
-import { iconSearchConfig } from "@/registry/remocn-icons/icon-search/config";
-import { iconSendConfig } from "@/registry/remocn-icons/icon-send/config";
-import { iconSettingsConfig } from "@/registry/remocn-icons/icon-settings/config";
-import { iconShare2Config } from "@/registry/remocn-icons/icon-share-2/config";
-import { iconShieldConfig } from "@/registry/remocn-icons/icon-shield/config";
-import { iconShoppingCartConfig } from "@/registry/remocn-icons/icon-shopping-cart/config";
-import { iconSkipForwardConfig } from "@/registry/remocn-icons/icon-skip-forward/config";
-import { iconSmartphoneConfig } from "@/registry/remocn-icons/icon-smartphone/config";
-import { iconSparklesConfig } from "@/registry/remocn-icons/icon-sparkles/config";
-import { iconStarConfig } from "@/registry/remocn-icons/icon-star/config";
-import { iconSunConfig } from "@/registry/remocn-icons/icon-sun/config";
-import { iconTagConfig } from "@/registry/remocn-icons/icon-tag/config";
-import { iconTargetConfig } from "@/registry/remocn-icons/icon-target/config";
-import { iconTerminalConfig } from "@/registry/remocn-icons/icon-terminal/config";
-import { iconThumbsUpConfig } from "@/registry/remocn-icons/icon-thumbs-up/config";
-import { iconTimerConfig } from "@/registry/remocn-icons/icon-timer/config";
-import { iconTrashConfig } from "@/registry/remocn-icons/icon-trash/config";
-import { iconTrendingDownConfig } from "@/registry/remocn-icons/icon-trending-down/config";
-import { iconTrendingUpConfig } from "@/registry/remocn-icons/icon-trending-up/config";
-import { iconTrophyConfig } from "@/registry/remocn-icons/icon-trophy/config";
-import { iconUploadConfig } from "@/registry/remocn-icons/icon-upload/config";
-import { iconUserConfig } from "@/registry/remocn-icons/icon-user/config";
-import { iconUserPlusConfig } from "@/registry/remocn-icons/icon-user-plus/config";
-import { iconUsersConfig } from "@/registry/remocn-icons/icon-users/config";
-import { iconVideoConfig } from "@/registry/remocn-icons/icon-video/config";
-import { iconVolume2Config } from "@/registry/remocn-icons/icon-volume-2/config";
-import { iconVolumeXConfig } from "@/registry/remocn-icons/icon-volume-x/config";
-import { iconWalletConfig } from "@/registry/remocn-icons/icon-wallet/config";
-import { iconXConfig } from "@/registry/remocn-icons/icon-x/config";
-import { iconXCircleConfig } from "@/registry/remocn-icons/icon-x-circle/config";
-import { iconZapConfig } from "@/registry/remocn-icons/icon-zap/config";
-import { accordionConfig } from "@/registry/remocn-ui/accordion/config";
-import { alertDialogConfig } from "@/registry/remocn-ui/alert-dialog/config";
-import { blurInConfig } from "@/registry/remocn-ui/blur-in/config";
-import { buttonConfig } from "@/registry/remocn-ui/button/config";
-import { caretConfig } from "@/registry/remocn-ui/caret/config";
-import { checkboxConfig } from "@/registry/remocn-ui/checkbox/config";
-import { comboboxConfig } from "@/registry/remocn-ui/combobox/config";
-import { commandMenuConfig } from "@/registry/remocn-ui/command-menu/config";
-import { commandMenuItemConfig } from "@/registry/remocn-ui/command-menu-item/config";
-import { contextMenuConfig } from "@/registry/remocn-ui/context-menu/config";
-import { cursorConfig } from "@/registry/remocn-ui/cursor/config";
-import { dialogConfig } from "@/registry/remocn-ui/dialog/config";
-import { drawerConfig } from "@/registry/remocn-ui/drawer/config";
-import { dropdownMenuConfig } from "@/registry/remocn-ui/dropdown-menu/config";
-import { dropdownMenuItemConfig } from "@/registry/remocn-ui/dropdown-menu-item/config";
-import { inputConfig } from "@/registry/remocn-ui/input/config";
-import { messageBubbleConfig } from "@/registry/remocn-ui/message-bubble/config";
-import { popoverConfig } from "@/registry/remocn-ui/popover/config";
-import { progressConfig } from "@/registry/remocn-ui/progress/config";
-import { radioConfig } from "@/registry/remocn-ui/radio/config";
-import { resizableConfig } from "@/registry/remocn-ui/resizable/config";
-import { selectConfig } from "@/registry/remocn-ui/select/config";
-import { selectItemConfig } from "@/registry/remocn-ui/select-item/config";
-import { sheetConfig } from "@/registry/remocn-ui/sheet/config";
-import { skeletonConfig } from "@/registry/remocn-ui/skeleton/config";
-import { skeletonBlockConfig } from "@/registry/remocn-ui/skeleton-block/config";
-import { sliderConfig } from "@/registry/remocn-ui/slider/config";
-import { spinnerConfig } from "@/registry/remocn-ui/spinner/config";
-import { stepperConfig } from "@/registry/remocn-ui/stepper/config";
-import { switchConfig } from "@/registry/remocn-ui/switch/config";
-import { tabsConfig } from "@/registry/remocn-ui/tabs/config";
-import { toastConfig } from "@/registry/remocn-ui/toast/config";
-import { toggleGroupConfig } from "@/registry/remocn-ui/toggle-group/config";
-import { tooltipConfig } from "@/registry/remocn-ui/tooltip/config";
-import { typingIndicatorConfig } from "@/registry/remocn-ui/typing-indicator/config";
+import { type ComponentConfig, resolveConfig } from "@/lib/customizer-config";
 
 export interface RegistryEntry {
   // biome-ignore lint/suspicious/noExplicitAny: dynamically-loaded Remotion composition, props shape varies per component
   load: () => Promise<{ default: React.ComponentType<any> }>;
-  config: ComponentConfig;
+  loadConfig: () => Promise<ComponentConfig>;
 }
 
 const registry: Record<string, RegistryEntry> = {
@@ -276,1463 +13,2082 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn/soft-blur-in").then((m) => ({
         default: m.SoftBlurIn,
       })),
-    config: softBlurInConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/soft-blur-in/config").then(
+        (m) => m.softBlurInConfig,
+      ),
   },
   "per-character-rise": {
     load: () =>
       import("@/registry/remocn/per-character-rise").then((m) => ({
         default: m.PerCharacterRise,
       })),
-    config: perCharacterRiseConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/per-character-rise/config").then(
+        (m) => m.perCharacterRiseConfig,
+      ),
   },
   "bottom-up-letters": {
     load: () =>
       import("@/registry/remocn/bottom-up-letters").then((m) => ({
         default: m.BottomUpLetters,
       })),
-    config: bottomUpLettersConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/bottom-up-letters/config").then(
+        (m) => m.bottomUpLettersConfig,
+      ),
   },
   "top-down-letters": {
     load: () =>
       import("@/registry/remocn/top-down-letters").then((m) => ({
         default: m.TopDownLetters,
       })),
-    config: topDownLettersConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/top-down-letters/config").then(
+        (m) => m.topDownLettersConfig,
+      ),
   },
   "spring-scale-in": {
     load: () =>
       import("@/registry/remocn/spring-scale-in").then((m) => ({
         default: m.SpringScaleIn,
       })),
-    config: springScaleInConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/spring-scale-in/config").then(
+        (m) => m.springScaleInConfig,
+      ),
   },
   "micro-scale-fade": {
     load: () =>
       import("@/registry/remocn/micro-scale-fade").then((m) => ({
         default: m.MicroScaleFade,
       })),
-    config: microScaleFadeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/micro-scale-fade/config").then(
+        (m) => m.microScaleFadeConfig,
+      ),
   },
   "scale-down-fade": {
     load: () =>
       import("@/registry/remocn/scale-down-fade").then((m) => ({
         default: m.ScaleDownFade,
       })),
-    config: scaleDownFadeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/scale-down-fade/config").then(
+        (m) => m.scaleDownFadeConfig,
+      ),
   },
   "blur-out-up": {
     load: () =>
       import("@/registry/remocn/blur-out-up").then((m) => ({
         default: m.BlurOutUp,
       })),
-    config: blurOutUpConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/blur-out-up/config").then(
+        (m) => m.blurOutUpConfig,
+      ),
   },
   "focus-blur-resolve": {
     load: () =>
       import("@/registry/remocn/focus-blur-resolve").then((m) => ({
         default: m.FocusBlurResolve,
       })),
-    config: focusBlurResolveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/focus-blur-resolve/config").then(
+        (m) => m.focusBlurResolveConfig,
+      ),
   },
   "line-by-line-slide": {
     load: () =>
       import("@/registry/remocn/line-by-line-slide").then((m) => ({
         default: m.LineByLineSlide,
       })),
-    config: lineByLineSlideConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/line-by-line-slide/config").then(
+        (m) => m.lineByLineSlideConfig,
+      ),
   },
   "per-word-crossfade": {
     load: () =>
       import("@/registry/remocn/per-word-crossfade").then((m) => ({
         default: m.PerWordCrossfade,
       })),
-    config: perWordCrossfadeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/per-word-crossfade/config").then(
+        (m) => m.perWordCrossfadeConfig,
+      ),
   },
   "fade-through": {
     load: () =>
       import("@/registry/remocn/fade-through").then((m) => ({
         default: m.FadeThrough,
       })),
-    config: fadeThroughConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/fade-through/config").then(
+        (m) => m.fadeThroughConfig,
+      ),
   },
   "shared-axis-y": {
     load: () =>
       import("@/registry/remocn/shared-axis-y").then((m) => ({
         default: m.SharedAxisY,
       })),
-    config: sharedAxisYConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shared-axis-y/config").then(
+        (m) => m.sharedAxisYConfig,
+      ),
   },
   "shared-axis-z": {
     load: () =>
       import("@/registry/remocn/shared-axis-z").then((m) => ({
         default: m.SharedAxisZ,
       })),
-    config: sharedAxisZConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shared-axis-z/config").then(
+        (m) => m.sharedAxisZConfig,
+      ),
   },
   "short-slide-right": {
     load: () =>
       import("@/registry/remocn/short-slide-right").then((m) => ({
         default: m.ShortSlideRight,
       })),
-    config: shortSlideRightConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/short-slide-right/config").then(
+        (m) => m.shortSlideRightConfig,
+      ),
   },
   "kinetic-center-build": {
     load: () =>
       import("@/registry/remocn/kinetic-center-build").then((m) => ({
         default: m.KineticCenterBuild,
       })),
-    config: kineticCenterBuildConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/kinetic-center-build/config").then(
+        (m) => m.kineticCenterBuildConfig,
+      ),
   },
   "short-slide-down": {
     load: () =>
       import("@/registry/remocn/short-slide-down").then((m) => ({
         default: m.ShortSlideDown,
       })),
-    config: shortSlideDownConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/short-slide-down/config").then(
+        (m) => m.shortSlideDownConfig,
+      ),
   },
   typewriter: {
     load: () =>
       import("@/registry/remocn/typewriter").then((m) => ({
         default: m.Typewriter,
       })),
-    config: typewriterConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/typewriter/config").then(
+        (m) => m.typewriterConfig,
+      ),
   },
   "hand-count": {
     load: () =>
       import("@/registry/remocn/hand-count").then((m) => ({
         default: m.HandCount,
       })),
-    config: handCountConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/hand-count/config").then(
+        (m) => m.handCountConfig,
+      ),
   },
   handwrite: {
     load: () =>
       import("@/registry/remocn/handwrite").then((m) => ({
         default: m.Handwrite,
       })),
-    config: handwriteConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/handwrite/config").then(
+        (m) => m.handwriteConfig,
+      ),
   },
   "inline-highlight": {
     load: () =>
       import("@/registry/remocn/inline-highlight").then((m) => ({
         default: m.InlineHighlight,
       })),
-    config: inlineHighlightConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/inline-highlight/config").then(
+        (m) => m.inlineHighlightConfig,
+      ),
   },
   "strikethrough-replace": {
     load: () =>
       import("@/registry/remocn/strikethrough-replace").then((m) => ({
         default: m.StrikethroughReplace,
       })),
-    config: strikethroughReplaceConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/strikethrough-replace/config").then(
+        (m) => m.strikethroughReplaceConfig,
+      ),
   },
   "staggered-fade-up": {
     load: () =>
       import("@/registry/remocn/staggered-fade-up").then((m) => ({
         default: m.StaggeredFadeUp,
       })),
-    config: staggeredFadeUpConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/staggered-fade-up/config").then(
+        (m) => m.staggeredFadeUpConfig,
+      ),
   },
   "mask-reveal-up": {
     load: () =>
       import("@/registry/remocn/mask-reveal-up").then((m) => ({
         default: m.MaskRevealUp,
       })),
-    config: maskRevealUpConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/mask-reveal-up/config").then(
+        (m) => m.maskRevealUpConfig,
+      ),
   },
   "tracking-in": {
     load: () =>
       import("@/registry/remocn/tracking-in").then((m) => ({
         default: m.TrackingIn,
       })),
-    config: trackingInConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/tracking-in/config").then(
+        (m) => m.trackingInConfig,
+      ),
   },
   "shimmer-sweep": {
     load: () =>
       import("@/registry/remocn/shimmer-sweep").then((m) => ({
         default: m.ShimmerSweep,
       })),
-    config: shimmerSweepConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shimmer-sweep/config").then(
+        (m) => m.shimmerSweepConfig,
+      ),
   },
   "marker-highlight": {
     load: () =>
       import("@/registry/remocn/marker-highlight").then((m) => ({
         default: m.MarkerHighlight,
       })),
-    config: markerHighlightConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/marker-highlight/config").then(
+        (m) => m.markerHighlightConfig,
+      ),
   },
   "ink-underline": {
     load: () =>
       import("@/components/docs/examples/ink-underline-example").then((m) => ({
         default: m.InkUnderlineExampleScene,
       })),
-    config: inkUnderlineConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/ink-underline/config").then(
+        (m) => m.inkUnderlineConfig,
+      ),
   },
   "slot-machine-roll": {
     load: () =>
       import("@/registry/remocn/slot-machine-roll").then((m) => ({
         default: m.SlotMachineRoll,
       })),
-    config: slotMachineRollConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/slot-machine-roll/config").then(
+        (m) => m.slotMachineRollConfig,
+      ),
   },
   "matrix-decode": {
     load: () =>
       import("@/registry/remocn/matrix-decode").then((m) => ({
         default: m.MatrixDecode,
       })),
-    config: matrixDecodeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/matrix-decode/config").then(
+        (m) => m.matrixDecodeConfig,
+      ),
   },
   "rgb-glitch-text": {
     load: () =>
       import("@/registry/remocn/rgb-glitch-text").then((m) => ({
         default: m.RGBGlitchText,
       })),
-    config: rgbGlitchTextConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/rgb-glitch-text/config").then(
+        (m) => m.rgbGlitchTextConfig,
+      ),
   },
   "infinite-marquee": {
     load: () =>
       import("@/registry/remocn/infinite-marquee").then((m) => ({
         default: m.InfiniteMarquee,
       })),
-    config: infiniteMarqueeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/infinite-marquee/config").then(
+        (m) => m.infiniteMarqueeConfig,
+      ),
   },
   "perspective-marquee": {
     load: () =>
       import("@/registry/remocn/perspective-marquee").then((m) => ({
         default: m.PerspectiveMarquee,
       })),
-    config: perspectiveMarqueeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/perspective-marquee/config").then(
+        (m) => m.perspectiveMarqueeConfig,
+      ),
   },
   "glass-code-block": {
     load: () =>
       import("@/registry/remocn/glass-code-block").then((m) => ({
         default: m.GlassCodeBlock,
       })),
-    config: glassCodeBlockConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/glass-code-block/config").then(
+        (m) => m.glassCodeBlockConfig,
+      ),
   },
   "glass-code-walk": {
     load: () =>
       import("@/registry/remocn/glass-code-walk").then((m) => ({
         default: m.GlassCodeWalk,
       })),
-    config: glassCodeWalkConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/glass-code-walk/config").then(
+        (m) => m.glassCodeWalkConfig,
+      ),
   },
   "data-flow-pipes": {
     load: () =>
       import("@/registry/remocn/data-flow-pipes").then((m) => ({
         default: m.DataFlowPipes,
       })),
-    config: dataFlowPipesConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/data-flow-pipes/config").then(
+        (m) => m.dataFlowPipesConfig,
+      ),
   },
   "shader-mesh-gradient": {
     load: () =>
       import("@/registry/remocn/shader-mesh-gradient").then((m) => ({
         default: m.ShaderMeshGradient,
       })),
-    config: shaderMeshGradientConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-mesh-gradient/config").then(
+        (m) => m.shaderMeshGradientConfig,
+      ),
   },
   "shader-grain-gradient": {
     load: () =>
       import("@/registry/remocn/shader-grain-gradient").then((m) => ({
         default: m.ShaderGrainGradient,
       })),
-    config: shaderGrainGradientConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-grain-gradient/config").then(
+        (m) => m.shaderGrainGradientConfig,
+      ),
   },
   "shader-warp": {
     load: () =>
       import("@/registry/remocn/shader-warp").then((m) => ({
         default: m.ShaderWarp,
       })),
-    config: shaderWarpConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-warp/config").then(
+        (m) => m.shaderWarpConfig,
+      ),
   },
   "shader-swirl": {
     load: () =>
       import("@/registry/remocn/shader-swirl").then((m) => ({
         default: m.ShaderSwirl,
       })),
-    config: shaderSwirlConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-swirl/config").then(
+        (m) => m.shaderSwirlConfig,
+      ),
   },
   "shader-water": {
     load: () =>
       import("@/registry/remocn/shader-water").then((m) => ({
         default: m.ShaderWater,
       })),
-    config: shaderWaterConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-water/config").then(
+        (m) => m.shaderWaterConfig,
+      ),
   },
   "shader-spiral": {
     load: () =>
       import("@/registry/remocn/shader-spiral").then((m) => ({
         default: m.ShaderSpiral,
       })),
-    config: shaderSpiralConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-spiral/config").then(
+        (m) => m.shaderSpiralConfig,
+      ),
   },
   "shader-liquid-metal": {
     load: () =>
       import("@/registry/remocn/shader-liquid-metal").then((m) => ({
         default: m.ShaderLiquidMetal,
       })),
-    config: shaderLiquidMetalConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-liquid-metal/config").then(
+        (m) => m.shaderLiquidMetalConfig,
+      ),
   },
   "shader-color-panels": {
     load: () =>
       import("@/registry/remocn/shader-color-panels").then((m) => ({
         default: m.ShaderColorPanels,
       })),
-    config: shaderColorPanelsConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-color-panels/config").then(
+        (m) => m.shaderColorPanelsConfig,
+      ),
   },
   "shader-neuro-noise": {
     load: () =>
       import("@/registry/remocn/shader-neuro-noise").then((m) => ({
         default: m.ShaderNeuroNoise,
       })),
-    config: shaderNeuroNoiseConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-neuro-noise/config").then(
+        (m) => m.shaderNeuroNoiseConfig,
+      ),
   },
   "shader-perlin-noise": {
     load: () =>
       import("@/registry/remocn/shader-perlin-noise").then((m) => ({
         default: m.ShaderPerlinNoise,
       })),
-    config: shaderPerlinNoiseConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-perlin-noise/config").then(
+        (m) => m.shaderPerlinNoiseConfig,
+      ),
   },
   "shader-simplex-noise": {
     load: () =>
       import("@/registry/remocn/shader-simplex-noise").then((m) => ({
         default: m.ShaderSimplexNoise,
       })),
-    config: shaderSimplexNoiseConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-simplex-noise/config").then(
+        (m) => m.shaderSimplexNoiseConfig,
+      ),
   },
   "shader-voronoi": {
     load: () =>
       import("@/registry/remocn/shader-voronoi").then((m) => ({
         default: m.ShaderVoronoi,
       })),
-    config: shaderVoronoiConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-voronoi/config").then(
+        (m) => m.shaderVoronoiConfig,
+      ),
   },
   "shader-dot-orbit": {
     load: () =>
       import("@/registry/remocn/shader-dot-orbit").then((m) => ({
         default: m.ShaderDotOrbit,
       })),
-    config: shaderDotOrbitConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-dot-orbit/config").then(
+        (m) => m.shaderDotOrbitConfig,
+      ),
   },
   "shader-dithering": {
     load: () =>
       import("@/registry/remocn/shader-dithering").then((m) => ({
         default: m.ShaderDithering,
       })),
-    config: shaderDitheringConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-dithering/config").then(
+        (m) => m.shaderDitheringConfig,
+      ),
   },
   "shader-god-rays": {
     load: () =>
       import("@/registry/remocn/shader-god-rays").then((m) => ({
         default: m.ShaderGodRays,
       })),
-    config: shaderGodRaysConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-god-rays/config").then(
+        (m) => m.shaderGodRaysConfig,
+      ),
   },
   "shader-smoke-ring": {
     load: () =>
       import("@/registry/remocn/shader-smoke-ring").then((m) => ({
         default: m.ShaderSmokeRing,
       })),
-    config: shaderSmokeRingConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-smoke-ring/config").then(
+        (m) => m.shaderSmokeRingConfig,
+      ),
   },
   "shader-metaballs": {
     load: () =>
       import("@/registry/remocn/shader-metaballs").then((m) => ({
         default: m.ShaderMetaballs,
       })),
-    config: shaderMetaballsConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-metaballs/config").then(
+        (m) => m.shaderMetaballsConfig,
+      ),
   },
   "shader-pulsing-border": {
     load: () =>
       import("@/registry/remocn/shader-pulsing-border").then((m) => ({
         default: m.ShaderPulsingBorder,
       })),
-    config: shaderPulsingBorderConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-pulsing-border/config").then(
+        (m) => m.shaderPulsingBorderConfig,
+      ),
   },
   "simulated-cursor": {
     load: () =>
       import("@/registry/remocn/simulated-cursor").then((m) => ({
         default: m.SimulatedCursor,
       })),
-    config: simulatedCursorConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/simulated-cursor/config").then(
+        (m) => m.simulatedCursorConfig,
+      ),
   },
   "swirl-dissolve": {
     load: () =>
       import("@/components/docs/examples/swirl-dissolve-example").then((m) => ({
         default: m.SwirlDissolveExampleScene,
       })),
-    config: swirlDissolveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/swirl-dissolve/config").then(
+        (m) => m.swirlDissolveConfig,
+      ),
   },
   "dither-dissolve": {
     load: () =>
       import("@/components/docs/examples/dither-dissolve-example").then(
         (m) => ({ default: m.DitherDissolveExampleScene }),
       ),
-    config: ditherDissolveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/dither-dissolve/config").then(
+        (m) => m.ditherDissolveConfig,
+      ),
   },
   "perlin-dissolve": {
     load: () =>
       import("@/components/docs/examples/perlin-dissolve-example").then(
         (m) => ({ default: m.PerlinDissolveExampleScene }),
       ),
-    config: perlinDissolveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/perlin-dissolve/config").then(
+        (m) => m.perlinDissolveConfig,
+      ),
   },
   "smoke-dissolve": {
     load: () =>
       import("@/components/docs/examples/smoke-dissolve-example").then((m) => ({
         default: m.SmokeDissolveExampleScene,
       })),
-    config: smokeDissolveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/smoke-dissolve/config").then(
+        (m) => m.smokeDissolveConfig,
+      ),
   },
   "grain-dissolve": {
     load: () =>
       import("@/components/docs/examples/grain-dissolve-example").then((m) => ({
         default: m.GrainDissolveExampleScene,
       })),
-    config: grainDissolveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/grain-dissolve/config").then(
+        (m) => m.grainDissolveConfig,
+      ),
   },
   "icon-activity": {
     load: () =>
       import("@/registry/remocn-icons/icon-activity").then((m) => ({
         default: m.ActivityIcon,
       })),
-    config: iconActivityConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-activity/config").then(
+        (m) => m.iconActivityConfig,
+      ),
   },
   "icon-alert-triangle": {
     load: () =>
       import("@/registry/remocn-icons/icon-alert-triangle").then((m) => ({
         default: m.AlertTriangleIcon,
       })),
-    config: iconAlertTriangleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-alert-triangle/config").then(
+        (m) => m.iconAlertTriangleConfig,
+      ),
   },
   "icon-arrow-down": {
     load: () =>
       import("@/registry/remocn-icons/icon-arrow-down").then((m) => ({
         default: m.ArrowDownIcon,
       })),
-    config: iconArrowDownConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-arrow-down/config").then(
+        (m) => m.iconArrowDownConfig,
+      ),
   },
   "icon-arrow-left": {
     load: () =>
       import("@/registry/remocn-icons/icon-arrow-left").then((m) => ({
         default: m.ArrowLeftIcon,
       })),
-    config: iconArrowLeftConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-arrow-left/config").then(
+        (m) => m.iconArrowLeftConfig,
+      ),
   },
   "icon-arrow-right": {
     load: () =>
       import("@/registry/remocn-icons/icon-arrow-right").then((m) => ({
         default: m.ArrowRightIcon,
       })),
-    config: iconArrowRightConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-arrow-right/config").then(
+        (m) => m.iconArrowRightConfig,
+      ),
   },
   "icon-arrow-up": {
     load: () =>
       import("@/registry/remocn-icons/icon-arrow-up").then((m) => ({
         default: m.ArrowUpIcon,
       })),
-    config: iconArrowUpConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-arrow-up/config").then(
+        (m) => m.iconArrowUpConfig,
+      ),
   },
   "icon-at-sign": {
     load: () =>
       import("@/registry/remocn-icons/icon-at-sign").then((m) => ({
         default: m.AtSignIcon,
       })),
-    config: iconAtSignConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-at-sign/config").then(
+        (m) => m.iconAtSignConfig,
+      ),
   },
   "icon-award": {
     load: () =>
       import("@/registry/remocn-icons/icon-award").then((m) => ({
         default: m.AwardIcon,
       })),
-    config: iconAwardConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-award/config").then(
+        (m) => m.iconAwardConfig,
+      ),
   },
   "icon-bar-chart-3": {
     load: () =>
       import("@/registry/remocn-icons/icon-bar-chart-3").then((m) => ({
         default: m.BarChart3Icon,
       })),
-    config: iconBarChart3Config,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-bar-chart-3/config").then(
+        (m) => m.iconBarChart3Config,
+      ),
   },
   "icon-bell": {
     load: () =>
       import("@/registry/remocn-icons/icon-bell").then((m) => ({
         default: m.BellIcon,
       })),
-    config: iconBellConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-bell/config").then(
+        (m) => m.iconBellConfig,
+      ),
   },
   "icon-bookmark": {
     load: () =>
       import("@/registry/remocn-icons/icon-bookmark").then((m) => ({
         default: m.BookmarkIcon,
       })),
-    config: iconBookmarkConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-bookmark/config").then(
+        (m) => m.iconBookmarkConfig,
+      ),
   },
   "icon-calendar": {
     load: () =>
       import("@/registry/remocn-icons/icon-calendar").then((m) => ({
         default: m.CalendarIcon,
       })),
-    config: iconCalendarConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-calendar/config").then(
+        (m) => m.iconCalendarConfig,
+      ),
   },
   "icon-camera": {
     load: () =>
       import("@/registry/remocn-icons/icon-camera").then((m) => ({
         default: m.CameraIcon,
       })),
-    config: iconCameraConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-camera/config").then(
+        (m) => m.iconCameraConfig,
+      ),
   },
   "icon-check": {
     load: () =>
       import("@/registry/remocn-icons/icon-check").then((m) => ({
         default: m.CheckIcon,
       })),
-    config: iconCheckConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-check/config").then(
+        (m) => m.iconCheckConfig,
+      ),
   },
   "icon-chevron-down": {
     load: () =>
       import("@/registry/remocn-icons/icon-chevron-down").then((m) => ({
         default: m.ChevronDownIcon,
       })),
-    config: iconChevronDownConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-chevron-down/config").then(
+        (m) => m.iconChevronDownConfig,
+      ),
   },
   "icon-chevron-left": {
     load: () =>
       import("@/registry/remocn-icons/icon-chevron-left").then((m) => ({
         default: m.ChevronLeftIcon,
       })),
-    config: iconChevronLeftConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-chevron-left/config").then(
+        (m) => m.iconChevronLeftConfig,
+      ),
   },
   "icon-chevron-right": {
     load: () =>
       import("@/registry/remocn-icons/icon-chevron-right").then((m) => ({
         default: m.ChevronRightIcon,
       })),
-    config: iconChevronRightConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-chevron-right/config").then(
+        (m) => m.iconChevronRightConfig,
+      ),
   },
   "icon-chevron-up": {
     load: () =>
       import("@/registry/remocn-icons/icon-chevron-up").then((m) => ({
         default: m.ChevronUpIcon,
       })),
-    config: iconChevronUpConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-chevron-up/config").then(
+        (m) => m.iconChevronUpConfig,
+      ),
   },
   "icon-clock": {
     load: () =>
       import("@/registry/remocn-icons/icon-clock").then((m) => ({
         default: m.ClockIcon,
       })),
-    config: iconClockConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-clock/config").then(
+        (m) => m.iconClockConfig,
+      ),
   },
   "icon-cloud": {
     load: () =>
       import("@/registry/remocn-icons/icon-cloud").then((m) => ({
         default: m.CloudIcon,
       })),
-    config: iconCloudConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-cloud/config").then(
+        (m) => m.iconCloudConfig,
+      ),
   },
   "icon-code": {
     load: () =>
       import("@/registry/remocn-icons/icon-code").then((m) => ({
         default: m.CodeIcon,
       })),
-    config: iconCodeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-code/config").then(
+        (m) => m.iconCodeConfig,
+      ),
   },
   "icon-copy": {
     load: () =>
       import("@/registry/remocn-icons/icon-copy").then((m) => ({
         default: m.CopyIcon,
       })),
-    config: iconCopyConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-copy/config").then(
+        (m) => m.iconCopyConfig,
+      ),
   },
   "icon-credit-card": {
     load: () =>
       import("@/registry/remocn-icons/icon-credit-card").then((m) => ({
         default: m.CreditCardIcon,
       })),
-    config: iconCreditCardConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-credit-card/config").then(
+        (m) => m.iconCreditCardConfig,
+      ),
   },
   "icon-crown": {
     load: () =>
       import("@/registry/remocn-icons/icon-crown").then((m) => ({
         default: m.CrownIcon,
       })),
-    config: iconCrownConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-crown/config").then(
+        (m) => m.iconCrownConfig,
+      ),
   },
   "icon-database": {
     load: () =>
       import("@/registry/remocn-icons/icon-database").then((m) => ({
         default: m.DatabaseIcon,
       })),
-    config: iconDatabaseConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-database/config").then(
+        (m) => m.iconDatabaseConfig,
+      ),
   },
   "icon-dollar-sign": {
     load: () =>
       import("@/registry/remocn-icons/icon-dollar-sign").then((m) => ({
         default: m.DollarSignIcon,
       })),
-    config: iconDollarSignConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-dollar-sign/config").then(
+        (m) => m.iconDollarSignConfig,
+      ),
   },
   "icon-download": {
     load: () =>
       import("@/registry/remocn-icons/icon-download").then((m) => ({
         default: m.DownloadIcon,
       })),
-    config: iconDownloadConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-download/config").then(
+        (m) => m.iconDownloadConfig,
+      ),
   },
   "icon-external-link": {
     load: () =>
       import("@/registry/remocn-icons/icon-external-link").then((m) => ({
         default: m.ExternalLinkIcon,
       })),
-    config: iconExternalLinkConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-external-link/config").then(
+        (m) => m.iconExternalLinkConfig,
+      ),
   },
   "icon-eye-off": {
     load: () =>
       import("@/registry/remocn-icons/icon-eye-off").then((m) => ({
         default: m.EyeOffIcon,
       })),
-    config: iconEyeOffConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-eye-off/config").then(
+        (m) => m.iconEyeOffConfig,
+      ),
   },
   "icon-eye": {
     load: () =>
       import("@/registry/remocn-icons/icon-eye").then((m) => ({
         default: m.EyeIcon,
       })),
-    config: iconEyeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-eye/config").then(
+        (m) => m.iconEyeConfig,
+      ),
   },
   "icon-file-text": {
     load: () =>
       import("@/registry/remocn-icons/icon-file-text").then((m) => ({
         default: m.FileTextIcon,
       })),
-    config: iconFileTextConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-file-text/config").then(
+        (m) => m.iconFileTextConfig,
+      ),
   },
   "icon-filter": {
     load: () =>
       import("@/registry/remocn-icons/icon-filter").then((m) => ({
         default: m.FilterIcon,
       })),
-    config: iconFilterConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-filter/config").then(
+        (m) => m.iconFilterConfig,
+      ),
   },
   "icon-flame": {
     load: () =>
       import("@/registry/remocn-icons/icon-flame").then((m) => ({
         default: m.FlameIcon,
       })),
-    config: iconFlameConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-flame/config").then(
+        (m) => m.iconFlameConfig,
+      ),
   },
   "icon-folder": {
     load: () =>
       import("@/registry/remocn-icons/icon-folder").then((m) => ({
         default: m.FolderIcon,
       })),
-    config: iconFolderConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-folder/config").then(
+        (m) => m.iconFolderConfig,
+      ),
   },
   "icon-gem": {
     load: () =>
       import("@/registry/remocn-icons/icon-gem").then((m) => ({
         default: m.GemIcon,
       })),
-    config: iconGemConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-gem/config").then(
+        (m) => m.iconGemConfig,
+      ),
   },
   "icon-gift": {
     load: () =>
       import("@/registry/remocn-icons/icon-gift").then((m) => ({
         default: m.GiftIcon,
       })),
-    config: iconGiftConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-gift/config").then(
+        (m) => m.iconGiftConfig,
+      ),
   },
   "icon-globe": {
     load: () =>
       import("@/registry/remocn-icons/icon-globe").then((m) => ({
         default: m.GlobeIcon,
       })),
-    config: iconGlobeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-globe/config").then(
+        (m) => m.iconGlobeConfig,
+      ),
   },
   "icon-heart": {
     load: () =>
       import("@/registry/remocn-icons/icon-heart").then((m) => ({
         default: m.HeartIcon,
       })),
-    config: iconHeartConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-heart/config").then(
+        (m) => m.iconHeartConfig,
+      ),
   },
   "icon-help-circle": {
     load: () =>
       import("@/registry/remocn-icons/icon-help-circle").then((m) => ({
         default: m.HelpCircleIcon,
       })),
-    config: iconHelpCircleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-help-circle/config").then(
+        (m) => m.iconHelpCircleConfig,
+      ),
   },
   "icon-home": {
     load: () =>
       import("@/registry/remocn-icons/icon-home").then((m) => ({
         default: m.HomeIcon,
       })),
-    config: iconHomeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-home/config").then(
+        (m) => m.iconHomeConfig,
+      ),
   },
   "icon-image": {
     load: () =>
       import("@/registry/remocn-icons/icon-image").then((m) => ({
         default: m.ImageIcon,
       })),
-    config: iconImageConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-image/config").then(
+        (m) => m.iconImageConfig,
+      ),
   },
   "icon-inbox": {
     load: () =>
       import("@/registry/remocn-icons/icon-inbox").then((m) => ({
         default: m.InboxIcon,
       })),
-    config: iconInboxConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-inbox/config").then(
+        (m) => m.iconInboxConfig,
+      ),
   },
   "icon-info": {
     load: () =>
       import("@/registry/remocn-icons/icon-info").then((m) => ({
         default: m.InfoIcon,
       })),
-    config: iconInfoConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-info/config").then(
+        (m) => m.iconInfoConfig,
+      ),
   },
   "icon-key": {
     load: () =>
       import("@/registry/remocn-icons/icon-key").then((m) => ({
         default: m.KeyIcon,
       })),
-    config: iconKeyConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-key/config").then(
+        (m) => m.iconKeyConfig,
+      ),
   },
   "icon-layout-grid": {
     load: () =>
       import("@/registry/remocn-icons/icon-layout-grid").then((m) => ({
         default: m.LayoutGridIcon,
       })),
-    config: iconLayoutGridConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-layout-grid/config").then(
+        (m) => m.iconLayoutGridConfig,
+      ),
   },
   "icon-link": {
     load: () =>
       import("@/registry/remocn-icons/icon-link").then((m) => ({
         default: m.LinkIcon,
       })),
-    config: iconLinkConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-link/config").then(
+        (m) => m.iconLinkConfig,
+      ),
   },
   "icon-loader": {
     load: () =>
       import("@/registry/remocn-icons/icon-loader").then((m) => ({
         default: m.LoaderIcon,
       })),
-    config: iconLoaderConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-loader/config").then(
+        (m) => m.iconLoaderConfig,
+      ),
   },
   "icon-lock": {
     load: () =>
       import("@/registry/remocn-icons/icon-lock").then((m) => ({
         default: m.LockIcon,
       })),
-    config: iconLockConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-lock/config").then(
+        (m) => m.iconLockConfig,
+      ),
   },
   "icon-log-out": {
     load: () =>
       import("@/registry/remocn-icons/icon-log-out").then((m) => ({
         default: m.LogOutIcon,
       })),
-    config: iconLogOutConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-log-out/config").then(
+        (m) => m.iconLogOutConfig,
+      ),
   },
   "icon-mail": {
     load: () =>
       import("@/registry/remocn-icons/icon-mail").then((m) => ({
         default: m.MailIcon,
       })),
-    config: iconMailConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-mail/config").then(
+        (m) => m.iconMailConfig,
+      ),
   },
   "icon-maximize": {
     load: () =>
       import("@/registry/remocn-icons/icon-maximize").then((m) => ({
         default: m.MaximizeIcon,
       })),
-    config: iconMaximizeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-maximize/config").then(
+        (m) => m.iconMaximizeConfig,
+      ),
   },
   "icon-menu": {
     load: () =>
       import("@/registry/remocn-icons/icon-menu").then((m) => ({
         default: m.MenuIcon,
       })),
-    config: iconMenuConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-menu/config").then(
+        (m) => m.iconMenuConfig,
+      ),
   },
   "icon-message-circle": {
     load: () =>
       import("@/registry/remocn-icons/icon-message-circle").then((m) => ({
         default: m.MessageCircleIcon,
       })),
-    config: iconMessageCircleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-message-circle/config").then(
+        (m) => m.iconMessageCircleConfig,
+      ),
   },
   "icon-mic": {
     load: () =>
       import("@/registry/remocn-icons/icon-mic").then((m) => ({
         default: m.MicIcon,
       })),
-    config: iconMicConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-mic/config").then(
+        (m) => m.iconMicConfig,
+      ),
   },
   "icon-monitor": {
     load: () =>
       import("@/registry/remocn-icons/icon-monitor").then((m) => ({
         default: m.MonitorIcon,
       })),
-    config: iconMonitorConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-monitor/config").then(
+        (m) => m.iconMonitorConfig,
+      ),
   },
   "icon-moon": {
     load: () =>
       import("@/registry/remocn-icons/icon-moon").then((m) => ({
         default: m.MoonIcon,
       })),
-    config: iconMoonConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-moon/config").then(
+        (m) => m.iconMoonConfig,
+      ),
   },
   "icon-more-horizontal": {
     load: () =>
       import("@/registry/remocn-icons/icon-more-horizontal").then((m) => ({
         default: m.MoreHorizontalIcon,
       })),
-    config: iconMoreHorizontalConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-more-horizontal/config").then(
+        (m) => m.iconMoreHorizontalConfig,
+      ),
   },
   "icon-package": {
     load: () =>
       import("@/registry/remocn-icons/icon-package").then((m) => ({
         default: m.PackageIcon,
       })),
-    config: iconPackageConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-package/config").then(
+        (m) => m.iconPackageConfig,
+      ),
   },
   "icon-party-popper": {
     load: () =>
       import("@/registry/remocn-icons/icon-party-popper").then((m) => ({
         default: m.PartyPopperIcon,
       })),
-    config: iconPartyPopperConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-party-popper/config").then(
+        (m) => m.iconPartyPopperConfig,
+      ),
   },
   "icon-pause": {
     load: () =>
       import("@/registry/remocn-icons/icon-pause").then((m) => ({
         default: m.PauseIcon,
       })),
-    config: iconPauseConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-pause/config").then(
+        (m) => m.iconPauseConfig,
+      ),
   },
   "icon-pencil": {
     load: () =>
       import("@/registry/remocn-icons/icon-pencil").then((m) => ({
         default: m.PencilIcon,
       })),
-    config: iconPencilConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-pencil/config").then(
+        (m) => m.iconPencilConfig,
+      ),
   },
   "icon-phone": {
     load: () =>
       import("@/registry/remocn-icons/icon-phone").then((m) => ({
         default: m.PhoneIcon,
       })),
-    config: iconPhoneConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-phone/config").then(
+        (m) => m.iconPhoneConfig,
+      ),
   },
   "icon-play": {
     load: () =>
       import("@/registry/remocn-icons/icon-play").then((m) => ({
         default: m.PlayIcon,
       })),
-    config: iconPlayConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-play/config").then(
+        (m) => m.iconPlayConfig,
+      ),
   },
   "icon-plus": {
     load: () =>
       import("@/registry/remocn-icons/icon-plus").then((m) => ({
         default: m.PlusIcon,
       })),
-    config: iconPlusConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-plus/config").then(
+        (m) => m.iconPlusConfig,
+      ),
   },
   "icon-plus-circle": {
     load: () =>
       import("@/registry/remocn-icons/icon-plus-circle").then((m) => ({
         default: m.PlusCircleIcon,
       })),
-    config: iconPlusCircleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-plus-circle/config").then(
+        (m) => m.iconPlusCircleConfig,
+      ),
   },
   "icon-refresh-cw": {
     load: () =>
       import("@/registry/remocn-icons/icon-refresh-cw").then((m) => ({
         default: m.RefreshCwIcon,
       })),
-    config: iconRefreshCwConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-refresh-cw/config").then(
+        (m) => m.iconRefreshCwConfig,
+      ),
   },
   "icon-rocket": {
     load: () =>
       import("@/registry/remocn-icons/icon-rocket").then((m) => ({
         default: m.RocketIcon,
       })),
-    config: iconRocketConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-rocket/config").then(
+        (m) => m.iconRocketConfig,
+      ),
   },
   "icon-save": {
     load: () =>
       import("@/registry/remocn-icons/icon-save").then((m) => ({
         default: m.SaveIcon,
       })),
-    config: iconSaveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-save/config").then(
+        (m) => m.iconSaveConfig,
+      ),
   },
   "icon-search": {
     load: () =>
       import("@/registry/remocn-icons/icon-search").then((m) => ({
         default: m.SearchIcon,
       })),
-    config: iconSearchConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-search/config").then(
+        (m) => m.iconSearchConfig,
+      ),
   },
   "icon-send": {
     load: () =>
       import("@/registry/remocn-icons/icon-send").then((m) => ({
         default: m.SendIcon,
       })),
-    config: iconSendConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-send/config").then(
+        (m) => m.iconSendConfig,
+      ),
   },
   "icon-settings": {
     load: () =>
       import("@/registry/remocn-icons/icon-settings").then((m) => ({
         default: m.SettingsIcon,
       })),
-    config: iconSettingsConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-settings/config").then(
+        (m) => m.iconSettingsConfig,
+      ),
   },
   "icon-share-2": {
     load: () =>
       import("@/registry/remocn-icons/icon-share-2").then((m) => ({
         default: m.Share2Icon,
       })),
-    config: iconShare2Config,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-share-2/config").then(
+        (m) => m.iconShare2Config,
+      ),
   },
   "icon-shield": {
     load: () =>
       import("@/registry/remocn-icons/icon-shield").then((m) => ({
         default: m.ShieldIcon,
       })),
-    config: iconShieldConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-shield/config").then(
+        (m) => m.iconShieldConfig,
+      ),
   },
   "icon-shopping-cart": {
     load: () =>
       import("@/registry/remocn-icons/icon-shopping-cart").then((m) => ({
         default: m.ShoppingCartIcon,
       })),
-    config: iconShoppingCartConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-shopping-cart/config").then(
+        (m) => m.iconShoppingCartConfig,
+      ),
   },
   "icon-skip-forward": {
     load: () =>
       import("@/registry/remocn-icons/icon-skip-forward").then((m) => ({
         default: m.SkipForwardIcon,
       })),
-    config: iconSkipForwardConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-skip-forward/config").then(
+        (m) => m.iconSkipForwardConfig,
+      ),
   },
   "icon-smartphone": {
     load: () =>
       import("@/registry/remocn-icons/icon-smartphone").then((m) => ({
         default: m.SmartphoneIcon,
       })),
-    config: iconSmartphoneConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-smartphone/config").then(
+        (m) => m.iconSmartphoneConfig,
+      ),
   },
   "icon-sparkles": {
     load: () =>
       import("@/registry/remocn-icons/icon-sparkles").then((m) => ({
         default: m.SparklesIcon,
       })),
-    config: iconSparklesConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-sparkles/config").then(
+        (m) => m.iconSparklesConfig,
+      ),
   },
   "icon-star": {
     load: () =>
       import("@/registry/remocn-icons/icon-star").then((m) => ({
         default: m.StarIcon,
       })),
-    config: iconStarConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-star/config").then(
+        (m) => m.iconStarConfig,
+      ),
   },
   "icon-sun": {
     load: () =>
       import("@/registry/remocn-icons/icon-sun").then((m) => ({
         default: m.SunIcon,
       })),
-    config: iconSunConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-sun/config").then(
+        (m) => m.iconSunConfig,
+      ),
   },
   "icon-tag": {
     load: () =>
       import("@/registry/remocn-icons/icon-tag").then((m) => ({
         default: m.TagIcon,
       })),
-    config: iconTagConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-tag/config").then(
+        (m) => m.iconTagConfig,
+      ),
   },
   "icon-target": {
     load: () =>
       import("@/registry/remocn-icons/icon-target").then((m) => ({
         default: m.TargetIcon,
       })),
-    config: iconTargetConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-target/config").then(
+        (m) => m.iconTargetConfig,
+      ),
   },
   "icon-terminal": {
     load: () =>
       import("@/registry/remocn-icons/icon-terminal").then((m) => ({
         default: m.TerminalIcon,
       })),
-    config: iconTerminalConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-terminal/config").then(
+        (m) => m.iconTerminalConfig,
+      ),
   },
   "icon-thumbs-up": {
     load: () =>
       import("@/registry/remocn-icons/icon-thumbs-up").then((m) => ({
         default: m.ThumbsUpIcon,
       })),
-    config: iconThumbsUpConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-thumbs-up/config").then(
+        (m) => m.iconThumbsUpConfig,
+      ),
   },
   "icon-timer": {
     load: () =>
       import("@/registry/remocn-icons/icon-timer").then((m) => ({
         default: m.TimerIcon,
       })),
-    config: iconTimerConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-timer/config").then(
+        (m) => m.iconTimerConfig,
+      ),
   },
   "icon-trash": {
     load: () =>
       import("@/registry/remocn-icons/icon-trash").then((m) => ({
         default: m.TrashIcon,
       })),
-    config: iconTrashConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-trash/config").then(
+        (m) => m.iconTrashConfig,
+      ),
   },
   "icon-trending-down": {
     load: () =>
       import("@/registry/remocn-icons/icon-trending-down").then((m) => ({
         default: m.TrendingDownIcon,
       })),
-    config: iconTrendingDownConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-trending-down/config").then(
+        (m) => m.iconTrendingDownConfig,
+      ),
   },
   "icon-trending-up": {
     load: () =>
       import("@/registry/remocn-icons/icon-trending-up").then((m) => ({
         default: m.TrendingUpIcon,
       })),
-    config: iconTrendingUpConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-trending-up/config").then(
+        (m) => m.iconTrendingUpConfig,
+      ),
   },
   "icon-trophy": {
     load: () =>
       import("@/registry/remocn-icons/icon-trophy").then((m) => ({
         default: m.TrophyIcon,
       })),
-    config: iconTrophyConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-trophy/config").then(
+        (m) => m.iconTrophyConfig,
+      ),
   },
   "icon-upload": {
     load: () =>
       import("@/registry/remocn-icons/icon-upload").then((m) => ({
         default: m.UploadIcon,
       })),
-    config: iconUploadConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-upload/config").then(
+        (m) => m.iconUploadConfig,
+      ),
   },
   "icon-user-plus": {
     load: () =>
       import("@/registry/remocn-icons/icon-user-plus").then((m) => ({
         default: m.UserPlusIcon,
       })),
-    config: iconUserPlusConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-user-plus/config").then(
+        (m) => m.iconUserPlusConfig,
+      ),
   },
   "icon-user": {
     load: () =>
       import("@/registry/remocn-icons/icon-user").then((m) => ({
         default: m.UserIcon,
       })),
-    config: iconUserConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-user/config").then(
+        (m) => m.iconUserConfig,
+      ),
   },
   "icon-users": {
     load: () =>
       import("@/registry/remocn-icons/icon-users").then((m) => ({
         default: m.UsersIcon,
       })),
-    config: iconUsersConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-users/config").then(
+        (m) => m.iconUsersConfig,
+      ),
   },
   "icon-video": {
     load: () =>
       import("@/registry/remocn-icons/icon-video").then((m) => ({
         default: m.VideoIcon,
       })),
-    config: iconVideoConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-video/config").then(
+        (m) => m.iconVideoConfig,
+      ),
   },
   "icon-volume-2": {
     load: () =>
       import("@/registry/remocn-icons/icon-volume-2").then((m) => ({
         default: m.Volume2Icon,
       })),
-    config: iconVolume2Config,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-volume-2/config").then(
+        (m) => m.iconVolume2Config,
+      ),
   },
   "icon-volume-x": {
     load: () =>
       import("@/registry/remocn-icons/icon-volume-x").then((m) => ({
         default: m.VolumeXIcon,
       })),
-    config: iconVolumeXConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-volume-x/config").then(
+        (m) => m.iconVolumeXConfig,
+      ),
   },
   "icon-wallet": {
     load: () =>
       import("@/registry/remocn-icons/icon-wallet").then((m) => ({
         default: m.WalletIcon,
       })),
-    config: iconWalletConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-wallet/config").then(
+        (m) => m.iconWalletConfig,
+      ),
   },
   "icon-check-circle": {
     load: () =>
       import("@/registry/remocn-icons/icon-check-circle").then((m) => ({
         default: m.CheckCircleIcon,
       })),
-    config: iconCheckCircleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-check-circle/config").then(
+        (m) => m.iconCheckCircleConfig,
+      ),
   },
   "icon-x": {
     load: () =>
       import("@/registry/remocn-icons/icon-x").then((m) => ({
         default: m.XIcon,
       })),
-    config: iconXConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-x/config").then(
+        (m) => m.iconXConfig,
+      ),
   },
   "icon-x-circle": {
     load: () =>
       import("@/registry/remocn-icons/icon-x-circle").then((m) => ({
         default: m.XCircleIcon,
       })),
-    config: iconXCircleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-x-circle/config").then(
+        (m) => m.iconXCircleConfig,
+      ),
   },
   "icon-zap": {
     load: () =>
       import("@/registry/remocn-icons/icon-zap").then((m) => ({
         default: m.ZapIcon,
       })),
-    config: iconZapConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-icons/icon-zap/config").then(
+        (m) => m.iconZapConfig,
+      ),
   },
   "wave-wipe": {
     load: () =>
       import("@/components/docs/examples/wave-wipe-example").then((m) => ({
         default: m.WaveWipeExampleScene,
       })),
-    config: waveWipeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/wave-wipe/config").then(
+        (m) => m.waveWipeConfig,
+      ),
   },
   "ripple-zoom": {
     load: () =>
       import("@/components/docs/examples/ripple-zoom-example").then((m) => ({
         default: m.RippleZoomExampleScene,
       })),
-    config: rippleZoomConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/ripple-zoom/config").then(
+        (m) => m.rippleZoomConfig,
+      ),
   },
   "whip-pan": {
     load: () =>
       import("@/components/docs/examples/whip-pan-example").then((m) => ({
         default: m.WhipPanExampleScene,
       })),
-    config: whipPanConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/whip-pan/config").then((m) => m.whipPanConfig),
   },
   "push-through": {
     load: () =>
       import("@/components/docs/examples/push-through-example").then((m) => ({
         default: m.PushThroughExampleScene,
       })),
-    config: pushThroughConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/push-through/config").then(
+        (m) => m.pushThroughConfig,
+      ),
   },
   "focus-pull": {
     load: () =>
       import("@/components/docs/examples/focus-pull-example").then((m) => ({
         default: m.FocusPullExampleScene,
       })),
-    config: focusPullConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/focus-pull/config").then(
+        (m) => m.focusPullConfig,
+      ),
   },
   "zoom-blur": {
     load: () =>
       import("@/components/docs/examples/zoom-blur-example").then((m) => ({
         default: m.ZoomBlurExampleScene,
       })),
-    config: zoomBlurConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/zoom-blur/config").then(
+        (m) => m.zoomBlurConfig,
+      ),
   },
   "glitch-cut": {
     load: () =>
       import("@/components/docs/examples/glitch-cut-example").then((m) => ({
         default: m.GlitchCutExampleScene,
       })),
-    config: glitchCutConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/glitch-cut/config").then(
+        (m) => m.glitchCutConfig,
+      ),
   },
   "ember-burn": {
     load: () =>
       import("@/components/docs/examples/ember-burn-example").then((m) => ({
         default: m.EmberBurnExampleScene,
       })),
-    config: emberBurnConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/ember-burn/config").then(
+        (m) => m.emberBurnConfig,
+      ),
   },
   "particle-dissolve": {
     load: () =>
       import("@/components/docs/examples/particle-dissolve-example").then(
         (m) => ({ default: m.ParticleDissolveExampleScene }),
       ),
-    config: particleDissolveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/particle-dissolve/config").then(
+        (m) => m.particleDissolveConfig,
+      ),
   },
   "grid-wave": {
     load: () =>
       import("@/components/docs/examples/grid-wave-example").then((m) => ({
         default: m.GridWaveExampleScene,
       })),
-    config: gridWaveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/grid-wave/config").then(
+        (m) => m.gridWaveConfig,
+      ),
   },
   displacement: {
     load: () =>
       import("@/components/docs/examples/displacement-example").then((m) => ({
         default: m.DisplacementExampleScene,
       })),
-    config: displacementConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/displacement/config").then(
+        (m) => m.displacementConfig,
+      ),
   },
   "vhs-filter": {
     load: () =>
       import("@/components/docs/examples/vhs-filter-example").then((m) => ({
         default: m.VhsFilterExampleScene,
       })),
-    config: vhsFilterConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/vhs-filter/config").then(
+        (m) => m.vhsFilterConfig,
+      ),
   },
   "crt-screen": {
     load: () =>
       import("@/components/docs/examples/crt-screen-example").then((m) => ({
         default: m.CrtScreenExampleScene,
       })),
-    config: crtScreenConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/crt-screen/config").then(
+        (m) => m.crtScreenConfig,
+      ),
   },
   "sustained-glitch": {
     load: () =>
       import("@/components/docs/examples/sustained-glitch-example").then(
         (m) => ({ default: m.SustainedGlitchExampleScene }),
       ),
-    config: sustainedGlitchConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/sustained-glitch/config").then(
+        (m) => m.sustainedGlitchConfig,
+      ),
   },
   "pixelate-region": {
     load: () =>
       import("@/components/docs/examples/pixelate-region-example").then(
         (m) => ({ default: m.PixelateRegionExampleScene }),
       ),
-    config: pixelateRegionConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/pixelate-region/config").then(
+        (m) => m.pixelateRegionConfig,
+      ),
   },
   "ascii-render": {
     load: () =>
       import("@/components/docs/examples/ascii-render-example").then((m) => ({
         default: m.AsciiRenderExampleScene,
       })),
-    config: asciiRenderConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/ascii-render/config").then(
+        (m) => m.asciiRenderConfig,
+      ),
   },
   "halftone-print": {
     load: () =>
       import("@/components/docs/examples/halftone-print-example").then((m) => ({
         default: m.HalftonePrintExampleScene,
       })),
-    config: halftonePrintConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/halftone-print/config").then(
+        (m) => m.halftonePrintConfig,
+      ),
   },
   "underwater-ripple": {
     load: () =>
       import("@/components/docs/examples/underwater-ripple-example").then(
         (m) => ({ default: m.UnderwaterRippleExampleScene }),
       ),
-    config: underwaterRippleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/underwater-ripple/config").then(
+        (m) => m.underwaterRippleConfig,
+      ),
   },
   "camera-lens": {
     load: () =>
       import("@/components/docs/examples/camera-lens-example").then((m) => ({
         default: m.CameraLensExampleScene,
       })),
-    config: cameraLensConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/camera-lens/config").then(
+        (m) => m.cameraLensConfig,
+      ),
   },
   "security-cam": {
     load: () =>
       import("@/components/docs/examples/security-cam-example").then((m) => ({
         default: m.SecurityCamExampleScene,
       })),
-    config: securityCamConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/security-cam/config").then(
+        (m) => m.securityCamConfig,
+      ),
   },
   hologram: {
     load: () =>
       import("@/components/docs/examples/hologram-example").then((m) => ({
         default: m.HologramExampleScene,
       })),
-    config: hologramConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/hologram/config").then((m) => m.hologramConfig),
   },
   "tv-power-off": {
     load: () =>
       import("@/components/docs/examples/tv-power-off-example").then((m) => ({
         default: m.TvPowerOffExampleScene,
       })),
-    config: tvPowerOffConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/tv-power-off/config").then(
+        (m) => m.tvPowerOffConfig,
+      ),
   },
   "slide-swap": {
     load: () =>
       import("@/components/docs/examples/slide-swap-example").then((m) => ({
         default: m.SlideSwapExampleScene,
       })),
-    config: slideSwapConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/slide-swap/config").then(
+        (m) => m.slideSwapConfig,
+      ),
   },
   "spring-settle": {
     load: () =>
       import("@/components/docs/examples/spring-settle-example").then((m) => ({
         default: m.SpringSettleExampleScene,
       })),
-    config: springSettleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/spring-settle/config").then(
+        (m) => m.springSettleConfig,
+      ),
   },
   "warp-dissolve": {
     load: () =>
       import("@/components/docs/examples/warp-dissolve-example").then((m) => ({
         default: m.WarpDissolveExampleScene,
       })),
-    config: warpDissolveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/warp-dissolve/config").then(
+        (m) => m.warpDissolveConfig,
+      ),
   },
   "chat-to-preview-layout": {
     load: () =>
       import("@/registry/remocn/chat-to-preview-layout").then((m) => ({
         default: m.ChatToPreviewLayout,
       })),
-    config: chatToPreviewLayoutConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/chat-to-preview-layout/config").then(
+        (m) => m.chatToPreviewLayoutConfig,
+      ),
   },
   "animated-line-chart": {
     load: () =>
       import("@/registry/remocn/animated-line-chart").then((m) => ({
         default: m.AnimatedLineChart,
       })),
-    config: animatedLineChartConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/animated-line-chart/config").then(
+        (m) => m.animatedLineChartConfig,
+      ),
   },
   "animated-bar-chart": {
     load: () =>
       import("@/registry/remocn/animated-bar-chart").then((m) => ({
         default: m.AnimatedBarChart,
       })),
-    config: animatedBarChartConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/animated-bar-chart/config").then(
+        (m) => m.animatedBarChartConfig,
+      ),
   },
   "terminal-simulator": {
     load: () =>
       import("@/registry/remocn/terminal-simulator").then((m) => ({
         default: m.TerminalSimulator,
       })),
-    config: terminalSimulatorConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/terminal-simulator/config").then(
+        (m) => m.terminalSimulatorConfig,
+      ),
   },
   "terminal-cursor-zoom": {
     load: () =>
       import("@/registry/remocn/terminal-cursor-zoom").then((m) => ({
         default: m.TerminalCursorZoom,
       })),
-    config: terminalCursorZoomConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/terminal-cursor-zoom/config").then(
+        (m) => m.terminalCursorZoomConfig,
+      ),
   },
   "progress-steps": {
     load: () =>
       import("@/registry/remocn/progress-steps").then((m) => ({
         default: m.ProgressSteps,
       })),
-    config: progressStepsConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/progress-steps/config").then(
+        (m) => m.progressStepsConfig,
+      ),
   },
   "ecosystem-constellation": {
     load: () =>
       import("@/registry/remocn/ecosystem-constellation").then((m) => ({
         default: m.EcosystemConstellation,
       })),
-    config: ecosystemConstellationConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/ecosystem-constellation/config").then(
+        (m) => m.ecosystemConstellationConfig,
+      ),
   },
   "live-code-compilation": {
     load: () =>
       import("@/registry/remocn/live-code-compilation").then((m) => ({
         default: m.LiveCodeCompilation,
       })),
-    config: liveCodeCompilationConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/live-code-compilation/config").then(
+        (m) => m.liveCodeCompilationConfig,
+      ),
   },
   "infinite-bento-pan": {
     load: () =>
       import("@/registry/remocn/infinite-bento-pan").then((m) => ({
         default: m.InfiniteBentoPan,
       })),
-    config: infiniteBentoPanConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/infinite-bento-pan/config").then(
+        (m) => m.infiniteBentoPanConfig,
+      ),
   },
   "github-sponsors": {
     load: () =>
       import("@/registry/remocn/github-sponsors").then((m) => ({
         default: m.GitHubSponsors,
       })),
-    config: githubSponsorsConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/github-sponsors/config").then(
+        (m) => m.githubSponsorsConfig,
+      ),
   },
   "github-stars": {
     load: () =>
       import("@/registry/remocn/github-stars").then((m) => ({
         default: m.GitHubStars,
       })),
-    config: githubStarsConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/github-stars/config").then(
+        (m) => m.githubStarsConfig,
+      ),
   },
   "logo-enter": {
     load: () =>
       import("@/registry/remocn/logo-enter").then((m) => ({
         default: m.LogoEnter,
       })),
-    config: logoEnterConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/logo-enter/config").then(
+        (m) => m.logoEnterConfig,
+      ),
   },
   "number-wheel": {
     load: () =>
       import("@/registry/remocn/number-wheel").then((m) => ({
         default: m.NumberWheel,
       })),
-    config: numberWheelConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/number-wheel/config").then(
+        (m) => m.numberWheelConfig,
+      ),
   },
   "rolling-number": {
     load: () =>
       import("@/registry/remocn/rolling-number").then((m) => ({
         default: m.RollingNumber,
       })),
-    config: rollingNumberConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/rolling-number/config").then(
+        (m) => m.rollingNumberConfig,
+      ),
   },
   "rolodex-flip": {
     load: () =>
       import("@/components/docs/examples/rolodex-flip-example").then((m) => ({
         default: m.RolodexFlipExampleScene,
       })),
-    config: rolodexFlipConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/rolodex-flip/config").then(
+        (m) => m.rolodexFlipConfig,
+      ),
   },
   "value-swap": {
     load: () =>
       import("@/components/docs/examples/value-swap-example").then((m) => ({
         default: m.ValueSwapExampleScene,
       })),
-    config: valueSwapConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/value-swap/config").then(
+        (m) => m.valueSwapConfig,
+      ),
   },
   "x-follow-card": {
     load: () =>
       import("@/registry/remocn/x-follow-card").then((m) => ({
         default: m.XFollowCard,
       })),
-    config: xFollowCardConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/x-follow-card/config").then(
+        (m) => m.xFollowCardConfig,
+      ),
   },
   "x-followers-overview": {
     load: () =>
       import("@/registry/remocn/x-followers-overview").then((m) => ({
         default: m.XFollowersOverview,
       })),
-    config: xFollowersOverviewConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/x-followers-overview/config").then(
+        (m) => m.xFollowersOverviewConfig,
+      ),
   },
   confetti: {
     load: () =>
       import("@/registry/remocn/confetti").then((m) => ({
         default: m.Confetti,
       })),
-    config: confettiConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/confetti/config").then((m) => m.confettiConfig),
   },
   "paper-wobble": {
     load: () =>
       import("@/components/docs/examples/paper-wobble-example").then((m) => ({
         default: m.PaperWobbleExampleScene,
       })),
-    config: paperWobbleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/paper-wobble/config").then(
+        (m) => m.paperWobbleConfig,
+      ),
   },
   "paper-sticker": {
     load: () =>
       import("@/components/docs/examples/paper-sticker-example").then((m) => ({
         default: m.PaperStickerExampleScene,
       })),
-    config: paperStickerConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/paper-sticker/config").then(
+        (m) => m.paperStickerConfig,
+      ),
   },
   polaroid: {
     load: () =>
       import("@/components/docs/examples/polaroid-example").then((m) => ({
         default: m.PolaroidExampleScene,
       })),
-    config: polaroidConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/polaroid/config").then((m) => m.polaroidConfig),
   },
   "check-list": {
     load: () =>
       import("@/components/docs/examples/check-list-example").then((m) => ({
         default: m.CheckListExampleScene,
       })),
-    config: checkListConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/check-list/config").then(
+        (m) => m.checkListConfig,
+      ),
   },
   "crumple-toss": {
     load: () =>
       import("@/components/docs/examples/crumple-toss-example").then((m) => ({
         default: m.CrumpleTossExampleScene,
       })),
-    config: crumpleTossConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/crumple-toss/config").then(
+        (m) => m.crumpleTossConfig,
+      ),
   },
   "scribble-circle": {
     load: () =>
@@ -1741,119 +2097,153 @@ const registry: Record<string, RegistryEntry> = {
           default: m.ScribbleCircleExampleScene,
         }),
       ),
-    config: scribbleCircleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/scribble-circle/config").then(
+        (m) => m.scribbleCircleConfig,
+      ),
   },
   "page-turn": {
     load: () =>
       import("@/components/docs/examples/page-turn-example").then((m) => ({
         default: m.PageTurnExampleScene,
       })),
-    config: pageTurnConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/page-turn/config").then(
+        (m) => m.pageTurnConfig,
+      ),
   },
   "ink-arrow": {
     load: () =>
       import("@/components/docs/examples/ink-arrow-example").then((m) => ({
         default: m.InkArrowExampleScene,
       })),
-    config: inkArrowConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/ink-arrow/config").then(
+        (m) => m.inkArrowConfig,
+      ),
   },
   backdrop: {
     load: () =>
       import("@/components/docs/examples/backdrop-demo").then((m) => ({
         default: m.BackdropDemo,
       })),
-    config: backdropConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/backdrop/config").then((m) => m.backdropConfig),
   },
   drift: {
     load: () =>
       import("@/components/docs/examples/drift-example").then((m) => ({
         default: m.DriftExampleScene,
       })),
-    config: driftConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/drift/config").then((m) => m.driftConfig),
   },
   "claude-chat": {
     load: () =>
       import("@/registry/remocn/claude-chat").then((m) => ({
         default: m.ClaudeChat,
       })),
-    config: claudeChatConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/claude-chat/config").then(
+        (m) => m.claudeChatConfig,
+      ),
   },
   "chat-gpt": {
     load: () =>
       import("@/registry/remocn/chat-gpt").then((m) => ({
         default: m.ChatGpt,
       })),
-    config: chatGptConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/chat-gpt/config").then((m) => m.chatGptConfig),
   },
   v0: {
     load: () => import("@/registry/remocn/v0").then((m) => ({ default: m.V0 })),
-    config: v0Config,
+    loadConfig: () =>
+      import("@/registry/remocn/v0/config").then((m) => m.v0Config),
   },
   "claude-code": {
     load: () =>
       import("@/registry/remocn/claude-code").then((m) => ({
         default: m.ClaudeCode,
       })),
-    config: claudeCodeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/claude-code/config").then(
+        (m) => m.claudeCodeConfig,
+      ),
   },
   opencode: {
     load: () =>
       import("@/registry/remocn/opencode").then((m) => ({
         default: m.OpenCode,
       })),
-    config: opencodeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/opencode/config").then((m) => m.opencodeConfig),
   },
   button: {
     load: () =>
       import("@/registry/remocn-ui/button").then((m) => ({
         default: m.Button,
       })),
-    config: buttonConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/button/config").then((m) => m.buttonConfig),
   },
   accordion: {
     load: () =>
       import("@/registry/remocn-ui/accordion").then((m) => ({
         default: m.Accordion,
       })),
-    config: accordionConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/accordion/config").then(
+        (m) => m.accordionConfig,
+      ),
   },
   "alert-dialog": {
     load: () =>
       import("@/registry/remocn-ui/alert-dialog").then((m) => ({
         default: m.AlertDialog,
       })),
-    config: alertDialogConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/alert-dialog/config").then(
+        (m) => m.alertDialogConfig,
+      ),
   },
   dialog: {
     load: () =>
       import("@/registry/remocn-ui/dialog").then((m) => ({
         default: m.Dialog,
       })),
-    config: dialogConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/dialog/config").then((m) => m.dialogConfig),
   },
   sheet: {
     load: () =>
       import("@/registry/remocn-ui/sheet").then((m) => ({ default: m.Sheet })),
-    config: sheetConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/sheet/config").then((m) => m.sheetConfig),
   },
   drawer: {
     load: () =>
       import("@/registry/remocn-ui/drawer").then((m) => ({
         default: m.Drawer,
       })),
-    config: drawerConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/drawer/config").then((m) => m.drawerConfig),
   },
   checkbox: {
     load: () =>
       import("@/registry/remocn-ui/checkbox").then((m) => ({
         default: m.Checkbox,
       })),
-    config: checkboxConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/checkbox/config").then(
+        (m) => m.checkboxConfig,
+      ),
   },
   input: {
     load: () =>
       import("@/registry/remocn-ui/input").then((m) => ({ default: m.Input })),
-    config: inputConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/input/config").then((m) => m.inputConfig),
   },
   // blur-in WRAPS a single child, so the customizer Component is the
   // preview-only BlurInPreview wrapper (it supplies a fixed sample card and
@@ -1863,52 +2253,66 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/blur-in/preview").then((m) => ({
         default: m.BlurInPreview,
       })),
-    config: blurInConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/blur-in/config").then((m) => m.blurInConfig),
   },
   radio: {
     load: () =>
       import("@/registry/remocn-ui/radio").then((m) => ({ default: m.Radio })),
-    config: radioConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/radio/config").then((m) => m.radioConfig),
   },
   switch: {
     load: () =>
       import("@/registry/remocn-ui/switch").then((m) => ({
         default: m.Switch,
       })),
-    config: switchConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/switch/config").then((m) => m.switchConfig),
   },
   select: {
     load: () =>
       import("@/registry/remocn-ui/select").then((m) => ({
         default: m.Select,
       })),
-    config: selectConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/select/config").then((m) => m.selectConfig),
   },
   "select-item": {
     load: () =>
       import("@/registry/remocn-ui/select-item").then((m) => ({
         default: m.SelectItem,
       })),
-    config: selectItemConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/select-item/config").then(
+        (m) => m.selectItemConfig,
+      ),
   },
   "dropdown-menu": {
     load: () =>
       import("@/registry/remocn-ui/dropdown-menu").then((m) => ({
         default: m.DropdownMenu,
       })),
-    config: dropdownMenuConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/dropdown-menu/config").then(
+        (m) => m.dropdownMenuConfig,
+      ),
   },
   "dropdown-menu-item": {
     load: () =>
       import("@/registry/remocn-ui/dropdown-menu-item").then((m) => ({
         default: m.DropdownMenuItem,
       })),
-    config: dropdownMenuItemConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/dropdown-menu-item/config").then(
+        (m) => m.dropdownMenuItemConfig,
+      ),
   },
   tabs: {
     load: () =>
       import("@/registry/remocn-ui/tabs").then((m) => ({ default: m.Tabs })),
-    config: tabsConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/tabs/config").then((m) => m.tabsConfig),
   },
   // cursor's customizer Component is the preview-only CursorPreview wrapper (it
   // runs a fixed demo path through useCursorPath); the shipped Cursor is pure.
@@ -1917,7 +2321,8 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/cursor/preview").then((m) => ({
         default: m.CursorPreview,
       })),
-    config: cursorConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/cursor/config").then((m) => m.cursorConfig),
   },
   // toast's customizer Component is the preview-only ToastPreview wrapper (it
   // centers the toast on a theme-background stage); the shipped Toast is a
@@ -1927,28 +2332,38 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/toast/preview").then((m) => ({
         default: m.ToastPreview,
       })),
-    config: toastConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/toast/config").then((m) => m.toastConfig),
   },
   "message-bubble": {
     load: () =>
       import("@/registry/remocn-ui/message-bubble/preview").then((m) => ({
         default: m.MessageBubblePreview,
       })),
-    config: messageBubbleConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/message-bubble/config").then(
+        (m) => m.messageBubbleConfig,
+      ),
   },
   "typing-indicator": {
     load: () =>
       import("@/registry/remocn-ui/typing-indicator/preview").then((m) => ({
         default: m.TypingIndicatorPreview,
       })),
-    config: typingIndicatorConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/typing-indicator/config").then(
+        (m) => m.typingIndicatorConfig,
+      ),
   },
   "command-menu-item": {
     load: () =>
       import("@/registry/remocn-ui/command-menu-item").then((m) => ({
         default: m.CommandMenuItem,
       })),
-    config: commandMenuItemConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/command-menu-item/config").then(
+        (m) => m.commandMenuItemConfig,
+      ),
   },
   // command-menu needs NO preview wrapper: like dialog it renders an intrinsic
   // inset:0 backdrop + centered panel, so the customizer mounts it directly.
@@ -1957,7 +2372,10 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/command-menu").then((m) => ({
         default: m.CommandMenu,
       })),
-    config: commandMenuConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/command-menu/config").then(
+        (m) => m.commandMenuConfig,
+      ),
   },
   // tooltip's customizer Component is the preview-only TooltipPreview wrapper: a
   // bare bubble has no backdrop and would not center as the composition root.
@@ -1966,7 +2384,10 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/tooltip/preview").then((m) => ({
         default: m.TooltipPreview,
       })),
-    config: tooltipConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/tooltip/config").then(
+        (m) => m.tooltipConfig,
+      ),
   },
   // progress's customizer Component is the preview-only ProgressPreview wrapper:
   // a bare inline bar would sit top-left, so the wrapper centers it on a stage.
@@ -1975,7 +2396,10 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/progress/preview").then((m) => ({
         default: m.ProgressPreview,
       })),
-    config: progressConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/progress/config").then(
+        (m) => m.progressConfig,
+      ),
   },
   // skeleton-block is the shimmer motion atom; its preview centers the bare block
   // on a stage. skeleton is the state atom whose preview supplies demo content +
@@ -1985,14 +2409,20 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/skeleton-block/preview").then((m) => ({
         default: m.SkeletonBlockPreview,
       })),
-    config: skeletonBlockConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/skeleton-block/config").then(
+        (m) => m.skeletonBlockConfig,
+      ),
   },
   skeleton: {
     load: () =>
       import("@/registry/remocn-ui/skeleton/preview").then((m) => ({
         default: m.SkeletonPreview,
       })),
-    config: skeletonConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/skeleton/config").then(
+        (m) => m.skeletonConfig,
+      ),
   },
   // slider's customizer Component is the preview-only SliderPreview wrapper: a
   // bare inline bar would sit top-left, so the wrapper centers it on a stage.
@@ -2001,7 +2431,8 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/slider/preview").then((m) => ({
         default: m.SliderPreview,
       })),
-    config: sliderConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/slider/config").then((m) => m.sliderConfig),
   },
   // combobox registers RAW (no preview wrapper): like select it paints its own
   // opaque inset:0 wrapper, so the customizer mounts it directly and it centers.
@@ -2010,7 +2441,10 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/combobox").then((m) => ({
         default: m.Combobox,
       })),
-    config: comboboxConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/combobox/config").then(
+        (m) => m.comboboxConfig,
+      ),
   },
   // popover's customizer Component is the preview-only PopoverPreview wrapper: a
   // bare card has no backdrop and would not center as the composition root.
@@ -2019,7 +2453,10 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/popover/preview").then((m) => ({
         default: m.PopoverPreview,
       })),
-    config: popoverConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/popover/config").then(
+        (m) => m.popoverConfig,
+      ),
   },
   // context-menu's customizer Component is the preview-only ContextMenuPreview
   // wrapper: a bare panel (transparent, caller-positioned) would sit top-left,
@@ -2029,7 +2466,10 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/context-menu/preview").then((m) => ({
         default: m.ContextMenuPreview,
       })),
-    config: contextMenuConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/context-menu/config").then(
+        (m) => m.contextMenuConfig,
+      ),
   },
   // toggle-group registers RAW (no preview wrapper): like tabs it paints its own
   // opaque inset:0 centered stage, so the customizer mounts it directly.
@@ -2038,7 +2478,10 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/toggle-group").then((m) => ({
         default: m.ToggleGroup,
       })),
-    config: toggleGroupConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/toggle-group/config").then(
+        (m) => m.toggleGroupConfig,
+      ),
   },
   // stepper's customizer Component is the preview-only StepperPreview wrapper: a
   // bare wide horizontal element would sit top-left, so the wrapper centers it.
@@ -2047,7 +2490,10 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/stepper/preview").then((m) => ({
         default: m.StepperPreview,
       })),
-    config: stepperConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/stepper/config").then(
+        (m) => m.stepperConfig,
+      ),
   },
   // resizable registers RAW (no preview wrapper): its index.tsx already paints
   // an opaque inset:0 stage that centers the fixed-size bordered box, like tabs.
@@ -2056,231 +2502,120 @@ const registry: Record<string, RegistryEntry> = {
       import("@/registry/remocn-ui/resizable").then((m) => ({
         default: m.Resizable,
       })),
-    config: resizableConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/resizable/config").then(
+        (m) => m.resizableConfig,
+      ),
   },
   spinner: {
     load: () =>
       import("@/registry/remocn-ui/spinner").then((m) => ({
         default: m.Spinner,
       })),
-    config: spinnerConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/spinner/config").then(
+        (m) => m.spinnerConfig,
+      ),
   },
   caret: {
     load: () =>
       import("@/registry/remocn-ui/caret/preview").then((m) => ({
         default: m.CaretPreview,
       })),
-    config: caretConfig,
+    loadConfig: () =>
+      import("@/registry/remocn-ui/caret/config").then((m) => m.caretConfig),
   },
   "ascii-dissolve": {
     load: () =>
       import("@/components/docs/examples/ascii-dissolve-example").then((m) => ({
         default: m.AsciiDissolveExampleScene,
       })),
-    config: asciiDissolveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/ascii-dissolve/config").then(
+        (m) => m.asciiDissolveConfig,
+      ),
   },
   "caret-wipe": {
     load: () =>
       import("@/components/docs/examples/caret-wipe-example").then((m) => ({
         default: m.CaretWipeExampleScene,
       })),
-    config: caretWipeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/caret-wipe/config").then(
+        (m) => m.caretWipeConfig,
+      ),
   },
   "icon-scatter": {
     load: () =>
       import("@/components/docs/examples/icon-scatter-example").then((m) => ({
         default: m.IconScatterExampleScene,
       })),
-    config: iconScatterConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/icon-scatter/config").then(
+        (m) => m.iconScatterConfig,
+      ),
   },
   "shader-caustics": {
     load: () =>
       import("@/registry/remocn/shader-caustics").then((m) => ({
         default: m.ShaderCaustics,
       })),
-    config: shaderCausticsConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-caustics/config").then(
+        (m) => m.shaderCausticsConfig,
+      ),
   },
   "shader-gem-smoke": {
     load: () =>
       import("@/registry/remocn/shader-gem-smoke").then((m) => ({
         default: m.ShaderGemSmoke,
       })),
-    config: shaderGemSmokeConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-gem-smoke/config").then(
+        (m) => m.shaderGemSmokeConfig,
+      ),
   },
   "shader-strata": {
     load: () =>
       import("@/registry/remocn/shader-strata").then((m) => ({
         default: m.ShaderStrata,
       })),
-    config: shaderStrataConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-strata/config").then(
+        (m) => m.shaderStrataConfig,
+      ),
   },
   "shader-weave": {
     load: () =>
       import("@/registry/remocn/shader-weave").then((m) => ({
         default: m.ShaderWeave,
       })),
-    config: shaderWeaveConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/shader-weave/config").then(
+        (m) => m.shaderWeaveConfig,
+      ),
   },
   reel: {
     load: () =>
       import("@/components/docs/examples/reel-example").then((m) => ({
         default: m.ReelExampleScene,
       })),
-    config: reelConfig,
+    loadConfig: () =>
+      import("@/registry/remocn/reel/config").then((m) => m.reelConfig),
   },
 };
 
-// Append the shared controls (e.g. `speed`) to every component config so
-// every animation in the customizer exposes the same baseline knobs.
-for (const { config } of Object.values(registry)) {
-  config.controls = { ...config.controls, ...SHARED_CONTROLS };
-}
-
-const backdrop = registry.backdrop;
-if (backdrop) {
-  delete backdrop.config.controls.speed;
-}
-
-// github-stars must land its count-up exactly on the final frame. A speed < 1
-// would stop the shared progress driver short (the count never reaches the
-// total), so this component intentionally deviates from SHARED_CONTROLS and
-// caps `speed` at a minimum of 1. Reassigning the existing key keeps its order.
-const githubStars = registry["github-stars"];
-if (githubStars) {
-  githubStars.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
-
-// github-sponsors plays its heart draw, avatar blur-stagger, and headline/CTA
-// off the shared progress timeline; a speed < 1 would stall the driver before
-// the lockup completes, so cap min:1 like github-stars.
-const githubSponsors = registry["github-sponsors"];
-if (githubSponsors) {
-  githubSponsors.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
-
-const numberWheel = registry["number-wheel"];
-if (numberWheel) {
-  numberWheel.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
-
-const rollingNumber = registry["rolling-number"];
-if (rollingNumber) {
-  rollingNumber.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
-
-const xFollowCard = registry["x-follow-card"];
-if (xFollowCard) {
-  xFollowCard.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
-
-// x-followers-overview cycles notifications then blur-reveals the total at a
-// fixed point in the timeline. A speed < 1 would stall the driver before the
-// reveal frame, so cap min:1 like github-stars.
-const xFollowersOverview = registry["x-followers-overview"];
-if (xFollowersOverview) {
-  xFollowersOverview.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
-
-const claudeChat = registry["claude-chat"];
-if (claudeChat) {
-  claudeChat.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
-
-const chatGpt = registry["chat-gpt"];
-if (chatGpt) {
-  chatGpt.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
-
-const v0 = registry.v0;
-if (v0) {
-  v0.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
-
-const claudeCode = registry["claude-code"];
-if (claudeCode) {
-  claudeCode.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
-}
+const configCache = new Map<string, Promise<ComponentConfig>>();
 
-const opencode = registry.opencode;
-if (opencode) {
-  opencode.config.controls.speed = {
-    type: "number",
-    default: 1,
-    min: 1,
-    max: 4,
-    step: 0.25,
-    label: "Speed",
-  };
+export function loadComponentConfig(slug: string): Promise<ComponentConfig> {
+  let promise = configCache.get(slug);
+  if (!promise) {
+    const entry = registry[slug];
+    if (!entry) throw new Error(`Unknown registry entry: ${slug}`);
+    promise = entry.loadConfig().then((config) => resolveConfig(slug, config));
+    configCache.set(slug, promise);
+  }
+  return promise;
 }
 
 export default registry;
diff --git a/registry/__manifest__.ts b/registry/__manifest__.ts
new file mode 100644
index 00000000..4b551f48
--- /dev/null
+++ b/registry/__manifest__.ts
@@ -0,0 +1,4095 @@
+// GENERATED FILE — do not edit by hand.
+// Run `bun run manifest:build` after changing any registry config.
+//
+// The playback slice of every registry config: everything a preview needs to
+// mount a Player, and nothing it needs only to render the customizer panel.
+// Consumers that just play a component (cards, changelog, icon gallery) read
+// this instead of importing 263 config modules into the client bundle.
+
+import type { BackdropFill } from "@/registry/remocn/backdrop";
+
+export interface PreviewManifestEntry {
+  durationInFrames: number;
+  fps: number;
+  compositionWidth: number;
+  compositionHeight: number;
+  previewBackdrop?: BackdropFill;
+  defaults: Record<string, unknown>;
+}
+
+export const previewManifest: Record<string, PreviewManifestEntry> = {
+  accordion: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      title: "Is it accessible?",
+      content: "Yes. It adheres to the WAI-ARIA design pattern.",
+      variant: "default",
+      state: "opened",
+      speed: 1,
+    },
+  },
+  "alert-dialog": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      title: "Delete account?",
+      description:
+        "This action cannot be undone. This will permanently remove your data from our servers.",
+      actionLabel: "Delete",
+      cancelLabel: "Cancel",
+      state: "opened",
+      speed: 1,
+    },
+  },
+  "animated-bar-chart": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      barColor: "#0ea5e9",
+      gap: 16,
+      staggerFrames: 6,
+      speed: 1,
+    },
+  },
+  "animated-line-chart": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      strokeColor: "#22c55e",
+      strokeWidth: 4,
+      gridColor: "#27272a",
+      showDot: true,
+      speed: 1,
+    },
+  },
+  "ascii-dissolve": {
+    durationInFrames: 100,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0d0d10",
+    },
+    defaults: {
+      colorBack: "#0d0d10",
+      colorFront: "#f2f2f2",
+      cellSize: 22,
+      speed: 1,
+    },
+  },
+  "ascii-render": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      glyphSize: 26,
+      charset: " .:-=+*#%@",
+      colored: false,
+      ink: "#9dff9d",
+      intensity: 1,
+      speed: 1,
+    },
+  },
+  backdrop: {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      fillType: "gradient",
+      color: "#6366f1",
+      gradient: "linear-gradient(135deg, #6366f1 0%, #a855f7 100%)",
+      image: "/hero.png",
+      padding: 4,
+      radius: 1,
+      shadow: "0 20px 60px rgba(0,0,0,0.4)",
+    },
+  },
+  "blur-in": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      state: "revealed",
+      blur: 8,
+      distance: 12,
+      direction: "up",
+      speed: 1,
+    },
+  },
+  "blur-out-up": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Clear in, airy out.",
+      staggerDelay: 1,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "bottom-up-letters": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Shift",
+      staggerDelay: 3,
+      distance: 46,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  button: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "Continue",
+      variant: "default",
+      size: "default",
+      state: "loading",
+      primary: "#171717",
+      speed: 1,
+    },
+  },
+  "camera-lens": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      softness: 0.5,
+      bloom: 0.5,
+      aberration: 0.5,
+      vignette: 0.5,
+      distortion: 0.05,
+      speed: 1,
+    },
+  },
+  caret: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      height: 28,
+      width: 3,
+      radius: 1,
+      blink: true,
+      blinkPerSecond: 1,
+      color: "#1F1E1D",
+      speed: 1,
+    },
+  },
+  "caret-wipe": {
+    durationInFrames: 100,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0d0d10",
+    },
+    defaults: {
+      direction: "right",
+      caretColor: "#C3E88D",
+      caretWidth: 3,
+      speed: 1,
+    },
+  },
+  "chat-gpt": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#FFFFFF",
+    },
+    defaults: {
+      greeting: "What's on your mind today?",
+      placeholder: "Ask anything",
+      prompt: "Make a sunset over a calm ocean",
+      accentColor: "#2F6FED",
+      speed: 1,
+    },
+  },
+  "chat-to-preview-layout": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      startChatRatio: 0.5,
+      endChatRatio: 0.25,
+      speed: 1,
+    },
+  },
+  "check-list": {
+    durationInFrames: 360,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      fontSize: 40,
+      itemGap: 18,
+      closeGap: 9,
+      perStep: 1.6,
+      strokeWidth: 3,
+      color: "#26242c",
+      tickColor: "#6f7f35",
+      step: 3,
+      speed: 1,
+    },
+  },
+  checkbox: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "",
+      size: "default",
+      state: "checked",
+      primary: "#171717",
+      speed: 1,
+    },
+  },
+  "claude-chat": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#F5F4EF",
+    },
+    defaults: {
+      greeting: "Back at it, Dima",
+      placeholder: "Try: draft an email · summarize a doc · plan your week",
+      prompt: "Draft a launch tweet for our new release",
+      modelName: "Opus 4.8",
+      modelTier: "Max",
+      accentColor: "#D97757",
+      speed: 1,
+    },
+  },
+  "claude-code": {
+    durationInFrames: 160,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#2B2A28",
+    },
+    defaults: {
+      title: "Claude Code v2.0.0",
+      userName: "Remocn",
+      model: "Opus 4.8 • Max 20x",
+      cwd: "/users/remocn/code/apps",
+      placeholder: 'Try "edit <filepath> to ..."',
+      prompt: "edit src/theme.ts to add a dark mode toggle",
+      accentColor: "#D97757",
+      speed: 1,
+    },
+  },
+  combobox: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      state: "opened",
+      query: "",
+      revealCount: 0,
+      placeholder: "Select a fruit…",
+      selectedIndex: -1,
+      highlightedIndex: 0,
+      speed: 1,
+    },
+  },
+  "command-menu": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      state: "opened",
+      query: "",
+      revealCount: 0,
+      selectedIndex: -1,
+      highlightedIndex: 0,
+      speed: 1,
+    },
+  },
+  "command-menu-item": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "Settings",
+      icon: "settings",
+      shortcut: "⌘ S",
+      state: "selected",
+      speed: 1,
+    },
+  },
+  confetti: {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      particleCount: 140,
+      power: 17,
+      gravity: 0.45,
+      size: 13,
+      seed: 1,
+      speed: 1,
+    },
+  },
+  "context-menu": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      state: "opened",
+      highlightedIndex: 1,
+      speed: 1,
+    },
+  },
+  "crt-screen": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      curvature: 1,
+      scanlines: 1,
+      maskScale: 2,
+      vignette: 1,
+      speed: 1,
+    },
+  },
+  "crumple-toss": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      at: 6,
+      crumpleSteps: 4,
+      tossSteps: 5,
+      direction: -35,
+      distance: 440,
+      spin: 220,
+      segments: 9,
+      layers: 2,
+      randomness: 0.6,
+      crushTo: 0.34,
+      seed: "toss",
+      step: 3,
+      speed: 1,
+    },
+  },
+  cursor: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      variant: "arrow",
+      size: 28,
+      rippleColor: "#171717",
+      speed: 1,
+    },
+  },
+  "data-flow-pipes": {
+    durationInFrames: 180,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#050505",
+    },
+    defaults: {
+      pipeColor: "#1f1f23",
+      pulseColor: "#22d3ee",
+      pulseLength: 60,
+      pulseDuration: 36,
+      nodeColor: "#0a0a0a",
+      textColor: "#fafafa",
+      speed: 1,
+    },
+  },
+  dialog: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      title: "Edit profile",
+      description:
+        "Make changes to your profile here. Click save when you're done.",
+      actionLabel: "Save changes",
+      cancelLabel: "Cancel",
+      state: "opened",
+      speed: 1,
+    },
+  },
+  displacement: {
+    durationInFrames: 72,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      grid: 60,
+      cellAspect: 1,
+      shift: 1,
+      aberration: 1,
+      grain: 0.5,
+      stagger: 0.45,
+      speed: 1,
+    },
+  },
+  "dither-dissolve": {
+    durationInFrames: 100,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      shape: "simplex",
+      colorBack: "#141318",
+      colorFront: "#8f88ae",
+      speed: 1,
+    },
+  },
+  drawer: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      title: "Edit profile",
+      description:
+        "Make changes to your profile here. Click save when you're done.",
+      actionLabel: "Save changes",
+      cancelLabel: "Cancel",
+      state: "opened",
+      speed: 1,
+    },
+  },
+  drift: {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      grow: 0.035,
+      speed: 1,
+    },
+  },
+  "dropdown-menu": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "Options",
+      state: "opened",
+      highlightedIndex: 0,
+      speed: 1,
+    },
+  },
+  "dropdown-menu-item": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "Profile",
+      state: "hover",
+      speed: 1,
+    },
+  },
+  "ecosystem-constellation": {
+    durationInFrames: 240,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "gradient",
+      value: "radial-gradient(ellipse at center, #14101e 0%, #05030a 75%)",
+    },
+    defaults: {
+      satelliteCount: 6,
+      centerLabel: "V",
+      accentColor: "#a855f7",
+      speed: 1,
+    },
+  },
+  "ember-burn": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      patches: 5,
+      edgeSoftness: 0.07,
+      contentBias: 0.6,
+      heat: 0.5,
+      glowColor: "#ff7a2f",
+      emberAmount: 0.5,
+      speed: 1,
+    },
+  },
+  "fade-through": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      fromText: "Calm transitions.",
+      toText: "Fade through content.",
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "focus-blur-resolve": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Focus resolves clearly.",
+      blur: 14,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "focus-pull": {
+    durationInFrames: 114,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      blur: 16,
+      speed: 1,
+    },
+  },
+  "github-sponsors": {
+    durationInFrames: 270,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      account: "remocn",
+      accentColor: "#db61a2",
+      theme: "light",
+      speed: 1,
+    },
+  },
+  "github-stars": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      repo: "Remocn/remocn",
+      totalStars: 24813,
+      orientation: "horizontal",
+      accentColor: "#ffbb00",
+      theme: "light",
+      speed: 1,
+    },
+  },
+  "glass-code-block": {
+    durationInFrames: 180,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "image",
+      src: "/bg.jpg",
+    },
+    defaults: {
+      title: "hero.tsx",
+      width: 760,
+      height: 460,
+      fontSize: 16,
+      glassColor: "rgba(10, 10, 10, 0.6)",
+      staggerFrames: 4,
+      showTrafficLights: true,
+      speed: 1,
+    },
+  },
+  "glass-code-walk": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "image",
+      src: "/bg.jpg",
+    },
+    defaults: {
+      title: "scene.tsx",
+      zoom: 2.6,
+      fontSize: 18,
+      staggerFrames: 10,
+      width: 880,
+      height: 420,
+      speed: 1,
+    },
+  },
+  "glitch-cut": {
+    durationInFrames: 78,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      intensity: 1,
+      slices: 24,
+      rgbSplit: 1,
+      blockNoise: 0.6,
+      speed: 1,
+    },
+  },
+  "grain-dissolve": {
+    durationInFrames: 116,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      shape: "blob",
+      noise: 0.3,
+      zoom: 2,
+      colorBack: "#141318",
+      speed: 1,
+    },
+  },
+  "grid-wave": {
+    durationInFrames: 84,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      tileSize: 90,
+      waveWidth: 0.16,
+      lift: 2,
+      gap: 0.12,
+      tint: "#8fb4ff",
+      direction: "ripple",
+      speed: 1,
+    },
+  },
+  "halftone-print": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#26231d",
+    },
+    defaults: {
+      dotSize: 10,
+      angle: 0,
+      misregistration: 1.2,
+      paperTint: "#f4efe4",
+      speed: 1,
+    },
+  },
+  "hand-count": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      to: 1284,
+      from: 0,
+      durationSteps: 18,
+      decimals: 0,
+      prefix: "",
+      suffix: "",
+      fontSize: 96,
+      color: "#26242c",
+      ease: "in-out",
+      seed: "count",
+      step: 3,
+      speed: 1,
+    },
+  },
+  handwrite: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      text: "Made by hand",
+      fontSize: 72,
+      perStep: 1.6,
+      weight: "600",
+      color: "#26242c",
+      align: "center",
+      step: 3,
+      speed: 1,
+    },
+  },
+  hologram: {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#04070d",
+    },
+    defaults: {
+      tint: "#63e8ff",
+      glow: 1,
+      ghost: 1,
+      flicker: 1,
+      intensity: 1,
+      speed: 1,
+    },
+  },
+  "icon-activity": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: true,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-alert-triangle": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-arrow-down": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-arrow-left": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-arrow-right": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-arrow-up": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-at-sign": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-award": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-bar-chart-3": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-bell": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-bookmark": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-calendar": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-camera": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-check": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-check-circle": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-chevron-down": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-chevron-left": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-chevron-right": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-chevron-up": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-clock": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: true,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-cloud": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-code": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-copy": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-credit-card": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-crown": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-database": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-dollar-sign": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-download": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-external-link": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-eye": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-eye-off": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-file-text": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-filter": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-flame": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: true,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-folder": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-gem": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-gift": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-globe": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: true,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-heart": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-help-circle": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-home": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-image": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-inbox": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-info": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-key": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-layout-grid": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-link": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-loader": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: true,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-lock": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-log-out": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-mail": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-maximize": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-menu": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-message-circle": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-mic": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-monitor": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-moon": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-more-horizontal": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-package": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-party-popper": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-pause": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-pencil": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-phone": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-play": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-plus": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-plus-circle": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-refresh-cw": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: true,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-rocket": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-save": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-scatter": {
+    durationInFrames: 100,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      count: 15,
+      color: "#fafafa",
+      coverColor: "#0a0a0a",
+      flyDistance: 260,
+      speed: 1,
+    },
+  },
+  "icon-search": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-send": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-settings": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-share-2": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-shield": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-shopping-cart": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-skip-forward": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-smartphone": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-sparkles": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: true,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-star": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-sun": {
+    durationInFrames: 85,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-tag": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-target": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-terminal": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-thumbs-up": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-timer": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-trash": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-trending-down": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-trending-up": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-trophy": {
+    durationInFrames: 85,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-upload": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-user": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-user-plus": {
+    durationInFrames: 75,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-users": {
+    durationInFrames: 80,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-video": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-volume-2": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-volume-x": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-wallet": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-x": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-x-circle": {
+    durationInFrames: 70,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "icon-zap": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 48,
+    compositionHeight: 48,
+    defaults: {
+      animation: "both",
+      loop: false,
+      size: 48,
+      color: "#171717",
+      strokeWidth: 2,
+      speed: 1,
+    },
+  },
+  "infinite-bento-pan": {
+    durationInFrames: 300,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#050505",
+    },
+    defaults: {
+      panSpeed: 1,
+      accentColor: "#7c3aed",
+      speed: 1,
+    },
+  },
+  "infinite-marquee": {
+    durationInFrames: 180,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#fafafa",
+    },
+    defaults: {
+      text: "ship · build · animate · ",
+      fontSize: 120,
+      color: "#171717",
+      fontWeight: "700",
+      pixelsPerFrame: 4,
+      stroke: false,
+      strokeColor: "#171717",
+      speed: 1,
+    },
+  },
+  "ink-arrow": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      curvature: 0.35,
+      strokeWidth: 8,
+      pressure: 0.2,
+      release: 1,
+      grain: 1,
+      headSize: 24,
+      drawDur: 36,
+      headDur: 12,
+      color: "#26242c",
+      seed: "arrow",
+      step: 3,
+      speed: 1,
+    },
+  },
+  "ink-underline": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      width: 420,
+      color: "#6f7f35",
+      thickness: 9,
+      pressure: 1,
+      release: 0.15,
+      grain: 1,
+      durationSteps: 5,
+      seed: "ink",
+      step: 3,
+      speed: 1,
+    },
+  },
+  "inline-highlight": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      before: "Ship faster with ",
+      highlight: "remocn",
+      after: ".",
+      baseColor: "#171717",
+      highlightColor: "#ff5e3a",
+      fontSize: 72,
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  input: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      placeholder: "you@example.com",
+      value: "remotion@remocn.dev",
+      size: "default",
+      state: "typing",
+      primary: "#171717",
+      speed: 1,
+    },
+  },
+  "kinetic-center-build": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Words push left.",
+      entryOffset: 88,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "line-by-line-slide": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Think different.\nDo more.",
+      distance: 48,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "live-code-compilation": {
+    durationInFrames: 260,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      accentColor: "#3b82f6",
+      speed: 1,
+    },
+  },
+  "logo-enter": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      diameter: 118,
+      overlap: 38,
+      ringColor: "#fff",
+      orientation: "horizontal",
+      stagger: 7,
+      speed: 1,
+    },
+  },
+  "marker-highlight": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      before: "Made for ",
+      highlight: "builders",
+      after: ".",
+      markerColor: "#facc15",
+      baseColor: "#171717",
+      highlightedTextColor: "#171717",
+      fontSize: 72,
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "mask-reveal-up": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Designed to move.\nBuilt to focus.",
+      distance: 30,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "matrix-decode": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      text: "DECRYPTED",
+      charset: "!@#$%^&*()_+-=<>?/\\|",
+      fontSize: 72,
+      color: "#22c55e",
+      fontWeight: "600",
+      revealDuration: 60,
+      speed: 1,
+    },
+  },
+  "message-bubble": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      text: "Yep, pushing it live now",
+      variant: "incoming",
+      reaction: "🔥",
+      state: "visible",
+      speed: 1,
+    },
+  },
+  "micro-scale-fade": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Welcome to motion.",
+      scaleFrom: 0.96,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "number-wheel": {
+    durationInFrames: 112,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      from: 0,
+      to: 24813,
+      fontSize: 120,
+      color: "#171717",
+      speed: 1,
+    },
+  },
+  opencode: {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#000000",
+    },
+    defaults: {
+      placeholder: "Ask anything... ",
+      query: '"What is the tech stack of this project?"',
+      agentName: "Build",
+      modelName: "Kimi K2.5",
+      provider: "Moonshot AI",
+      accentColor: "#2B7FFF",
+      speed: 1,
+    },
+  },
+  "page-turn": {
+    durationInFrames: 128,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      angle: -7,
+      poses: 8,
+      speed: 1,
+    },
+  },
+  "paper-sticker": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      at: 0,
+      padding: "10px 16px",
+      background: "#fbfaf6",
+      maxTilt: 2.6,
+      seed: "sticker",
+      step: 3,
+      speed: 1,
+    },
+  },
+  "paper-wobble": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      amp: 1.4,
+      rotAmp: 0.35,
+      seed: "wobble",
+      step: 3,
+      speed: 1,
+    },
+  },
+  "particle-dissolve": {
+    durationInFrames: 84,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      particleSize: 4,
+      scatter: 0.08,
+      shimmer: 0.6,
+      aberration: 0.5,
+      direction: "reveal",
+      stagger: 0.55,
+      speed: 1,
+    },
+  },
+  "per-character-rise": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "One more thing.",
+      distance: 32,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "per-word-crossfade": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      fromText: "Beautifully simple.",
+      toText: "Designed for focus.",
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "perlin-dissolve": {
+    durationInFrames: 116,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      colorFront: "#8f88ae",
+      colorBack: "#141318",
+      softness: 0.1,
+      speed: 1,
+    },
+  },
+  "perspective-marquee": {
+    durationInFrames: 240,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#050505",
+    },
+    defaults: {
+      fontSize: 84,
+      color: "#fafafa",
+      fontWeight: "700",
+      pixelsPerFrame: 2,
+      rotateY: -28,
+      rotateX: 8,
+      perspective: 1200,
+      fadeColor: "#050505",
+      speed: 1,
+    },
+  },
+  "pixelate-region": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      cellSize: 24,
+      speed: 1,
+    },
+  },
+  polaroid: {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      caption: "first light",
+      captionAt: 0,
+      width: 652,
+      captionSize: 36,
+      step: 3,
+      speed: 1,
+    },
+  },
+  popover: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      title: "Dimensions",
+      description: "Set the dimensions for the layer.",
+      side: "bottom",
+      width: 288,
+      state: "opened",
+      speed: 1,
+    },
+  },
+  progress: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      value: 62,
+      width: 320,
+      showLabel: true,
+      speed: 1,
+    },
+  },
+  "progress-steps": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      orientation: "horizontal",
+      activeColor: "#22c55e",
+      inactiveColor: "#27272a",
+      textColor: "#ffffff",
+      stepDuration: 30,
+      speed: 1,
+    },
+  },
+  "push-through": {
+    durationInFrames: 112,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      zoom: 2.4,
+      blur: 14,
+      speed: 1,
+    },
+  },
+  radio: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "",
+      size: "default",
+      state: "checked",
+      primary: "#171717",
+      speed: 1,
+    },
+  },
+  reel: {
+    durationInFrames: 160,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0b0b0c",
+    },
+    defaults: {
+      width: 1180,
+      height: 676,
+      radius: 16,
+      step: 20,
+      reveal: 13,
+      speed: 1,
+    },
+  },
+  resizable: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      ratio: 0.5,
+      handleState: "idle",
+      direction: "horizontal",
+      speed: 1,
+    },
+  },
+  "rgb-glitch-text": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      text: "GLITCH",
+      fontSize: 96,
+      color: "#171717",
+      fontWeight: "700",
+      glitchAt: 20,
+      glitchDuration: 8,
+      intensity: 6,
+      seed: "glitch",
+      speed: 1,
+    },
+  },
+  "ripple-zoom": {
+    durationInFrames: 116,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      zoom: 4,
+      intensity: 0.5,
+      softness: 0.5,
+      colorBack: "#141318",
+      speed: 1,
+    },
+  },
+  "rolling-number": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      from: 0,
+      to: 24813,
+      fontSize: 120,
+      color: "#171717",
+      speed: 1,
+    },
+  },
+  "rolodex-flip": {
+    durationInFrames: 110,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      interval: 20,
+      flipDuration: 10,
+      speed: 1,
+    },
+  },
+  "scale-down-fade": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Quietly refined.",
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "scribble-circle": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f1eee7",
+    },
+    defaults: {
+      laps: 1.15,
+      strokeWidth: 14,
+      pressure: 0.2,
+      grain: 1,
+      durationSteps: 10,
+      color: "#6f7f35",
+      seed: "scribble",
+      step: 3,
+      speed: 1,
+    },
+  },
+  "security-cam": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      compression: 0.7,
+      blockSize: 10,
+      noise: 0.6,
+      intensity: 1,
+      speed: 1,
+    },
+  },
+  select: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "Select a fruit",
+      state: "opened",
+      selectedIndex: 1,
+      highlightedIndex: -1,
+      speed: 1,
+    },
+  },
+  "select-item": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "Banana",
+      state: "selected",
+      speed: 1,
+    },
+  },
+  "shader-caustics": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      scale: 5.2,
+      intensity: 1,
+      accent: "#7F57FF",
+      accentAmount: 0,
+    },
+  },
+  "shader-color-panels": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      density: 3,
+      length: 1.1,
+      colorBack: "#12121a",
+    },
+  },
+  "shader-dithering": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      size: 2,
+      colorBack: "#12121a",
+      colorFront: "#6a6a85",
+    },
+  },
+  "shader-dot-orbit": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      size: 1,
+      spreading: 1,
+      colorBack: "#12121a",
+    },
+  },
+  "shader-gem-smoke": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      colorBack: "#0a0a10",
+      innerDistortion: 0.8,
+      outerDistortion: 0.6,
+      size: 0.8,
+    },
+  },
+  "shader-god-rays": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      intensity: 0.8,
+      density: 0.3,
+      bloom: 0.4,
+      colorBack: "#12121a",
+    },
+  },
+  "shader-grain-gradient": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      softness: 0.6,
+      intensity: 0.2,
+      noise: 0.15,
+      colorBack: "#12121a",
+    },
+  },
+  "shader-liquid-metal": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      distortion: 0.1,
+      repetition: 1.5,
+      contour: 0.4,
+      colorBack: "#2a2a30",
+      colorTint: "#8a8a95",
+    },
+  },
+  "shader-mesh-gradient": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      distortion: 0.6,
+      swirl: 0.1,
+    },
+  },
+  "shader-metaballs": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      count: 10,
+      size: 0.83,
+      colorBack: "#12121a",
+    },
+  },
+  "shader-neuro-noise": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      brightness: 0.05,
+      contrast: 0.3,
+      colorBack: "#12121a",
+      colorMid: "#4a4a68",
+    },
+  },
+  "shader-perlin-noise": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      proportion: 0.35,
+      softness: 0.1,
+      colorBack: "#12121a",
+      colorFront: "#6a6a85",
+    },
+  },
+  "shader-pulsing-border": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      thickness: 0.1,
+      roundness: 0.25,
+      intensity: 0.2,
+      colorBack: "#12121a",
+    },
+  },
+  "shader-simplex-noise": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      stepsPerColor: 2,
+      softness: 0.1,
+    },
+  },
+  "shader-smoke-ring": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      radius: 0.25,
+      thickness: 0.65,
+      scale: 0.8,
+      colorBack: "#12121a",
+    },
+  },
+  "shader-spiral": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      density: 1,
+      strokeWidth: 0.5,
+      softness: 0.2,
+      colorBack: "#12121a",
+    },
+  },
+  "shader-strata": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      layers: 14,
+      amplitude: 0.16,
+      accent: "#6733FF",
+      accentAmount: 0,
+    },
+  },
+  "shader-swirl": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      bandCount: 4,
+      twist: 0.1,
+      softness: 0.2,
+      colorBack: "#12121a",
+    },
+  },
+  "shader-voronoi": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      distortion: 0.4,
+      gap: 0.04,
+      glow: 0,
+      colorGap: "#12121a",
+    },
+  },
+  "shader-warp": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      distortion: 0.2,
+      swirl: 0.4,
+      softness: 1,
+      proportion: 0.5,
+    },
+  },
+  "shader-water": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      waves: 0.3,
+      caustic: 0.08,
+      highlights: 0.06,
+      colorBack: "#16202b",
+    },
+  },
+  "shader-weave": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      speed: 1,
+      scale: 22,
+      warp: 0.03,
+      accent: "#6733FF",
+      accentAmount: 0,
+    },
+  },
+  "shared-axis-y": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      fromText: "Layered navigation.",
+      toText: "Hierarchy made clear.",
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "shared-axis-z": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      fromText: "Zooming between states.",
+      toText: "Elevate and settle.",
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  sheet: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      title: "Edit profile",
+      description:
+        "Make changes to your profile here. Click save when you're done.",
+      actionLabel: "Save changes",
+      cancelLabel: "Cancel",
+      state: "opened",
+      speed: 1,
+    },
+  },
+  "shimmer-sweep": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      text: "Generating",
+      baseColor: "#3f3f46",
+      shineColor: "#fafafa",
+      fontSize: 96,
+      fontWeight: "700",
+      speed: 1,
+    },
+  },
+  "short-slide-down": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Build from above.",
+      entryOffset: 28,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "short-slide-right": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Move with intent.",
+      distance: 24,
+      staggerDelay: 3,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "simulated-cursor": {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      color: "#ffffff",
+      size: 32,
+      speed: 1,
+    },
+  },
+  skeleton: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      layout: "card",
+      state: "loading",
+      speed: 1,
+    },
+  },
+  "skeleton-block": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      width: 240,
+      height: 20,
+      radius: 6,
+      speed: 1,
+    },
+  },
+  "slide-swap": {
+    durationInFrames: 210,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      axis: "x",
+      inDistance: 0.28,
+      outDistance: 0.1,
+      slideFrames: 30,
+      speed: 1,
+    },
+  },
+  slider: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      value: 40,
+      thumbState: "idle",
+      width: 320,
+      showValue: true,
+      speed: 1,
+    },
+  },
+  "slot-machine-roll": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      from: "$99",
+      to: "$199",
+      fontSize: 120,
+      color: "#171717",
+      fontWeight: "700",
+      speed: 1,
+    },
+  },
+  "smoke-dissolve": {
+    durationInFrames: 116,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      ringColor: "#8f88ae",
+      colorBack: "#141318",
+      speed: 1,
+    },
+  },
+  "soft-blur-in": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Think different.",
+      blur: 12,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  spinner: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      size: 20,
+      strokeWidth: 2.5,
+      speed: 1,
+    },
+  },
+  "spring-scale-in": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Fast. Crisp. Fluid.",
+      staggerDelay: 3,
+      scaleFrom: 0.7,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "spring-settle": {
+    durationInFrames: 213,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      enterScale: 1.24,
+      enterStagger: 3,
+      exitScale: 0.84,
+      exitFrames: 6,
+      speed: 1,
+    },
+  },
+  "staggered-fade-up": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      text: "Ship faster with remocn",
+      staggerDelay: 4,
+      distance: 20,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  stepper: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      activeIndex: 1,
+      speed: 1,
+    },
+  },
+  "strikethrough-replace": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      from: "$49/mo",
+      to: "Free",
+      lineColor: "#ff5e3a",
+      fontSize: 96,
+      color: "#171717",
+      fontWeight: "700",
+      speed: 1,
+    },
+  },
+  "sustained-glitch": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      intensity: 1,
+      frequency: 1,
+      slices: 24,
+      seed: 1,
+      speed: 1,
+    },
+  },
+  "swirl-dissolve": {
+    durationInFrames: 116,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      bandCount: 10,
+      softness: 0.35,
+      colorBack: "#141318",
+      speed: 1,
+    },
+  },
+  switch: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "",
+      size: "default",
+      state: "checked",
+      primary: "#171717",
+      speed: 1,
+    },
+  },
+  tabs: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      state: "Account",
+      variant: "pill",
+      speed: 1,
+    },
+  },
+  "terminal-cursor-zoom": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0B0B0C",
+    },
+    defaults: {
+      command: "npx shadcn add @remocn/terminal-cursor-zoom",
+      zoom: 2.8,
+      fontSize: 20,
+      prompt: "$",
+      title: "~/code/remocn-demo",
+      speed: 1,
+    },
+  },
+  "terminal-simulator": {
+    durationInFrames: 240,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#050505",
+    },
+    defaults: {
+      prompt: "$",
+      title: "~/projects/remocn",
+      background: "#0a0a0a",
+      chromeColor: "#1a1a1a",
+      fontSize: 18,
+      charsPerFrame: 1,
+      chunkSize: 1,
+      speed: 1,
+    },
+  },
+  toast: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      title: "Changes saved",
+      description: "Your profile has been updated.",
+      variant: "success",
+      state: "visible",
+      speed: 1,
+    },
+  },
+  "toggle-group": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      state: "Monthly",
+      size: "default",
+      speed: 1,
+    },
+  },
+  tooltip: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      label: "Add to library",
+      side: "top",
+      state: "visible",
+      speed: 1,
+    },
+  },
+  "top-down-letters": {
+    durationInFrames: 60,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      text: "Signal",
+      staggerDelay: 3,
+      distance: 46,
+      fontSize: 72,
+      color: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "tracking-in": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      text: "tracking in",
+      startTracking: 0.5,
+      startBlur: 12,
+      fontSize: 96,
+      color: "#171717",
+      fontWeight: "700",
+      speed: 1,
+    },
+  },
+  "tv-power-off": {
+    durationInFrames: 62,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#050505",
+    },
+    defaults: {
+      durationInFrames: 18,
+      gain: 1,
+      afterglow: 1,
+      phosphor: "#d8ecff",
+      speed: 1,
+    },
+  },
+  typewriter: {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    defaults: {
+      text: "console.log('hello, world')",
+      cursor: true,
+      charsPerSecond: 22,
+      fontSize: 72,
+      color: "#171717",
+      cursorColor: "#171717",
+      fontWeight: "600",
+      speed: 1,
+    },
+  },
+  "typing-indicator": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "oklch(1 0 0)",
+    },
+    defaults: {
+      dotCount: 3,
+      size: 8,
+      amplitude: 5,
+      speed: 1,
+    },
+  },
+  "underwater-ripple": {
+    durationInFrames: 120,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#06171c",
+    },
+    defaults: {
+      amplitude: 7,
+      scale: 1,
+      speed: 1,
+      dispersion: 1,
+    },
+  },
+  v0: {
+    durationInFrames: 150,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#000000",
+    },
+    defaults: {
+      greeting: "What do you want to create?",
+      placeholder: "Ask v0 to build…",
+      prompt: "a landing page for my SaaS with pricing and testimonials",
+      modelName: "v0 Max",
+      projectName: "Project",
+      speed: 1,
+    },
+  },
+  "value-swap": {
+    durationInFrames: 100,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      duration: 10,
+      distance: 12,
+      direction: "up",
+      speed: 1,
+    },
+  },
+  "vhs-filter": {
+    durationInFrames: 90,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#0a0a0a",
+    },
+    defaults: {
+      bleed: 1,
+      wobble: 1,
+      noise: 1,
+      intensity: 1,
+      speed: 1,
+    },
+  },
+  "warp-dissolve": {
+    durationInFrames: 116,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      distortion: 0.8,
+      swirl: 0.6,
+      softness: 1,
+      speed: 1,
+    },
+  },
+  "wave-wipe": {
+    durationInFrames: 116,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      intensity: 0.2,
+      softness: 0.7,
+      noise: 0.4,
+      colorBack: "#141318",
+      speed: 1,
+    },
+  },
+  "whip-pan": {
+    durationInFrames: 114,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      direction: "left",
+      blur: 24,
+      speed: 1,
+    },
+  },
+  "x-follow-card": {
+    durationInFrames: 165,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#f5f7f9",
+    },
+    defaults: {
+      name: "remocn",
+      handle: "remocn",
+      bio: "Production-ready components for Remotion - text animations, backgrounds, transitions, UI blocks, and full scene compositions",
+      avatarUrl: "/logo.svg",
+      coverUrl: "/imgs/x-cover.png",
+      location: "Ukraine",
+      website: "remocn.dev",
+      joined: "January 2024",
+      verified: true,
+      accentColor: "#1d9bf0",
+      orientation: "horizontal",
+      speed: 1,
+    },
+  },
+  "x-followers-overview": {
+    durationInFrames: 360,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#ffffff",
+    },
+    defaults: {
+      totalFollowers: 1709,
+      handle: "remocn",
+      avatarUrl: "/logo.svg",
+      accentColor: "#1d9bf0",
+      orientation: "horizontal",
+      speed: 1,
+    },
+  },
+  "zoom-blur": {
+    durationInFrames: 114,
+    fps: 30,
+    compositionWidth: 1280,
+    compositionHeight: 720,
+    previewBackdrop: {
+      type: "color",
+      value: "#141318",
+    },
+    defaults: {
+      blur: 16,
+      rise: 0,
+      speed: 1,
+    },
+  },
+};
+
+export default previewManifest;
diff --git a/scripts/21st/generate.mts b/scripts/21st/generate.mts
index 3147fced..431700a5 100644
--- a/scripts/21st/generate.mts
+++ b/scripts/21st/generate.mts
@@ -7,7 +7,7 @@ import {
 } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import registry from "@/registry/__index__";
+import registry, { loadComponentConfig } from "@/registry/__index__";
 
 const here = path.dirname(fileURLToPath(import.meta.url));
 const root = path.resolve(here, "..", "..");
@@ -259,7 +259,7 @@ for (const ns of ["remocn", "remocn-icons"] as const) {
       continue;
     }
 
-    const config = entry.config;
+    const config = await loadComponentConfig(slug);
     const backdrop = config.previewBackdrop;
     const background =
       backdrop && (backdrop.type === "color" || backdrop.type === "gradient")
diff --git a/scripts/build-preview-manifest.mts b/scripts/build-preview-manifest.mts
new file mode 100644
index 00000000..341b35ed
--- /dev/null
+++ b/scripts/build-preview-manifest.mts
@@ -0,0 +1,60 @@
+import { writeFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { getDefaults } from "@/lib/customizer-config";
+import registry, { loadComponentConfig } from "@/registry/__index__";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(here, "..");
+const outFile = path.join(root, "registry", "__manifest__.ts");
+
+const HEADER = `// GENERATED FILE — do not edit by hand.
+// Run \`bun run manifest:build\` after changing any registry config.
+//
+// The playback slice of every registry config: everything a preview needs to
+// mount a Player, and nothing it needs only to render the customizer panel.
+// Consumers that just play a component (cards, changelog, icon gallery) read
+// this instead of importing 263 config modules into the client bundle.
+
+import type { BackdropFill } from "@/registry/remocn/backdrop";
+
+export interface PreviewManifestEntry {
+  durationInFrames: number;
+  fps: number;
+  compositionWidth: number;
+  compositionHeight: number;
+  previewBackdrop?: BackdropFill;
+  defaults: Record<string, unknown>;
+}
+
+export const previewManifest: Record<string, PreviewManifestEntry> = `;
+
+async function main() {
+  const slugs = Object.keys(registry).sort();
+  const manifest: Record<string, unknown> = {};
+
+  for (const slug of slugs) {
+    const config = await loadComponentConfig(slug);
+    const entry: Record<string, unknown> = {
+      durationInFrames: config.durationInFrames,
+      fps: config.fps,
+      compositionWidth: config.compositionWidth,
+      compositionHeight: config.compositionHeight,
+    };
+    if (config.previewBackdrop) entry.previewBackdrop = config.previewBackdrop;
+    entry.defaults = getDefaults(config.controls);
+    manifest[slug] = entry;
+  }
+
+  const body = JSON.stringify(manifest, null, 2);
+  writeFileSync(
+    outFile,
+    `${HEADER}${body};\n\nexport default previewManifest;\n`,
+  );
+  console.log(`wrote ${slugs.length} entries to registry/__manifest__.ts`);
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});