{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changelog-bite",
  "title": "Changelog Bite",
  "description": "Seamlessly looping square card showing a before/after diff with a frosted glass wipe and a pulsing New pill.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/changelog-bite/index.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  interpolate,\n  spring,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nexport interface ChangelogBiteProps {\n  label?: string;\n  title?: string;\n  oldContent?: ReactNode;\n  newContent?: ReactNode;\n  format?: \"square\" | \"portrait\";\n  background?: string;\n  cardBackground?: string;\n  accent?: 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\nconst SOFT = Easing.bezier(0.16, 1, 0.3, 1);\n\nexport function ChangelogBite({\n  label = \"New\",\n  title = \"Inline diff view\",\n  oldContent,\n  newContent,\n  format = \"square\",\n  background = \"#141318\",\n  cardBackground = \"rgba(20, 19, 24, 0.92)\",\n  accent = \"#FFB38E\",\n  speed = 1,\n  className,\n}: ChangelogBiteProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps, durationInFrames } = useVideoConfig();\n\n  // ── Card scale/opacity envelope (loop seam) ─────────────────────────────\n  // First 10 frames: 0.95 → 1.0, 0 → 1\n  // Last 15 frames:  1.0 → 0.95, 1 → 0\n  // The match means a flat-cut from final to first frame is invisible.\n  const enterT = interpolate(frame, [0, 10], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: SOFT,\n  });\n  const exitT = interpolate(\n    frame,\n    [durationInFrames - 15, durationInFrames - 1],\n    [0, 1],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\", easing: SOFT },\n  );\n  const cardScale = 0.95 + enterT * 0.05 - exitT * 0.05;\n  const cardOpacity = enterT * (1 - exitT);\n\n  // ── Wipe progress (frosted glass + clip) ────────────────────────────────\n  const wipe = spring({\n    frame: frame - 60,\n    fps,\n    config: { damping: 18, mass: 0.9, stiffness: 90 },\n    durationInFrames: 50,\n  });\n  const wipePct = wipe * 100;\n\n  // ── Aspect-driven inner card sizing ─────────────────────────────────────\n  const isSquare = format === \"square\";\n  const cardWidth = isSquare ? 880 : 880;\n  const cardHeight = isSquare ? 880 : 1100;\n\n  const oldNode = oldContent ?? <DefaultOldPanel accent={accent} />;\n  const newNode = newContent ?? <DefaultNewPanel accent={accent} />;\n\n  return (\n    <AbsoluteFill\n      className={className}\n      style={{\n        background,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        fontFamily: FONT_FAMILY,\n      }}\n    >\n      <div\n        style={{\n          width: cardWidth,\n          height: cardHeight,\n          borderRadius: 56,\n          background: cardBackground,\n          border: `1px solid ${accent}33`,\n          boxShadow: `0 30px 120px ${accent}22, 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.06)`,\n          opacity: cardOpacity,\n          transform: `scale(${cardScale})`,\n          transformOrigin: \"center\",\n          willChange: \"transform, opacity\",\n          padding: 56,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 28,\n          position: \"relative\",\n          overflow: \"hidden\",\n        }}\n      >\n        {/* Header row: title + New pill */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n          }}\n        >\n          <div\n            style={{\n              color: \"rgba(255,255,255,0.55)\",\n              fontSize: 22,\n              letterSpacing: \"0.02em\",\n            }}\n          >\n            {title}\n          </div>\n          <PulsingPill label={label} color={accent} speed={speed} />\n        </div>\n\n        {/* Diff stage */}\n        <div\n          style={{\n            position: \"relative\",\n            flex: 1,\n            borderRadius: 32,\n            overflow: \"hidden\",\n            background: \"rgba(8,7,12,0.6)\",\n            border: \"1px solid rgba(255,255,255,0.05)\",\n          }}\n        >\n          {/* New (bottom layer) */}\n          <div style={{ position: \"absolute\", inset: 0 }}>{newNode}</div>\n\n          {/* Old (top layer, clipped left-to-right) */}\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              clipPath: `inset(0 ${wipePct}% 0 0)`,\n              willChange: \"clip-path\",\n            }}\n          >\n            {oldNode}\n          </div>\n\n          {/* Frosted glass shutter sweeping over the seam */}\n          {wipePct > 0 && wipePct < 100 && (\n            <div\n              style={{\n                position: \"absolute\",\n                top: 0,\n                bottom: 0,\n                left: `calc(${wipePct}% - 60px)`,\n                width: 120,\n                background:\n                  \"linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.0) 100%)\",\n                backdropFilter: \"blur(18px)\",\n                WebkitBackdropFilter: \"blur(18px)\",\n                pointerEvents: \"none\",\n              }}\n            />\n          )}\n\n          {/* Subtle accent seam line */}\n          {wipePct > 0 && wipePct < 100 && (\n            <div\n              style={{\n                position: \"absolute\",\n                top: 0,\n                bottom: 0,\n                left: `${wipePct}%`,\n                width: 1.5,\n                background: accent,\n                opacity: 0.55,\n                boxShadow: `0 0 18px ${accent}aa`,\n                pointerEvents: \"none\",\n              }}\n            />\n          )}\n        </div>\n\n        {/* Footer caption — labels swap mid-wipe */}\n        <div\n          style={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            color: \"rgba(255,255,255,0.4)\",\n            fontSize: 16,\n            fontFamily: MONO_FAMILY,\n          }}\n        >\n          <span style={{ opacity: 1 - wipe }}>before</span>\n          <span style={{ opacity: wipe }}>after</span>\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Default content                               */\n/* -------------------------------------------------------------------------- */\n\nfunction DefaultOldPanel({ accent }: { accent: string }) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: \"#0a090e\",\n        padding: \"44px 52px\",\n        fontFamily: MONO_FAMILY,\n        color: \"#71717a\",\n        fontSize: 22,\n        lineHeight: 1.55,\n        whiteSpace: \"pre\",\n      }}\n    >\n      <div>{\"function diff(a, b) {\"}</div>\n      <div>{\"  if (a === b) return null;\"}</div>\n      <div>{\"  return {\"}</div>\n      <div>{\"    before: a,\"}</div>\n      <div>{\"    after: b,\"}</div>\n      <div>{\"  };\"}</div>\n      <div>{\"}\"}</div>\n      <div\n        style={{\n          marginTop: 24,\n          display: \"inline-block\",\n          padding: \"6px 14px\",\n          borderRadius: 999,\n          background: \"rgba(239,68,68,0.12)\",\n          border: \"1px solid rgba(239,68,68,0.35)\",\n          color: \"#ef4444\",\n          fontSize: 13,\n          letterSpacing: \"0.12em\",\n          fontWeight: 700,\n        }}\n      >\n        BEFORE\n      </div>\n      {/* swallow lint */}\n      <span style={{ display: \"none\" }}>{accent}</span>\n    </div>\n  );\n}\n\nfunction DefaultNewPanel({ accent }: { accent: string }) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background:\n          \"radial-gradient(ellipse at 50% 30%, rgba(255,179,142,0.10) 0%, rgba(10,9,14,1) 70%)\",\n        padding: \"44px 52px\",\n        fontFamily: MONO_FAMILY,\n        color: \"#e4e4e7\",\n        fontSize: 22,\n        lineHeight: 1.55,\n        whiteSpace: \"pre\",\n      }}\n    >\n      <div>\n        <span style={{ color: \"#c4b5fd\" }}>function</span>{\" \"}\n        <span style={{ color: \"#fcd34d\" }}>diff</span>\n        {\"(a, b) {\"}\n      </div>\n      <div>\n        {\"  return \"}\n        <span style={{ color: \"#86efac\" }}>visualDiff</span>\n        {\"(a, b);\"}\n      </div>\n      <div>{\"}\"}</div>\n      <div\n        style={{\n          marginTop: 24,\n          display: \"inline-block\",\n          padding: \"6px 14px\",\n          borderRadius: 999,\n          background: `${accent}1a`,\n          border: `1px solid ${accent}55`,\n          color: accent,\n          fontSize: 13,\n          letterSpacing: \"0.12em\",\n          fontWeight: 700,\n        }}\n      >\n        AFTER\n      </div>\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Pulsing pill                                  */\n/* -------------------------------------------------------------------------- */\n\nfunction PulsingPill({\n  label,\n  color,\n  speed,\n}: {\n  label: string;\n  color: string;\n  speed: number;\n}) {\n  const frame = useCurrentFrame() * speed;\n  const wave = (Math.sin(frame / 8) + 1) / 2;\n  const dotScale = 0.92 + wave * 0.16;\n  const ringPhase = (frame % 60) / 60;\n  const ringScale = 1 + ringPhase * 1.6;\n  const ringOpacity = (1 - ringPhase) * 0.6;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 12,\n        padding: \"10px 18px 10px 14px\",\n        borderRadius: 999,\n        background: `${color}1a`,\n        border: `1px solid ${color}55`,\n        color,\n        fontSize: 16,\n        fontWeight: 600,\n        letterSpacing: \"0.02em\",\n      }}\n    >\n      <div style={{ position: \"relative\", width: 12, height: 12 }}>\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            borderRadius: \"50%\",\n            background: color,\n            opacity: ringOpacity,\n            transform: `scale(${ringScale})`,\n          }}\n        />\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            borderRadius: \"50%\",\n            background: color,\n            transform: `scale(${dotScale})`,\n          }}\n        />\n      </div>\n      {label}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/changelog-bite.tsx"
    }
  ],
  "type": "registry:component"
}