{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "phone-scroll-hero",
"type": "registry:ui",
"title": "Phone Scroll Hero",
"description": "A hero whose 3D-tilted phone mockup flattens and climbs up over the headline as the page scrolls. Theme-aware with a reduced-motion fallback.",
"dependencies": [
"motion"
],
"files": [
{
"path": "registry/ruixenui/phone-scroll-hero.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n motion,\n useMotionValue,\n useReducedMotion,\n useTransform,\n} from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ── types ───────────────────────────────────────────────────── */\n\nexport interface PhoneScrollHeroProps {\n /** Headline block. Sits *behind* the phone, so the phone can climb over it. */\n titleComponent: React.ReactNode;\n /** Rendered inside the phone screen. */\n children?: React.ReactNode;\n /**\n * How far the phone climbs into the title, as a share of its own height.\n * A percentage keeps the overlap proportional at every breakpoint without a\n * resize listener. Default `20`.\n */\n overlap?: number;\n /** Backward tilt of the phone at the start of the scroll, in deg. Default `22`. */\n tilt?: number;\n className?: string;\n}\n\n/* ── helpers ─────────────────────────────────────────────────── */\n\nconst useIsomorphicLayoutEffect =\n typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\n/* ── pieces ──────────────────────────────────────────────────── */\n\n/** Device chassis. Every surface is a shadcn token, so the frame follows the\n * host theme; only the camera island is a fixed colour (see below). */\nfunction PhoneFrame({ children }: { children?: React.ReactNode }) {\n return (\n
\n {/* side buttons */}\n \n \n \n
\n
\n {/* Camera island. Deliberately *not* themed — it is a hole in the\n glass, so it stays black in light and dark, exactly as on a real\n device showing a dark app. */}\n \n {children ?? (\n
\n \n Replace screen\n \n
\n )}\n
\n
\n
\n );\n}\n\n/* ── component ───────────────────────────────────────────────── */\n\n/**\n * A hero whose phone mockup starts tilted back on the X axis, straightens to\n * flat as the section scrolls through, and climbs up over the headline.\n *\n * - Pass the headline as `titleComponent`; it renders *behind* the phone.\n * - Pass the screen content as `children` (a `