{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "frosted-glass-wipe",
  "title": "Frosted Glass Wipe",
  "description": "Elegant scene transition through a sliding pane of frosted glass.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/bases/editframe/components/frosted-glass-wipe/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { ReactNode, CSSProperties } from \"react\";\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nconst DefaultPanel = ({ label, color }: { label: string; color: string }) => (\n  <div\n    style={{\n      alignItems: \"center\",\n      background: color,\n      color: \"white\",\n      display: \"flex\",\n      fontFamily: FONT_FAMILY,\n      fontSize: 96,\n      fontWeight: 700,\n      inset: 0,\n      justifyContent: \"center\",\n      letterSpacing: \"-0.05em\",\n      position: \"absolute\",\n    }}\n  >\n    {label}\n  </div>\n);\n\nexport interface FrostedGlassWipeProps {\n  from?: ReactNode;\n  to?: ReactNode;\n  transitionStart?: number;\n  transitionDuration?: number;\n  glassBlur?: number;\n  speed?: number;\n  fps?: number;\n  durationInFrames?: number;\n  width?: number;\n  height?: number;\n  background?: string;\n  className?: string;\n}\n\nexport const FrostedGlassWipe = ({\n  from,\n  to,\n  transitionStart = 36,\n  transitionDuration = 30,\n  glassBlur = 24,\n  speed = 1,\n  fps = 30,\n  durationInFrames = 90,\n  width = 1280,\n  height = 720,\n  background = \"black\",\n  className,\n}: FrostedGlassWipeProps) => {\n  const safeSpeed = Math.max(0.01, speed);\n  const durationMs = (durationInFrames / fps) * 1000;\n  const frameMs = 1000 / fps;\n  const startMs = transitionStart * frameMs;\n  const durationMsCalc = (transitionDuration * frameMs) / safeSpeed;\n\n  const fromContent = from ?? <DefaultPanel label=\"Scene A\" color=\"#0ea5e9\" />;\n  const toContent = to ?? <DefaultPanel label=\"Scene B\" color=\"#9333ea\" />;\n\n  const containerStyle: CSSProperties = {\n    background,\n    height,\n    overflow: \"hidden\",\n    position: \"relative\",\n    width,\n  };\n\n  return (\n    <Timegroup\n      className={className}\n      duration={`${durationMs}ms`}\n      mode=\"fixed\"\n      style={containerStyle}\n    >\n      <>\n        <style>{`\n          @keyframes framecn-frosted-glass {\n            from { transform: translateX(-110%); }\n            to { transform: translateX(110%); }\n          }\n          @keyframes framecn-frosted-show {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n        `}</style>\n        <div style={{ inset: 0, position: \"absolute\" }}>{fromContent}</div>\n        <div\n          style={{\n            animation: `framecn-frosted-show 1ms linear ${startMs + durationMsCalc / 2}ms forwards`,\n            inset: 0,\n            position: \"absolute\",\n          }}\n        >\n          {toContent}\n        </div>\n        <div\n          style={{\n            WebkitBackdropFilter: `blur(${glassBlur}px)`,\n            animation: `framecn-frosted-glass ${durationMsCalc}ms cubic-bezier(0.6, 0, 0.2, 1) ${startMs}ms backwards`,\n            backdropFilter: `blur(${glassBlur}px)`,\n            background: \"rgba(255,255,255,0.05)\",\n            borderLeft: \"1px solid rgba(255,255,255,0.2)\",\n            borderRight: \"1px solid rgba(255,255,255,0.2)\",\n            bottom: 0,\n            left: 0,\n            position: \"absolute\",\n            top: 0,\n            width: \"100%\",\n            willChange: \"transform\",\n          }}\n        />\n      </>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/frosted-glass-wipe.tsx"
    }
  ],
  "type": "registry:component"
}