{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "receding-text-plane",
  "type": "registry:ui",
  "title": "Receding Text Plane",
  "description": "A slab of copy raked away from the viewer on a short lens. Near lines swell past the frame edges, far lines fold toward a horizon that was never drawn — no scroll, no animation, one CSS transform.",
  "files": [
    {
      "path": "registry/ruixenui/receding-text-plane.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface RecedingTextPlaneProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Degrees the plane rakes away from the viewer. 0 is flat type; past ~45 the\n   * near lines outrun the frame before the far ones have finished folding.\n   */\n  angle?: number;\n  /**\n   * Copy laid onto the plane. Long enough to wrap several times is the point —\n   * the effect lives in the depth gap between one line and the next, so a\n   * single line has nothing to read against.\n   */\n  children: React.ReactNode;\n  /**\n   * Slides the slab along the raked plane, in pixels — the framing knob. 0\n   * centres it on the frame. Positive pushes the near, blown-out lines into\n   * view; negative pulls the far, folded ones in.\n   */\n  offset?: number;\n  /**\n   * Viewer distance in pixels. A wide lens by default — at 200 the near lines\n   * swell past 2x while the far ones fold into the horizon. Past ~600 the whole\n   * thing flattens into a mild tilt.\n   */\n  perspective?: number;\n}\n\nexport function RecedingTextPlane({\n  angle = 30,\n  children,\n  className,\n  offset = 0,\n  perspective = 200,\n  ...props\n}: RecedingTextPlaneProps) {\n  return (\n    <div\n      className={cn(\n        \"relative h-screen w-full overflow-hidden bg-muted\",\n        className,\n      )}\n      {...props}\n    >\n      {/*\n        Pinned to the frame rather than sized by the copy. Let this box grow with\n        the text and the pivot drifts down with it, so the same `offset` frames a\n        short headline and a long paragraph completely differently.\n      */}\n      <div\n        className=\"absolute inset-0 flex items-center justify-center\"\n        style={{\n          perspective: `${perspective}px`,\n          transformStyle: \"preserve-3d\",\n        }}\n      >\n        {/*\n          Rake, then slide, then lift off the plane — read right to left, the\n          slab is pushed down the flat plane first and only then tipped, so\n          `offset` moves the type along the ground rather than across the screen.\n          The 10px of Z keeps the near edge off the plane itself, which stops the\n          bottom line from clipping through the vanishing point.\n        */}\n        <p\n          className=\"w-full max-w-4xl text-center text-4xl font-bold tracking-tighter text-chart-2 sm:text-5xl md:text-6xl\"\n          style={{\n            transform: `rotateX(${angle}deg) translateY(${offset}px) translateZ(10px)`,\n            transformStyle: \"preserve-3d\",\n          }}\n        >\n          {children}\n        </p>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/receding-text-plane.tsx"
    }
  ]
}