{
  "name": "staggered-fade-up",
  "type": "registry:ui",
  "description": "Words rise with cascading fade-up stagger",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "layout",
    "timing"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/staggered-fade-up.tsx",
      "type": "registry:ui",
      "content": "import { interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { scaleFont } from \"@/remotion/lib/layout\";\nimport { EASING_ENTER, staggerDelay } from \"@/remotion/lib/timing\";\n\nexport type StaggeredFadeUpProps = {\n  text: string;\n  staggerInFrames?: number;\n  durationInFrames?: number;\n  delayInFrames?: number;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  fontFamily?: string;\n};\n\nexport const StaggeredFadeUp: React.FC<StaggeredFadeUpProps> = ({\n  text,\n  staggerInFrames = 4,\n  durationInFrames = 16,\n  delayInFrames = 0,\n  fontSize: fontSizeProp,\n  color = \"#f4f4f5\",\n  fontWeight = 600,\n  fontFamily,\n}) => {\n  const frame = useCurrentFrame();\n  const { width } = useVideoConfig();\n  const fontSize = fontSizeProp ?? scaleFont(72, width);\n  const words = text.split(/\\s+/).filter(Boolean);\n\n  return (\n    <span\n      style={{\n        display: \"inline-flex\",\n        flexWrap: \"wrap\",\n        gap: \"0.28em\",\n        fontSize,\n        fontWeight,\n        color,\n        lineHeight: 1.2,\n        ...(fontFamily ? { fontFamily } : {}),\n      }}\n    >\n      {words.map((word, index) => {\n        const start = staggerDelay(index, staggerInFrames, delayInFrames);\n        const progress = interpolate(\n          frame,\n          [start, start + durationInFrames],\n          [0, 1],\n          {\n            easing: EASING_ENTER,\n            extrapolateLeft: \"clamp\",\n            extrapolateRight: \"clamp\",\n          },\n        );\n        const y = interpolate(progress, [0, 1], [18, 0]);\n\n        return (\n          <span\n            key={`${word}-${index}`}\n            style={{\n              display: \"inline-block\",\n              opacity: progress,\n              translate: `0px ${y}px`,\n            }}\n          >\n            {word}\n          </span>\n        );\n      })}\n    </span>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "advanced",
    "tags": [
      "text"
    ]
  }
}