{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-tier-focus",
  "title": "Pricing Tier Focus",
  "description": "Three pricing cards where the focused tier rises and brightens while siblings dim and blur.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/pricing-tier-focus/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface PricingTierFocusProps {\n  focusedTier?: 0 | 1 | 2 | \"0\" | \"1\" | \"2\";\n  accentColor?: string;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\ninterface Tier {\n  name: string;\n  price: string;\n  period: string;\n  features: string[];\n  cta: string;\n}\n\nconst TIERS: Tier[] = [\n  {\n    name: \"Free\",\n    price: \"$0\",\n    period: \"/mo\",\n    features: [\"1 project\", \"Community support\", \"1 GB storage\"],\n    cta: \"Get started\",\n  },\n  {\n    name: \"Pro\",\n    price: \"$24\",\n    period: \"/mo\",\n    features: [\n      \"Unlimited projects\",\n      \"Priority support\",\n      \"100 GB storage\",\n      \"Advanced analytics\",\n    ],\n    cta: \"Buy Pro\",\n  },\n  {\n    name: \"Enterprise\",\n    price: \"$99\",\n    period: \"/mo\",\n    features: [\"SSO & SAML\", \"Dedicated manager\", \"Unlimited storage\"],\n    cta: \"Contact sales\",\n  },\n];\n\nexport function PricingTierFocus({\n  focusedTier = 1,\n  accentColor = \"#22c55e\",\n  speed = 1,\n  className,\n}: PricingTierFocusProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  const focusedIdx = Number(focusedTier);\n  const focusStart = 30;\n\n  const focusProgress = spring({\n    frame: frame - focusStart,\n    fps,\n    config: { mass: 1, damping: 18, stiffness: 90 },\n    durationInFrames: 50,\n  });\n\n  const focusScale = interpolate(focusProgress, [0, 1], [1, 1.05]);\n  const focusLift = interpolate(focusProgress, [0, 1], [0, -20]);\n  const sideBrightness = interpolate(focusProgress, [0, 1], [1, 0.4]);\n  const sideBlur = interpolate(focusProgress, [0, 1], [0, 4]);\n  const sideScale = interpolate(focusProgress, [0, 1], [1, 0.95]);\n\n  // Shimmer on Pro CTA — runs around frame 90\n  const shimmerStart = 90;\n  const shimmerPos = interpolate(\n    frame,\n    [shimmerStart, shimmerStart + 40],\n    [-150, 250],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: \"#0a0a0a\",\n        fontFamily: FONT_FAMILY,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        padding: 60,\n        gap: 28,\n      }}\n    >\n      {TIERS.map((tier, i) => {\n        const isFocused = i === focusedIdx;\n        const scale = isFocused ? focusScale : sideScale;\n        const lift = isFocused ? focusLift : 0;\n        const brightness = isFocused ? 1 : sideBrightness;\n        const blurPx = isFocused ? 0 : sideBlur;\n        const z = isFocused ? 10 : 1;\n        const shadow = isFocused\n          ? `0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px ${accentColor}55`\n          : \"0 8px 24px rgba(0,0,0,0.4)\";\n\n        return (\n          <div\n            key={tier.name}\n            style={{\n              position: \"relative\",\n              flex: \"1 1 0\",\n              maxWidth: 320,\n              minHeight: 460,\n              padding: 32,\n              borderRadius: 20,\n              background: \"linear-gradient(180deg, #161616 0%, #0e0e0e 100%)\",\n              border: \"1px solid rgba(255,255,255,0.08)\",\n              boxShadow: shadow,\n              transform: `translateY(${lift}px) scale(${scale})`,\n              filter: `brightness(${brightness}) blur(${blurPx}px)`,\n              zIndex: z,\n              display: \"flex\",\n              flexDirection: \"column\",\n              willChange: \"transform, filter\",\n            }}\n          >\n            {isFocused && (\n              <div\n                style={{\n                  position: \"absolute\",\n                  top: 16,\n                  right: 16,\n                  padding: \"4px 10px\",\n                  borderRadius: 999,\n                  background: accentColor,\n                  color: \"#0a0a0a\",\n                  fontSize: 11,\n                  fontWeight: 700,\n                  letterSpacing: \"0.04em\",\n                  textTransform: \"uppercase\",\n                }}\n              >\n                Popular\n              </div>\n            )}\n            <div\n              style={{\n                fontSize: 14,\n                fontWeight: 600,\n                color: \"rgba(255,255,255,0.6)\",\n                letterSpacing: \"0.04em\",\n                textTransform: \"uppercase\",\n              }}\n            >\n              {tier.name}\n            </div>\n            <div\n              style={{\n                marginTop: 12,\n                display: \"flex\",\n                alignItems: \"baseline\",\n                gap: 4,\n              }}\n            >\n              <div\n                style={{\n                  fontSize: 56,\n                  fontWeight: 700,\n                  color: \"white\",\n                  letterSpacing: \"-0.04em\",\n                  lineHeight: 1,\n                }}\n              >\n                {tier.price}\n              </div>\n              <div\n                style={{\n                  fontSize: 16,\n                  color: \"rgba(255,255,255,0.5)\",\n                  fontWeight: 500,\n                }}\n              >\n                {tier.period}\n              </div>\n            </div>\n            <div\n              style={{\n                marginTop: 24,\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: 12,\n                flex: 1,\n              }}\n            >\n              {tier.features.map((f) => (\n                <div\n                  key={f}\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: 10,\n                    fontSize: 14,\n                    color: \"rgba(255,255,255,0.85)\",\n                  }}\n                >\n                  <div\n                    style={{\n                      width: 16,\n                      height: 16,\n                      borderRadius: 999,\n                      background: `${accentColor}22`,\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      justifyContent: \"center\",\n                      color: accentColor,\n                      fontSize: 11,\n                      fontWeight: 700,\n                      flexShrink: 0,\n                    }}\n                  >\n                    ✓\n                  </div>\n                  {f}\n                </div>\n              ))}\n            </div>\n            <div\n              style={{\n                marginTop: 24,\n                position: \"relative\",\n                height: 44,\n                borderRadius: 12,\n                background: isFocused ? accentColor : \"rgba(255,255,255,0.08)\",\n                color: isFocused ? \"#0a0a0a\" : \"white\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                fontSize: 14,\n                fontWeight: 600,\n                overflow: \"hidden\",\n                border: isFocused ? \"none\" : \"1px solid rgba(255,255,255,0.1)\",\n              }}\n            >\n              {tier.cta}\n              {isFocused && (\n                <div\n                  style={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    bottom: 0,\n                    width: 80,\n                    transform: `translateX(${shimmerPos}px) skewX(-20deg)`,\n                    background:\n                      \"linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%)\",\n                    pointerEvents: \"none\",\n                  }}\n                />\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/pricing-tier-focus.tsx"
    }
  ],
  "type": "registry:component"
}