{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "phone-scroll", "title": "Phone Scroll", "description": "A phone app screen flicks through stops while a headline sits beside it.", "dependencies": ["remotion", "@remotion/google-fonts"], "registryDependencies": ["@remocn/gsh"], "files": [ { "path": "registry/remocn/phone-scroll/index.tsx", "content": "\"use client\";\n\nimport { loadFont } from \"@remotion/google-fonts/Figtree\";\nimport { loadFont as loadSerif } from \"@remotion/google-fonts/InstrumentSerif\";\nimport type React from \"react\";\nimport { useId } from \"react\";\nimport {\n AbsoluteFill,\n Easing,\n Img,\n interpolate,\n spring,\n useCurrentFrame,\n useVideoConfig,\n} from \"remotion\";\nimport type { GradientParams } from \"@/lib/remocn/gsh/gradient-engine\";\nimport { GshGround } from \"@/lib/remocn/gsh/gsh-ground\";\nimport type { GshPresetId } from \"@/lib/remocn/gsh/presets\";\n\nconst { fontFamily } = loadFont(\"normal\", {\n weights: [\"300\", \"400\"],\n subsets: [\"latin\"],\n});\nconst { fontFamily: serifFamily } = loadSerif(\"italic\", {\n weights: [\"400\"],\n subsets: [\"latin\"],\n});\n\nexport interface PhoneScrollProps {\n /** Tall screenshot, rendered 393pt wide and scrolled. */\n src?: string;\n /** Scroll offsets (screen points) to flick to, one flick per stop. */\n stops?: number[];\n /** Headline that slides in beside the phone. Pass \"\" to hide. */\n label?: string;\n /** Part of `label` set in the italic serif. */\n labelAccent?: string;\n eyebrow?: string;\n /** Custom screen content (393pt wide), scrolled like the screenshot. */\n children?: React.ReactNode;\n accent?: string;\n speed?: number;\n theme?: \"light\" | \"dark\";\n ground?: GshPresetId;\n groundParams?: Partial;\n}\n\nconst SW = 393;\nconst SH = 852;\nconst BEZEL = 11;\nconst BW = SW + BEZEL * 2;\nconst BH = SH + BEZEL * 2;\nconst HEADER_H = 196;\n\nconst FLICK_START = 40;\nconst PRESS = 5;\nconst DRAG = 6;\nconst TAU = 10;\nconst SEG = 46;\n\nconst clamp = { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" } as const;\nconst ENTER = Easing.bezier(0.32, 0.72, 0, 1);\nconst LIGHT = Easing.bezier(0.22, 1, 0.36, 1);\nconst HEAVY = { mass: 1, damping: 26, stiffness: 120 };\nconst CARD = { mass: 0.8, damping: 18, stiffness: 160 };\n\nfunction scrollAt(f: number, stops: number[], fps: number): number {\n let base = 0;\n for (let i = 0; i < stops.length; i++) {\n const local = f - (FLICK_START + i * SEG) - PRESS;\n if (local <= 0) return base;\n const dist = stops[i] - base;\n const over = Math.sign(dist) * Math.min(26, Math.abs(dist) * 0.035);\n const v0 = (dist + over) / (TAU + DRAG / 2);\n const d0 = (v0 * DRAG) / 2;\n let y: number;\n if (local < DRAG) {\n y = base + d0 * (local / DRAG) ** 2;\n } else {\n const t = local - DRAG;\n const momentum =\n base + d0 + (dist + over - d0) * (1 - Math.exp(-t / TAU));\n const back = spring({\n frame: Math.max(0, t - TAU * 1.9),\n fps,\n config: CARD,\n });\n y = momentum - over * back;\n }\n if (i === stops.length - 1 || local < SEG - PRESS) return y;\n base = stops[i];\n }\n return base;\n}\n\ntype Scene = \"coast\" | \"alpine\" | \"desert\" | \"lake\" | \"aurora\";\ntype Look = {\n sky: [string, string, string];\n sun: string;\n haze: string;\n far: string;\n mid: string;\n near: string;\n fg: \"trees\" | \"dunes\" | \"cliff\";\n sunY: number;\n water?: string;\n snow?: boolean;\n lights?: boolean;\n};\nconst SCENES: Record = {\n coast: {\n sky: [\"#5F82B6\", \"#E2AE90\", \"#FBD6A8\"],\n sun: \"#FFF1D6\",\n haze: \"#F4C9A2\",\n far: \"#9C7A8C\",\n mid: \"#5A465A\",\n near: \"#1E1820\",\n fg: \"cliff\",\n sunY: 0.5,\n water: \"#46607F\",\n },\n alpine: {\n sky: [\"#2F66AE\", \"#86B1E0\", \"#DAE7F3\"],\n sun: \"#FFFFFF\",\n haze: \"#D3E1EF\",\n far: \"#8DA4C2\",\n mid: \"#465D7B\",\n near: \"#111C26\",\n fg: \"trees\",\n sunY: 0.06,\n snow: true,\n lights: true,\n },\n desert: {\n sky: [\"#4F7DB2\", \"#E3B489\", \"#F5D4A2\"],\n sun: \"#FFF2D8\",\n haze: \"#EFC38D\",\n far: \"#D29E70\",\n mid: \"#B26A40\",\n near: \"#6A3720\",\n fg: \"dunes\",\n sunY: 0.45,\n },\n lake: {\n sky: [\"#527FA6\", \"#B2CDD2\", \"#ECEFE4\"],\n sun: \"#FFFBEA\",\n haze: \"#DBE5DE\",\n far: \"#7B9995\",\n mid: \"#3A5A51\",\n near: \"#0F1E1A\",\n fg: \"trees\",\n sunY: 0.28,\n water: \"#557F88\",\n lights: true,\n },\n aurora: {\n sky: [\"#040914\", \"#0D1F3A\", \"#223F63\"],\n sun: \"#E8F7FF\",\n haze: \"#2A4A6C\",\n far: \"#28405F\",\n mid: \"#132238\",\n near: \"#050A13\",\n fg: \"trees\",\n sunY: -1,\n lights: true,\n },\n};\n\nfunction hash(n: number) {\n const s = Math.sin(n * 127.1 + 311.7) * 43758.5453;\n return s - Math.floor(s);\n}\n\nfunction ridge(\n seed: number,\n base: number,\n amp: number,\n sharp: boolean,\n w: number,\n h: number,\n) {\n const pts: string[] = [];\n for (let x = -8; x <= w + 8; x += 3) {\n let v = 0;\n for (let o = 0, a = 1, fq = 0.011; o < 5; o++, a *= 0.47, fq *= 2.2) {\n const sn = Math.sin(x * fq + seed * (3.1 + o * 1.7));\n v += (sharp && o < 2 ? 1 - Math.abs(sn) * 1.7 : sn) * a;\n }\n pts.push(`${x},${(base - v * amp).toFixed(1)}`);\n }\n return `M-8,${h} L${pts.join(\" L\")} L${w + 8},${h} Z`;\n}\n\nfunction treeline(\n seed: number,\n base: number,\n tall: number,\n w: number,\n h: number,\n) {\n let d = `M-8,${h} L-8,${base} L${w + 8},${base} L${w + 8},${h} Z`;\n for (let x = -6, i = 0; x < w + 8; i++) {\n const edge = Math.abs(x / w - 0.5) * 2;\n const ht = tall * (0.12 + edge ** 1.5 * 0.7 + hash(seed + i * 1.37) * 0.3);\n const tw = ht * (0.26 + hash(seed + i * 2.11) * 0.12);\n for (let k = 0; k < 4; k++) {\n const yb = base - ht * (0.06 + k * 0.19);\n const wk = tw * (1 - k * 0.22);\n d += ` M${(x - wk / 2).toFixed(1)},${yb.toFixed(1)} L${x.toFixed(1)},${(yb - ht * 0.5).toFixed(1)} L${(x + wk / 2).toFixed(1)},${yb.toFixed(1)} Z`;\n }\n x += 2 + hash(seed + i * 3.7) * tw * 0.8;\n }\n return d;\n}\n\nfunction headland(seed: number, w: number, h: number) {\n const pts: string[] = [];\n for (let x = -8; x <= w * 0.55; x += 3) {\n const t = Math.max(0, x) / (w * 0.55);\n const n =\n Math.sin(x * 0.09 + seed) * 0.5 + Math.sin(x * 0.23 + seed * 2.3) * 0.3;\n pts.push(\n `${x},${(h * 0.66 + t ** 1.8 * h * 0.36 + n * h * 0.02).toFixed(1)}`,\n );\n }\n return `M-8,${h} L${pts.join(\" L\")} L${w * 0.55},${h} Z`;\n}\n\nfunction Scenery({\n scene,\n seed,\n w,\n h,\n}: {\n scene: Scene;\n seed: number;\n w: number;\n h: number;\n}) {\n const id = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n const p = SCENES[scene];\n const night = p.sunY < 0;\n const hz = h * (p.water ? 0.6 : 0.66);\n const sunX = w * (0.28 + hash(seed) * 0.44);\n const sunY = h * p.sunY;\n const ns = Math.round(seed * 10);\n const u = (k: string) => `url(#${id}${k})`;\n const lit = (\n k: string,\n c: string,\n top: number,\n bottom: number,\n snow = false,\n ) => (\n \n {snow ? (\n \n ) : (\n \n )}\n {snow ? : null}\n \n \n \n );\n const peaks = scene === \"alpine\" || scene === \"aurora\";\n const farD = ridge(\n seed + 9,\n hz - 26,\n h * (scene === \"alpine\" ? 0.2 : peaks ? 0.13 : 0.07),\n peaks,\n w,\n h,\n );\n const midD = ridge(\n seed,\n hz - 2,\n h * (scene === \"alpine\" ? 0.16 : peaks ? 0.1 : 0.06),\n peaks,\n w,\n h,\n );\n const scenery = (\n <>\n \n \n \n \n \n );\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {lit(\"lf\", p.far, hz - 26 - h * 0.15, hz + 10, p.snow)}\n {lit(\"lm\", p.mid, hz - 2 - h * 0.17, hz + 40, p.snow)}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {night\n ? Array.from({ length: 70 }, (_, i) => (\n \n ))\n : null}\n {night ? (\n \n \n \n \n \n ) : (\n <>\n \n \n \n )}\n {scenery}\n {p.water ? (\n \n \n \n \n {night ? null : (\n \n )}\n {scenery}\n \n \n {night\n ? null\n : Array.from({ length: 14 }, (_, i) => (\n \n ))}\n \n ) : null}\n \n {p.fg === \"trees\" ? (\n \n ) : p.fg === \"dunes\" ? (\n \n ) : (\n \n )}\n \n {p.lights\n ? [0, 1, 2].map((i) => {\n const lx = w * (0.58 + hash(seed + 11) * 0.2) + i * 6;\n const ly = h * 0.9 - (i % 2) * 3;\n return (\n \n \n \n \n );\n })\n : null}\n \n \n \n );\n}\n\nconst LISTINGS: {\n title: string;\n meta: string;\n dates: string;\n price: number;\n rating: string;\n scene: Scene;\n}[] = [\n {\n title: \"Halcyon Cove, Portugal\",\n meta: \"Ocean views · 2 beds\",\n dates: \"Nov 12 – 17\",\n price: 218,\n rating: \"4.96\",\n scene: \"coast\",\n },\n {\n title: \"Fernway Lodge, Norway\",\n meta: \"Mountain views · 3 beds\",\n dates: \"Dec 2 – 7\",\n price: 304,\n rating: \"4.92\",\n scene: \"alpine\",\n },\n {\n title: \"Quarry House, Morocco\",\n meta: \"Desert stay · 1 bed\",\n dates: \"Jan 8 – 13\",\n price: 142,\n rating: \"4.88\",\n scene: \"desert\",\n },\n {\n title: \"Tessel Cabin, Canada\",\n meta: \"Lakefront · 2 beds\",\n dates: \"Nov 20 – 25\",\n price: 189,\n rating: \"4.97\",\n scene: \"lake\",\n },\n {\n title: \"Lumen Dome, Iceland\",\n meta: \"Northern lights · 1 bed\",\n dates: \"Feb 3 – 8\",\n price: 276,\n rating: \"4.99\",\n scene: \"aurora\",\n },\n];\n\ninterface AppColors {\n bg: string;\n ink: string;\n muted: string;\n hair: string;\n pill: string;\n pillShadow: string;\n bar: string;\n dark: boolean;\n}\n\nfunction appColors(dark: boolean): AppColors {\n return dark\n ? {\n bg: \"#121214\",\n ink: \"#F2F2F3\",\n muted: \"#9C9CA3\",\n hair: \"rgba(255,255,255,0.1)\",\n pill: \"#1D1D20\",\n pillShadow:\n \"0 0 0 0.5px rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.4)\",\n bar: \"rgba(18,18,20,0.96)\",\n dark,\n }\n : {\n bg: \"#FFFFFF\",\n ink: \"#222222\",\n muted: \"#6A6A6A\",\n hair: \"#EBEBEB\",\n pill: \"#FFFFFF\",\n pillShadow: \"0 0 0 0.5px rgba(0,0,0,0.08), 0 3px 12px rgba(0,0,0,0.1)\",\n bar: \"rgba(255,255,255,0.97)\",\n dark,\n };\n}\n\nfunction Icon({\n d,\n size = 24,\n color,\n}: {\n d: string;\n size?: number;\n color: string;\n}) {\n return (\n \n \n \n );\n}\n\nconst ICONS = {\n search: \"M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM20 20l-4-4\",\n heart: \"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\",\n trips: \"M4 8h16v11H4zM9 8V5h6v3\",\n inbox: \"M4 5h16v11H9l-5 4z\",\n user: \"M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21c1-4 4.5-6 8-6s7 2 8 6\",\n filter: \"M4 7h10M18 7h2M4 17h4M12 17h8M16 5v4M10 15v4\",\n cabin: \"M3 20h18M5 20V11l7-6 7 6v9M10 20v-5h4v5\",\n wave: \"M3 15c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 10c2-2 4-2 6 0s4 2 6 0 4-2 6 0\",\n peak: \"M3 20l6-11 4 6 2-3 6 8z\",\n sun: \"M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5\",\n lake: \"M3 17c3 2 15 2 18 0M6 13l3-5 3 5M12 13l3-6 3 6\",\n tag: \"M3.5 12.5V4.5h8l9 9-8 8zM8 8.5h.01\",\n};\n\nfunction StatusBar({ color }: { color: string }) {\n return (\n \n \n 9:41\n \n
\n \n {[0, 1, 2, 3].map((i) => (\n \n ))}\n \n \n \n
\n \n \n );\n}\n\nfunction ListingCard({\n l,\n i,\n c,\n}: {\n l: (typeof LISTINGS)[number];\n i: number;\n c: AppColors;\n}) {\n return (\n
\n \n \n {i === 0 ? (\n \n Guest favourite\n
\n ) : null}\n
\n \n \n \n
\n \n {[0, 1, 2, 3, 4].map((d) => (\n \n ))}\n \n \n \n {l.title}\n \n \n \n \n {l.rating}\n \n \n
{l.meta}
\n
\n {l.dates}\n
\n \n \n ${l.price}\n {\" \"}\n night\n \n \n );\n}\n\nfunction FeesNotice({ c }: { c: AppColors }) {\n return (\n \n \n \n Prices include all fees\n · 1,240 stays this week\n \n \n );\n}\n\nfunction AppHeader({ scrolled, c }: { scrolled: number; c: AppColors }) {\n const cats: [keyof typeof ICONS, string][] = [\n [\"cabin\", \"Cabins\"],\n [\"wave\", \"Beachfront\"],\n [\"peak\", \"Peaks\"],\n [\"sun\", \"Desert\"],\n [\"lake\", \"Lakes\"],\n ];\n return (\n \n \n \n \n
\n
\n Where to?\n
\n
\n Anywhere · Any week · Add guests\n
\n
\n \n \n \n \n \n {cats.map(([ic, name], i) => (\n \n \n \n {name}\n \n \n ))}\n \n \n );\n}\n\nfunction TabBar({ accent, c }: { accent: string; c: AppColors }) {\n const tabs: [keyof typeof ICONS, string][] = [\n [\"search\", \"Explore\"],\n [\"heart\", \"Wishlists\"],\n [\"trips\", \"Trips\"],\n [\"inbox\", \"Inbox\"],\n [\"user\", \"Profile\"],\n ];\n return (\n \n {tabs.map(([ic, name], i) => (\n \n \n \n {name}\n \n \n ))}\n \n );\n}\n\nfunction BuiltInFeed({ c }: { c: AppColors }) {\n return (\n
\n {LISTINGS.map((l, i) => (\n
\n \n {i === 1 ? : null}\n
\n ))}\n
\n );\n}\n\nfunction PhoneBody({\n children,\n c,\n}: {\n children: React.ReactNode;\n c: AppColors;\n}) {\n const btn = (side: \"left\" | \"right\", top: number, h: number) => (\n \n );\n return (\n
\n {btn(\"left\", 150, 32)}\n {btn(\"left\", 210, 62)}\n {btn(\"left\", 284, 62)}\n {btn(\"right\", 236, 98)}\n \n \n {children}\n \n \n
\n \n );\n}\n\nexport function PhoneScroll({\n src,\n stops = [930],\n label = \"Find your next stay in two taps.\",\n labelAccent = \"two taps.\",\n eyebrow = \"remocn for iOS\",\n children,\n accent = \"#3B5BFD\",\n speed = 1,\n theme = \"light\",\n ground,\n groundParams,\n}: PhoneScrollProps) {\n const frame = useCurrentFrame();\n const { fps, width, height } = useVideoConfig();\n const f = frame * speed;\n const blurId = `${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}mb`;\n const dark = theme === \"dark\";\n const c = appColors(dark);\n const tall = height > width;\n\n const hasLabel = Boolean(label);\n const k = tall ? (height * 0.6) / BH : (height * 0.9) / BH;\n const phoneCx = tall || !hasLabel ? width / 2 : width * 0.33;\n const phoneCy = tall && hasLabel ? height * 0.63 : height / 2;\n\n const rise = spring({ frame: f, fps, config: HEAVY });\n const level = spring({ frame: f - 6, fps, config: HEAVY });\n const ty = (1 - rise) * height * 0.95;\n const rot = -8 * (1 - level);\n\n const y = scrollAt(f, stops, fps);\n const v = Math.abs(y - scrollAt(f - speed, stops, fps));\n const blur = Math.min(9, v * 0.09);\n\n const flick = Math.max(\n 0,\n Math.min(stops.length - 1, Math.floor((f - FLICK_START + 4) / SEG)),\n );\n const fl = f - (FLICK_START + flick * SEG);\n const prev = flick === 0 ? 0 : stops[flick - 1];\n const dist = stops[flick] - prev;\n const d0 =\n (((dist + Math.sign(dist) * Math.min(26, Math.abs(dist) * 0.035)) /\n (TAU + DRAG / 2)) *\n DRAG) /\n 2;\n const dragT = interpolate(fl, [PRESS, PRESS + DRAG], [0, 1], clamp);\n const dotY = SH * 0.74 - d0 * 0.55 * dragT * dragT;\n const dotIn = interpolate(fl, [0, 4], [0, 1], clamp);\n const dotOut = interpolate(\n fl,\n [PRESS + DRAG, PRESS + DRAG + 6],\n [1, 0],\n clamp,\n );\n const press = spring({ frame: fl, fps, config: CARD });\n const dotScale =\n interpolate(press, [0, 1], [1.3, 0.96]) *\n interpolate(fl, [PRESS + DRAG, PRESS + DRAG + 6], [1, 1.25], clamp);\n\n const typeIn = (d: number) =>\n interpolate(f, [16 + d, 32 + d], [0, 1], { ...clamp, easing: ENTER });\n const eyeIn = interpolate(f, [12, 26], [0, 1], { ...clamp, easing: LIGHT });\n const push = interpolate(f, [0, 120], [1, 1.03], clamp);\n\n const content = children ? (\n
{children}
\n ) : src ? (\n \n ) : (\n \n );\n\n const split =\n labelAccent && label.endsWith(labelAccent)\n ? [label.slice(0, label.length - labelAccent.length), labelAccent]\n : [label, \"\"];\n const ink = dark ? \"#F4F2EE\" : \"#16161A\";\n const sub = dark ? \"rgba(244,242,238,0.58)\" : \"rgba(22,22,26,0.55)\";\n const headSize = tall ? width * 0.105 : height * 0.088;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n 0.4 ? `url(#${blurId})` : undefined,\n }}\n >\n {content}\n \n {!children && !src ? (\n <>\n \n \n \n ) : null}\n = FLICK_START ? dotIn * dotOut : 0,\n transform: `scale(${dotScale})`,\n zIndex: 6,\n }}\n />\n \n \n {hasLabel ? (\n \n {eyebrow ? (\n \n {eyebrow}\n \n ) : null}\n
\n \n {split[0]}\n {split[1] ? (\n \n {split[1]}\n \n ) : null}\n
\n \n \n ) : null}\n \n \n );\n}\n", "type": "registry:component", "target": "components/remocn/phone-scroll.tsx" } ], "type": "registry:component" }