{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "browser-flow",
  "title": "Browser Flow",
  "description": "Full Safari/Chrome simulation: typed URL, progress bar, page render, scroll, and a virtual cursor click.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/browser-flow/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface BrowserFlowProps {\n  url?: string;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\nconst MONO_FAMILY =\n  \"var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace\";\n\nfunction MacDots({ size = 12 }: { size?: number }) {\n  return (\n    <div style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\n      {[\"#ff5f57\", \"#febc2e\", \"#28c840\"].map((c) => (\n        <div\n          key={c}\n          style={{\n            width: size,\n            height: size,\n            borderRadius: \"50%\",\n            background: c,\n            opacity: 0.85,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction CursorSVG() {\n  return (\n    <svg width=\"22\" height=\"28\" viewBox=\"0 0 22 28\" fill=\"none\">\n      <path\n        d=\"M2 2L2 22L7 17.5L10.5 25L13.5 23.5L10 16L17 16L2 2Z\"\n        fill=\"white\"\n        stroke=\"black\"\n        strokeWidth=\"1.5\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction easeInOut(t: number) {\n  return t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;\n}\n\nexport function BrowserFlow({\n  url = \"remocn.dev\",\n  speed = 1,\n  className,\n}: BrowserFlowProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  // ── Browser dimensions ────────────────────────────\n  const browserWidth = 1100;\n  const browserHeight = 620;\n  const chromeHeight = 56;\n  const browserLeft = (1280 - browserWidth) / 2;\n  const browserTop = (720 - browserHeight) / 2;\n\n  // ── URL typing (frames 0..40) ─────────────────────\n  const typingProgress = interpolate(frame, [4, 38], [0, url.length], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const typedChars = Math.floor(typingProgress);\n  const typedUrl = url.slice(0, typedChars);\n  const showCaret = frame < 50 && Math.floor(frame / 12) % 2 === 0;\n\n  // Autocomplete suggestion appears once a few chars typed\n  const showSuggestion = typedChars >= 2 && frame < 48;\n  const suggestion = url;\n\n  // ── Progress bar ──────────────────────────────────\n  // 40..50: 0 -> 15\n  // 50..65: hold at 15\n  // 65..85: 15 -> 100\n  // 85..95: fade out\n  let progress = 0;\n  if (frame < 40) progress = 0;\n  else if (frame < 50)\n    progress = interpolate(frame, [40, 50], [0, 15], {\n      extrapolateRight: \"clamp\",\n    });\n  else if (frame < 65) progress = 15;\n  else if (frame < 85)\n    progress = interpolate(frame, [65, 85], [15, 100], {\n      extrapolateRight: \"clamp\",\n    });\n  else progress = 100;\n\n  const progressOpacity =\n    frame < 40\n      ? 0\n      : frame < 85\n        ? 1\n        : interpolate(frame, [85, 95], [1, 0], {\n            extrapolateRight: \"clamp\",\n          });\n\n  // ── Page render ───────────────────────────────────\n  const pageStart = 95;\n  const pageOpacity = interpolate(frame, [pageStart, pageStart + 12], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  // ── Page scroll & cursor motion ───────────────────\n  const scrollStart = 115;\n  const scrollEnd = 230;\n  const scrollT = interpolate(frame, [scrollStart, scrollEnd], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const scrollEased = easeInOut(scrollT);\n  const maxScroll = 600;\n  const scrollY = scrollEased * maxScroll;\n\n  // Cursor path: starts off the address bar area, moves down toward CTA inside viewport\n  // Coordinates relative to the full 1280x720 frame.\n  const cursorStartX = browserLeft + 380;\n  const cursorStartY = browserTop + chromeHeight + 60;\n  const cursorEndX = browserLeft + browserWidth / 2;\n  const cursorEndY = browserTop + chromeHeight + 380;\n\n  const cursorT = interpolate(frame, [pageStart + 5, scrollEnd], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const cursorEased = easeInOut(cursorT);\n  // arc bias on Y for organic feel\n  const arcOffset = Math.sin(cursorEased * Math.PI) * 30;\n  const cursorX =\n    cursorStartX + (cursorEndX - cursorStartX) * cursorEased + arcOffset * 0.6;\n  const cursorY =\n    cursorStartY + (cursorEndY - cursorStartY) * cursorEased - arcOffset;\n\n  // Click animation near the end\n  const clickFrame = scrollEnd + 4;\n  const clickSpring = spring({\n    frame: frame - clickFrame,\n    fps,\n    config: { mass: 0.4, damping: 12, stiffness: 220 },\n    durationInFrames: 18,\n  });\n  const cursorClickScale = interpolate(clickSpring, [0, 0.4, 1], [1, 0.85, 1], {\n    extrapolateRight: \"clamp\",\n  });\n  const buttonClickScale =\n    frame >= clickFrame\n      ? interpolate(clickSpring, [0, 0.4, 1], [1, 0.98, 1], {\n          extrapolateRight: \"clamp\",\n        })\n      : 1;\n\n  // Address bar focus state (highlighted while typing)\n  const addressFocused = frame < 50;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        overflow: \"hidden\",\n        background:\n          \"radial-gradient(ellipse at center, #11141c 0%, #050505 75%)\",\n        fontFamily: FONT_FAMILY,\n      }}\n    >\n      {/* Browser window */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: browserLeft,\n          top: browserTop,\n          width: browserWidth,\n          height: browserHeight,\n          borderRadius: 16,\n          overflow: \"hidden\",\n          background: \"#0a0a0c\",\n          border: \"1px solid rgba(255,255,255,0.08)\",\n          boxShadow:\n            \"0 50px 120px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06)\",\n        }}\n      >\n        {/* Chrome */}\n        <div\n          style={{\n            position: \"relative\",\n            height: chromeHeight,\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 14,\n            paddingLeft: 18,\n            paddingRight: 18,\n            background: \"rgba(20,20,24,0.95)\",\n            borderBottom: \"1px solid rgba(255,255,255,0.06)\",\n          }}\n        >\n          <MacDots />\n          {/* nav arrows */}\n          <div\n            style={{\n              display: \"flex\",\n              gap: 6,\n              marginLeft: 8,\n              color: \"rgba(255,255,255,0.35)\",\n              fontSize: 16,\n            }}\n          >\n            <span>‹</span>\n            <span>›</span>\n          </div>\n          {/* address bar */}\n          <div\n            style={{\n              flex: 1,\n              position: \"relative\",\n              height: 32,\n              borderRadius: 16,\n              background: addressFocused\n                ? \"rgba(255,255,255,0.08)\"\n                : \"rgba(255,255,255,0.05)\",\n              border: `1px solid ${\n                addressFocused\n                  ? \"rgba(120,160,255,0.45)\"\n                  : \"rgba(255,255,255,0.07)\"\n              }`,\n              display: \"flex\",\n              alignItems: \"center\",\n              paddingLeft: 14,\n              paddingRight: 14,\n              fontFamily: MONO_FAMILY,\n              fontSize: 13,\n              color: \"rgba(255,255,255,0.85)\",\n              boxShadow: addressFocused\n                ? \"0 0 0 3px rgba(120,160,255,0.12)\"\n                : \"none\",\n            }}\n          >\n            <span style={{ color: \"rgba(255,255,255,0.4)\", marginRight: 8 }}>\n              ⌕\n            </span>\n            <span>{typedUrl}</span>\n            {showCaret && (\n              <span\n                style={{\n                  display: \"inline-block\",\n                  width: 1.5,\n                  height: 16,\n                  background: \"rgba(255,255,255,0.85)\",\n                  marginLeft: 1,\n                }}\n              />\n            )}\n\n            {/* Autocomplete suggestion dropdown */}\n            {showSuggestion && (\n              <div\n                style={{\n                  position: \"absolute\",\n                  left: 0,\n                  right: 0,\n                  top: \"calc(100% + 6px)\",\n                  background: \"rgba(22,22,26,0.98)\",\n                  border: \"1px solid rgba(255,255,255,0.08)\",\n                  borderRadius: 10,\n                  padding: \"10px 14px\",\n                  fontFamily: MONO_FAMILY,\n                  fontSize: 13,\n                  color: \"rgba(255,255,255,0.85)\",\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: 10,\n                  boxShadow: \"0 20px 50px rgba(0,0,0,0.5)\",\n                  zIndex: 10,\n                }}\n              >\n                <span style={{ color: \"rgba(255,255,255,0.4)\" }}>↗</span>\n                <span>\n                  <span style={{ color: \"white\" }}>{typedUrl}</span>\n                  <span style={{ color: \"rgba(255,255,255,0.4)\" }}>\n                    {suggestion.slice(typedChars)}\n                  </span>\n                </span>\n              </div>\n            )}\n          </div>\n          <div style={{ width: 60 }} />\n\n          {/* Progress bar */}\n          <div\n            style={{\n              position: \"absolute\",\n              left: 0,\n              right: 0,\n              bottom: 0,\n              height: 2,\n              opacity: progressOpacity,\n            }}\n          >\n            <div\n              style={{\n                width: `${progress}%`,\n                height: \"100%\",\n                background: \"linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%)\",\n                boxShadow: \"0 0 8px rgba(96,165,250,0.6)\",\n              }}\n            />\n          </div>\n        </div>\n\n        {/* Page viewport */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: 0,\n            right: 0,\n            top: chromeHeight,\n            bottom: 0,\n            overflow: \"hidden\",\n            background: \"#0a0a0c\",\n            opacity: pageOpacity,\n          }}\n        >\n          <div\n            style={{\n              position: \"absolute\",\n              left: 0,\n              right: 0,\n              top: 0,\n              transform: `translateY(${-scrollY}px)`,\n              willChange: \"transform\",\n            }}\n          >\n            {/* Header */}\n            <div\n              style={{\n                height: 68,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n                padding: \"0 60px\",\n                borderBottom: \"1px solid rgba(255,255,255,0.05)\",\n              }}\n            >\n              <div\n                style={{\n                  fontWeight: 700,\n                  fontSize: 18,\n                  color: \"white\",\n                  letterSpacing: \"-0.02em\",\n                }}\n              >\n                remocn\n              </div>\n              <div\n                style={{\n                  display: \"flex\",\n                  gap: 28,\n                  fontSize: 14,\n                  color: \"rgba(255,255,255,0.65)\",\n                }}\n              >\n                <span>Components</span>\n                <span>Docs</span>\n                <span>GitHub</span>\n              </div>\n            </div>\n\n            {/* Hero */}\n            <div\n              style={{\n                padding: \"100px 60px 80px\",\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: 24,\n                alignItems: \"center\",\n                textAlign: \"center\",\n              }}\n            >\n              <div\n                style={{\n                  fontSize: 13,\n                  color: \"rgba(120,160,255,0.85)\",\n                  fontWeight: 500,\n                  letterSpacing: \"0.02em\",\n                }}\n              >\n                shadcn registry for Remotion\n              </div>\n              <div\n                style={{\n                  fontSize: 64,\n                  fontWeight: 700,\n                  letterSpacing: \"-0.04em\",\n                  color: \"white\",\n                  lineHeight: 1.05,\n                  maxWidth: 720,\n                }}\n              >\n                Production-ready video blocks.\n              </div>\n              <div\n                style={{\n                  fontSize: 17,\n                  color: \"rgba(255,255,255,0.6)\",\n                  maxWidth: 520,\n                  lineHeight: 1.5,\n                }}\n              >\n                Drop-in animations, transitions, and backgrounds for Remotion.\n                Own your code.\n              </div>\n\n              {/* CTA — clicked at the end */}\n              <button\n                type=\"button\"\n                style={{\n                  marginTop: 12,\n                  padding: \"16px 32px\",\n                  borderRadius: 12,\n                  background: \"white\",\n                  color: \"#0a0a0c\",\n                  fontFamily: FONT_FAMILY,\n                  fontSize: 15,\n                  fontWeight: 600,\n                  border: \"none\",\n                  transform: `scale(${buttonClickScale})`,\n                  boxShadow:\n                    frame >= clickFrame\n                      ? \"0 0 0 6px rgba(255,255,255,0.08)\"\n                      : \"0 10px 30px rgba(255,255,255,0.1)\",\n                  willChange: \"transform\",\n                }}\n              >\n                Browse components →\n              </button>\n            </div>\n\n            {/* Sections */}\n            {[\n              { title: \"Typography\", color: \"#3b82f6\" },\n              { title: \"Backgrounds\", color: \"#a855f7\" },\n              { title: \"Transitions\", color: \"#22c55e\" },\n            ].map((s) => (\n              <div\n                key={s.title}\n                style={{\n                  margin: \"40px 60px\",\n                  padding: \"40px\",\n                  borderRadius: 16,\n                  background:\n                    \"linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%)\",\n                  border: \"1px solid rgba(255,255,255,0.06)\",\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: 28,\n                }}\n              >\n                <div\n                  style={{\n                    width: 64,\n                    height: 64,\n                    borderRadius: 14,\n                    background: `${s.color}22`,\n                    border: `1px solid ${s.color}55`,\n                  }}\n                />\n                <div\n                  style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    gap: 6,\n                  }}\n                >\n                  <div\n                    style={{\n                      fontSize: 22,\n                      fontWeight: 600,\n                      color: \"white\",\n                      letterSpacing: \"-0.02em\",\n                    }}\n                  >\n                    {s.title}\n                  </div>\n                  <div\n                    style={{\n                      fontSize: 14,\n                      color: \"rgba(255,255,255,0.55)\",\n                    }}\n                  >\n                    Hand-tuned primitives, copied straight into your project.\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      {/* Virtual cursor */}\n      {frame >= pageStart && (\n        <div\n          style={{\n            position: \"absolute\",\n            left: cursorX,\n            top: cursorY,\n            transform: `scale(${cursorClickScale})`,\n            transformOrigin: \"top left\",\n            zIndex: 9999,\n            filter: \"drop-shadow(0 4px 8px rgba(0,0,0,0.5))\",\n            willChange: \"transform\",\n          }}\n        >\n          <CursorSVG />\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/browser-flow.tsx"
    }
  ],
  "type": "registry:component"
}