{"$schema":"https://ui.shadcn.com/schema/registry.json","author":"Kaiyu Hsu ","categories":["navigation","minimal"],"dependencies":["lucide-react","motion"],"description":"Android's predictive back gesture — drag from the edge and the screen shrinks in your hand, revealing where you'll land before you commit.","devDependencies":[],"files":[{"content":"import type { ReactNode } from \"react\";\n\n// Screen is 330×716 (iPhone 15 proportions); the clay shell adds a 16px lip on every side.\nexport const SCREEN_WIDTH = 330;\nexport const SCREEN_HEIGHT = 716;\n\ninterface Clay {\n base: string;\n deep: string;\n light: string;\n /** RGB triplet for inner shading, tinted so each tone reads as one material. */\n rim: string;\n}\n\n// Dark matte clay: `light` is the lit top face, `base` the body, `deep` the shaded underside.\nconst TONES = {\n espresso: { base: \"#3a2b24\", deep: \"#1f1612\", light: \"#5a4436\", rim: \"32 20 14\" },\n graphite: { base: \"#303036\", deep: \"#18181c\", light: \"#4a4a52\", rim: \"10 10 14\" },\n moss: { base: \"#2f3a2c\", deep: \"#171d15\", light: \"#4a5a44\", rim: \"12 18 10\" },\n ochre: { base: \"#4a3c20\", deep: \"#261e0e\", light: \"#6e5a30\", rim: \"30 22 6\" },\n plum: { base: \"#3c2a3a\", deep: \"#1e141d\", light: \"#5c4058\", rim: \"26 12 24\" },\n slate: { base: \"#2a3448\", deep: \"#141a26\", light: \"#435270\", rim: \"10 16 30\" },\n teal: { base: \"#233a3a\", deep: \"#101d1d\", light: \"#38585a\", rim: \"6 22 22\" },\n terracotta: { base: \"#4a2c22\", deep: \"#26150f\", light: \"#6c4232\", rim: \"34 14 8\" },\n} satisfies Record;\n\nexport type ClayTone = keyof typeof TONES;\n\nconst shellShadow = (rim: string) =>\n [\n \"0 60px 100px -40px rgb(0 0 0 / 0.85)\",\n \"0 26px 40px -24px rgb(0 0 0 / 0.7)\",\n \"inset 0 6px 6px rgb(255 255 255 / 0.16)\",\n `inset 0 -14px 22px rgb(${rim} / 0.75)`,\n \"inset 12px 0 18px -12px rgb(255 255 255 / 0.1)\",\n `inset -12px 0 18px -12px rgb(${rim} / 0.6)`,\n ].join(\", \");\n\nconst Nub = ({ className, clay }: { className: string; clay: Clay }) => (\n \n);\n\ninterface PhoneFrameProps {\n children: ReactNode;\n /** Classes for the screen: background, text color, pointer handling. */\n className?: string;\n /** Hide the Dynamic Island when the screen draws its own status area. */\n island?: boolean;\n tone?: ClayTone;\n}\n\nexport const PhoneFrame = ({\n children,\n className,\n island = true,\n tone = \"graphite\",\n}: PhoneFrameProps) => {\n const clay = TONES[tone];\n return (\n \n \n \n \n \n \n {children}\n {island && (\n \n )}\n \n \n );\n};\n","path":"/phone-frame.tsx","target":"uicapsule/predictive-back/phone-frame.tsx","type":"registry:file"},{"content":"\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport type { PointerEvent } from \"react\";\nimport { ArrowLeft, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport {\n animate,\n motion,\n useMotionValue,\n useReducedMotion,\n useSpring,\n useTransform,\n} from \"motion/react\";\nimport { PhoneFrame, SCREEN_HEIGHT, SCREEN_WIDTH } from \"./phone-frame\";\n\nconst EDGE = 28;\nconst PEEK = 220;\nconst COMMIT = 110;\nconst EXIT = SCREEN_WIDTH + 48;\nconst ARROW_SIZE = 40;\n\n// Apple's scroll-deceleration projection (rate 0.995): a flick commits even from a short pull.\nconst project = (velocity: number) => ((velocity / 1000) * 0.995) / (1 - 0.995);\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\ninterface Grab {\n pointerId: number;\n originX: number;\n originOffset: number;\n originY: number;\n top: number;\n unit: number;\n}\n\nconst STORIES = [\n { blurb: \"Why every good gesture has a click\", hue: \"#f97316\", title: \"Detents, explained\" },\n { blurb: \"One curve to rule the capsule library\", hue: \"#a855f7\", title: \"The spring config\" },\n {\n blurb: \"Predictive back and the end of mystery navigation\",\n hue: \"#e0673a\",\n title: \"Edge peeks\",\n },\n { blurb: \"Faking depth without WebGL\", hue: \"#10b981\", title: \"Phosphor & fog\" },\n { blurb: \"Rubber-banding at the edge of the world\", hue: \"#ef4444\", title: \"Overscroll\" },\n { blurb: \"Designing for the thumb, not the cursor\", hue: \"#eab308\", title: \"Reach zones\" },\n];\n\nconst TARGET = 2;\n\nexport const PredictiveBack = () => {\n const [screen, setScreen] = useState<\"detail\" | \"home\">(\"detail\");\n const reduced = useReducedMotion() ?? false;\n const grabRef = useRef(null);\n\n // 0 = detail at rest, EXIT = detail gone. The pointer writes it 1:1; springs settle it.\n const offset = useMotionValue(0);\n const lift = useMotionValue(0);\n // The arrow follows the live gesture only, so settle and reopen springs never flash it.\n const arrow = useMotionValue(0);\n const arrowY = useMotionValue(SCREEN_HEIGHT / 2);\n\n const detailScale = useTransform(offset, [0, PEEK], [1, 0.86]);\n const homeScale = useTransform(offset, [0, EXIT], [0.92, 1]);\n const homeX = useTransform(offset, [0, EXIT], [-20, 0]);\n const homeDim = useTransform(offset, [0, EXIT], [0.6, 0]);\n\n const arrowX = useTransform(arrow, [0, PEEK], [-ARROW_SIZE, 18]);\n const arrowOpacity = useTransform(arrow, [0, 24], [0, 1]);\n const armed = useTransform(arrow, [0, COMMIT - 1, COMMIT], [0.55, 0.9, 1.12]);\n const arrowScale = useSpring(armed, { damping: 18, stiffness: 520 });\n const arrowFill = useTransform(\n arrow,\n [COMMIT - 1, COMMIT],\n [\"rgba(255,255,255,0.16)\", \"rgba(255,255,255,1)\"],\n );\n const arrowInk = useTransform(arrow, [COMMIT - 1, COMMIT], [\"#ffffff\", \"#0b0c10\"]);\n const arrowTop = useTransform(arrowY, (y) => y - ARROW_SIZE / 2);\n\n const settle = (target: number, velocity: number) => {\n const done = () => {\n if (target === EXIT) {\n setScreen(\"home\");\n }\n };\n if (reduced) {\n offset.jump(target);\n lift.jump(0);\n done();\n return;\n }\n void animate(lift, 0, { bounce: 0, type: \"spring\", visualDuration: 0.3 });\n void animate(offset, target, {\n bounce: target === 0 ? 0.15 : 0,\n onComplete: done,\n type: \"spring\",\n velocity,\n visualDuration: 0.36,\n });\n };\n\n const onPointerDown = (event: PointerEvent) => {\n const rect = event.currentTarget.getBoundingClientRect();\n const unit = rect.width / SCREEN_WIDTH;\n const localX = (event.clientX - rect.left) / unit;\n const onButton = event.target instanceof Element && event.target.closest(\"button\") !== null;\n const inFlight = offset.isAnimating();\n const fromEdge = screen === \"detail\" && localX < EDGE && !onButton;\n if (!inFlight && !fromEdge) {\n return;\n }\n offset.stop();\n lift.stop();\n arrow.stop();\n event.currentTarget.setPointerCapture(event.pointerId);\n const y = clamp((event.clientY - rect.top) / unit, 90, SCREEN_HEIGHT - 90);\n grabRef.current = {\n originOffset: offset.get(),\n originX: event.clientX,\n originY: y,\n pointerId: event.pointerId,\n top: rect.top,\n unit,\n };\n arrowY.set(y);\n };\n\n const onPointerMove = (event: PointerEvent) => {\n const grab = grabRef.current;\n if (!grab || grab.pointerId !== event.pointerId) {\n return;\n }\n const next = clamp(grab.originOffset + (event.clientX - grab.originX) / grab.unit, 0, EXIT);\n const y = clamp((event.clientY - grab.top) / grab.unit, 90, SCREEN_HEIGHT - 90);\n offset.set(next);\n arrow.set(next);\n arrowY.set(y);\n lift.set((y - grab.originY) * 0.12);\n };\n\n const onPointerUp = (event: PointerEvent) => {\n const grab = grabRef.current;\n if (!grab || grab.pointerId !== event.pointerId) {\n return;\n }\n grabRef.current = null;\n const velocity = offset.getVelocity();\n const commit = offset.get() + project(velocity) > COMMIT;\n if (reduced) {\n arrow.jump(0);\n } else {\n void animate(arrow, 0, { bounce: 0, type: \"spring\", visualDuration: 0.22 });\n }\n settle(commit ? EXIT : 0, velocity);\n };\n\n const openDetail = () => {\n setScreen(\"detail\");\n settle(0, offset.getVelocity());\n };\n\n return (\n \n \n \n

\n Thursday, September 24\n

\n

\n Reader\n

\n
\n {STORIES.map((story, index) => (\n \n \n \n {story.title}\n \n {story.blurb}\n \n \n {index === TARGET && (\n \n )}\n \n ))}\n
\n

\n Open the highlighted story\n

\n \n \n\n \n
\n
\n
\n
\n settle(EXIT, 0)}\n className=\"absolute top-[54px] left-5 grid size-9 place-items-center rounded-full bg-black/30 text-white backdrop-blur-md transition-colors hover:bg-black/45\"\n >\n \n \n
\n
\n

\n Navigation\n

\n

\n Edge peeks: predictive back and the end of mystery navigation\n

\n
\n \n

Mara Okafor · 6 min read

\n
\n

\n Android 14 made the back gesture honest. Pull from the left edge and the current\n screen shrinks in your hand, revealing exactly where you'll land before you\n commit.\n

\n

\n Let go early and it springs back. Flick and it's gone. No leap of faith.\n

\n
\n
\n

Drag from the left edge

\n
\n \n \n\n \n \n \n
\n \n );\n};\n","path":"/predictive-back.tsx","target":"uicapsule/predictive-back/predictive-back.tsx","type":"registry:file"},{"content":"\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { PredictiveBack } from \"./predictive-back\";\n\n// Light pools on the left, the edge the back gesture pulls from.\nconst backdrop: CSSProperties = {\n background: [\n \"radial-gradient(ellipse 45% 80% at 0% 50%, rgb(176 82 48 / 0.4), transparent 70%)\",\n \"radial-gradient(ellipse 50% 55% at 50% 45%, rgb(110 48 30 / 0.35), transparent 72%)\",\n \"linear-gradient(100deg, #3a1a10 0%, #26110b 45%, #140806 100%)\",\n ].join(\", \"),\n};\n\nconst Preview = () => (\n
\n \n
\n);\n\nexport default Preview;\n","path":"/preview.tsx","target":"uicapsule/predictive-back/preview.tsx","type":"registry:file"}],"homepage":"https://www.uicapsule.com/ui/predictive-back","name":"predictive-back","registryDependencies":[],"title":"Predictive Back","type":"registry:block"}