{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-create", "title": "Card Create", "description": "A phone app issues a yellow debit card and flips through color options.", "dependencies": ["remotion", "@remotion/google-fonts"], "registryDependencies": ["@remocn/gsh"], "files": [ { "path": "registry/remocn/card-create/index.tsx", "content": "\"use client\";\n\nimport { loadFont } from \"@remotion/google-fonts/HankenGrotesk\";\nimport type React from \"react\";\nimport { useId } from \"react\";\nimport {\n AbsoluteFill,\n Easing,\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});\n\nexport interface CardCreateProps {\n /** Engraved on the new card. */\n holder?: string;\n last4?: string;\n /** Swatches; the card prints in colors[0] and gets tapped through colors[1..3]. */\n colors?: string[];\n finishes?: string[];\n accent?: string;\n speed?: number;\n theme?: \"light\" | \"dark\";\n /** Five lines beside the phone, one per beat. */\n lines?: [string, string, string, string, string];\n ground?: GshPresetId;\n groundParams?: Partial;\n}\n\nconst SW = 390;\nconst SH = 844;\nconst BEZEL = 12;\nconst BW = SW + BEZEL * 2;\nconst BH = SH + BEZEL * 2;\n\nconst CW = 330;\nconst CHT = Math.round(CW / 1.586);\nconst CX = (SW - CW) / 2;\nconst SLOT_Y = 170;\nconst CARD_Y = 188;\nconst SWATCH_Y = 424;\nconst TOOLS_Y = 484;\nconst TAP_NEW = 62;\nconst OUT = 64;\nconst SLOT = 72;\nconst PRINT = 84;\nconst SWATCH_TAPS = [136, 150, 164];\nconst NAME_TAB = 182;\nconst ENGRAVE = 188;\nconst DETAILS_TAB = 222;\nconst FLIP = 226;\nconst REVEAL_TAP = 256;\nconst SCRAMBLE = 258;\nconst ADD_TAP = 302;\nconst WALLET = 306;\n\nconst clamp = { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" } as const;\nconst MOVE = Easing.bezier(0.65, 0, 0.35, 1);\nconst ENTER = Easing.bezier(0.32, 0.72, 0, 1);\nconst EXIT = Easing.bezier(0.55, 0, 1, 0.45);\nconst HEAVY = { mass: 1, damping: 26, stiffness: 120 };\nconst CARD = { mass: 0.8, damping: 18, stiffness: 160 };\nconst CHIP = { mass: 0.5, damping: 12, stiffness: 200 };\n\nconst DARK = {\n copy: \"#f4f4f6\",\n copyMuted: \"rgba(244,244,246,0.52)\",\n scrim: \"rgba(2,3,8,0.3)\",\n frame:\n \"linear-gradient(155deg,#55565c 0%,#2a2b2f 30%,#3d3e43 62%,#1f2023 100%)\",\n phoneShadow:\n \"0 50px 100px -20px rgba(0,0,0,0.7), 0 18px 36px -12px rgba(0,0,0,0.5)\",\n screen: \"#000000\",\n text: \"#ffffff\",\n muted: \"#8d8d93\",\n chip: \"#1c1c1e\",\n pill: \"#ffffff\",\n pillText: \"#000000\",\n touch: \"rgba(255,255,255,0.18)\",\n};\nconst LIGHT: typeof DARK = {\n copy: \"#141518\",\n copyMuted: \"rgba(20,21,24,0.5)\",\n scrim: \"rgba(243,241,237,0.28)\",\n frame:\n \"linear-gradient(155deg,#f1f1f3 0%,#c4c4ca 30%,#e2e2e6 62%,#b3b3ba 100%)\",\n phoneShadow:\n \"0 50px 90px -24px rgba(30,32,44,0.32), 0 14px 30px -10px rgba(30,32,44,0.18)\",\n screen: \"#f6f6f8\",\n text: \"#111114\",\n muted: \"#74747a\",\n chip: \"#e8e8ec\",\n pill: \"#111114\",\n pillText: \"#ffffff\",\n touch: \"rgba(20,20,30,0.2)\",\n};\ntype Palette = typeof DARK;\n\nconst STACK = [\n { color: \"#2a2b30\", label: \"Metal\", last4: \"7702\" },\n { color: \"#b9b4ab\", label: \"Stone\", last4: \"3158\" },\n { color: \"\", label: \"Standard\", last4: \"0446\" },\n];\n\nfunction hash(n: number) {\n const x = Math.sin(n * 91.7 + 47.3) * 43758.5453;\n return x - Math.floor(x);\n}\n\nfunction inkOn(hex: string) {\n const h = hex.replace(\"#\", \"\");\n const n = Number.parseInt(\n h.length === 3\n ? h\n .split(\"\")\n .map((x) => x + x)\n .join(\"\")\n : h.slice(0, 6),\n 16,\n );\n const lum =\n (0.2126 * ((n >> 16) & 255) +\n 0.7152 * ((n >> 8) & 255) +\n 0.0722 * (n & 255)) /\n 255;\n return lum > 0.62 ? \"#15161a\" : \"#ffffff\";\n}\nconst GRAIN = `url(\"data:image/svg+xml;utf8,\")`;\nconst gloss = (color: string) =>\n `${GRAIN}, linear-gradient(140deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 38%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.14) 100%), ${color}`;\nconst cardEdge = (color: string) =>\n inkOn(color) === \"#ffffff\"\n ? \"inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.07)\"\n : \"inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 0 1px rgba(0,0,0,0.08)\";\n\nfunction Chip() {\n const id = `chip${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Contactless({ color }: { color: string }) {\n return (\n \n {[4, 8, 12, 16].map((x, i) => (\n \n ))}\n \n );\n}\n\nfunction CardFront({\n color,\n prev,\n wipe = 1,\n label,\n holder,\n shown,\n engraveAt,\n f,\n last4,\n}: {\n color: string;\n prev?: string;\n wipe?: number;\n label: string;\n holder: string;\n shown: number;\n engraveAt?: (i: number) => number;\n f: number;\n last4: string;\n}) {\n const ink = inkOn(color);\n const edge = wipe * 1.5 - 0.25;\n const letters = holder.toUpperCase().split(\"\");\n return (\n \n {prev && wipe < 1 ? (\n \n ) : null}\n \n fernway\n \n \n {label}\n \n
\n \n
\n
\n \n
\n \n {letters.slice(0, shown).map((ch, i) => {\n const t = engraveAt ? f - engraveAt(i) : 99;\n const settle = interpolate(t, [0, 5], [0, 1], {\n ...clamp,\n easing: Easing.bezier(0.22, 1, 0.36, 1),\n });\n return (\n \n {ch}\n \n );\n })}\n \n \n \n •• {last4}\n \n \n debit\n \n \n \n );\n}\n\nfunction CardBack({\n color,\n number,\n exp,\n cvv,\n}: {\n color: string;\n number: string;\n exp: string;\n cvv: string;\n}) {\n const ink = inkOn(color);\n const label: React.CSSProperties = {\n fontSize: 11,\n fontWeight: 400,\n opacity: 0.65,\n };\n const val: React.CSSProperties = {\n fontSize: 17,\n fontWeight: 400,\n fontVariantNumeric: \"tabular-nums\",\n letterSpacing: \"0.04em\",\n marginTop: 3,\n };\n return (\n \n
Card number
\n
{number}
\n
\n
\n
Expiry
\n
{exp}
\n
\n
\n
CVV
\n
{cvv}
\n
\n
\n \n \n \n \n \n \n fernway\n \n \n );\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 \n );\n}\n\nfunction Phone({ children, c }: { children: React.ReactNode; c: Palette }) {\n const screen = c.screen;\n const home = c.text;\n const side = (s: \"left\" | \"right\", top: number, h: number) => (\n \n );\n return (\n
\n {side(\"left\", 168, 30)}\n {side(\"left\", 226, 60)}\n {side(\"left\", 298, 60)}\n {side(\"right\", 258, 96)}\n \n \n \n {children}\n \n \n
\n \n );\n}\n\nexport function CardCreate({\n holder = \"Maya Chen\",\n last4 = \"4821\",\n colors = [\"#232428\", \"#c4673f\", \"#8fa68a\", \"#d9bf86\", \"#3d5677\", \"#ebe8e1\"],\n finishes = [\"Graphite\", \"Terracotta\", \"Sage\", \"Sand\", \"Harbour\", \"Bone\"],\n accent = \"#3B5BFD\",\n speed = 1,\n theme = \"dark\",\n lines = [\n \"Spin up a new card.\",\n \"Pick a finish.\",\n \"Put your name on it.\",\n \"Only you see the number.\",\n \"Ready to spend.\",\n ],\n ground,\n groundParams,\n}: CardCreateProps) {\n const frame = useCurrentFrame();\n const { fps, width, height } = useVideoConfig();\n const f = frame * speed;\n const dark = theme !== \"light\";\n const c: Palette = dark ? DARK : LIGHT;\n const tall = height > width;\n const W = tall ? 720 : 1280;\n const H = tall ? 1280 : 720;\n const u = Math.min(width / W, height / H);\n const k = tall ? (H * 0.72) / BH : (H * 0.94) / BH;\n const phoneCx = tall ? W / 2 : W * 0.68;\n const phoneCy = tall ? H - 30 - (BH * k) / 2 : H / 2;\n\n const sp = (at: number, config: Partial = CARD) =>\n spring({ frame: f - at, fps, config });\n const bump = (at: number) =>\n Math.max(0, Math.min(1, sp(at - 1, CHIP) - sp(at + 5, CHIP)));\n const enter = (v: number, dy = 14): React.CSSProperties => ({\n opacity: Math.min(1, v * 1.4),\n transform: `translateY(${(1 - v) * dy}px)`,\n });\n\n const palette =\n colors.length >= 4\n ? colors\n : [...colors, ...STACK.map((s) => s.color || accent)];\n const swatches = palette.slice(0, 6);\n const swatchX = (i: number) => SW / 2 + (i - (swatches.length - 1) / 2) * 50;\n const taps = SWATCH_TAPS.map((t, i) => ({\n t,\n idx: Math.min(i + 1, swatches.length - 1),\n }));\n let colorIdx = 0;\n let prevIdx = 0;\n let wipe = 1;\n for (const tp of taps) {\n if (f >= tp.t + 1) {\n prevIdx = colorIdx;\n colorIdx = tp.idx;\n wipe = interpolate(f, [tp.t + 1, tp.t + 13], [0, 1], {\n ...clamp,\n easing: Easing.bezier(0.65, 0, 0.35, 1),\n });\n }\n }\n const lastTap = taps.filter((tp) => f >= tp.t + 1).pop();\n const ring = sp(lastTap ? lastTap.t : -99, CHIP);\n const letters = holder.toUpperCase().split(\"\");\n const engraveAt = (i: number) => ENGRAVE + i * 2.4;\n const shown = letters.filter((_, i) => f >= engraveAt(i)).length;\n const flipA = sp(FLIP, HEAVY);\n const wal = sp(WALLET, HEAVY);\n const angle = flipA * 180 + wal * 180;\n const lift = Math.sin(Math.min(1, flipA) * Math.PI) * 0.06;\n const digits = `5274 8820 1934 ${last4}`;\n const scr = (s: string, offset: number) =>\n s\n .split(\"\")\n .map((ch, j) => {\n if (ch === \" \" || ch === \"/\" || offset + j >= 15) return ch;\n const settle = SCRAMBLE + (offset + j) * 0.9;\n if (f < SCRAMBLE) return \"•\";\n if (f >= settle + 4) return ch;\n return String(\n Math.floor(hash(j * 13 + offset + Math.floor(f / 2)) * 10),\n );\n })\n .join(\"\");\n const number = f < SCRAMBLE ? `•••• •••• •••• ${last4}` : scr(digits, 0);\n const exp = scr(\"09/29\", 19);\n const cvv = scr(\"417\", 25);\n const stackIn = STACK.map((_, i) => sp(8 + i * 6, CARD));\n const out = sp(OUT, HEAVY);\n const back = sp(WALLET + 6, CARD);\n const slot = sp(SLOT, CARD);\n const slotGone = interpolate(f, [PRINT + 34, PRINT + 44], [1, 0], clamp);\n const print = interpolate(f, [PRINT, PRINT + 30], [0, 1], {\n ...clamp,\n easing: ENTER,\n });\n const sweep = interpolate(f, [PRINT + 18, PRINT + 40], [-0.4, 1.4], {\n ...clamp,\n easing: MOVE,\n });\n const custIn = sp(SLOT + 6, CARD);\n const custOut = interpolate(f, [ADD_TAP + 1, ADD_TAP + 7], [1, 0], {\n ...clamp,\n easing: EXIT,\n });\n const tool = f >= DETAILS_TAB + 1 ? 2 : f >= NAME_TAB + 1 ? 1 : 0;\n const toast = sp(WALLET + 26, CHIP);\n const newY =\n f < WALLET\n ? CARD_Y - (1 - print) * (CHT + 18)\n : CARD_Y + wal * (190 + 3 * 52 - CARD_Y);\n const toolX = (i: number) => SW / 2 + (i - 1) * 112;\n const path = [\n { t: 44, x: 300, y: 700 },\n { t: TAP_NEW, x: SW / 2 - 64, y: 580 },\n ...taps.map((tp) => ({ t: tp.t, x: swatchX(tp.idx), y: SWATCH_Y + 18 })),\n { t: NAME_TAB, x: toolX(1), y: TOOLS_Y + 19 },\n { t: DETAILS_TAB, x: toolX(2), y: TOOLS_Y + 19 },\n { t: REVEAL_TAP, x: CX + CW - 33, y: CARD_Y + 33 },\n { t: ADD_TAP, x: SW / 2 + 30, y: SH - 69 },\n ];\n let touch = path[0];\n for (let i = 0; i < path.length - 1; i++) {\n const a = path[i];\n const b = path[i + 1];\n const s = a.t + 2;\n const e = Math.max(s + 1, b.t - 2);\n if (f >= s) {\n const p = MOVE(Math.min(1, (f - s) / (e - s)));\n const arc =\n Math.sin(Math.PI * p) *\n Math.min(40, Math.hypot(b.x - a.x, b.y - a.y) * 0.12);\n touch = {\n t: f,\n x: a.x + (b.x - a.x) * p,\n y: a.y + (b.y - a.y) * p - arc,\n };\n }\n }\n const touchOpacity = interpolate(\n f,\n [\n 44,\n 52,\n TAP_NEW + 6,\n TAP_NEW + 14,\n SWATCH_TAPS[0] - 16,\n SWATCH_TAPS[0] - 8,\n ADD_TAP + 5,\n ADD_TAP + 11,\n ],\n [0, 1, 1, 0, 0, 1, 1, 0],\n clamp,\n );\n const touchPress = Math.max(...path.slice(1).map((p) => bump(p.t)));\n const camS = interpolate(f, [0, 370], [1, 1.03], clamp);\n const rise = sp(0, HEAVY);\n\n const stackCard = (i: number, y: number, style: React.CSSProperties) => (\n \n \n \n );\n const walletPhase = f >= WALLET;\n const count = walletPhase ? 4 : 3;\n const titleA = walletPhase ? back : 1 - out;\n\n const beats = [0, SWATCH_TAPS[0] - 14, NAME_TAB - 2, DETAILS_TAB - 2, WALLET];\n const copyLine = (i: number) => {\n const inAt = beats[i] + (i === 0 ? 8 : 0);\n const outAt = beats[i + 1];\n const pin = interpolate(f, [inAt, inAt + 14], [0, 1], {\n ...clamp,\n easing: ENTER,\n });\n const pout =\n outAt === undefined\n ? 0\n : interpolate(f, [outAt - 2, outAt + 6], [0, 1], {\n ...clamp,\n easing: EXIT,\n });\n if (pin <= 0 || pout >= 1) return null;\n return (\n \n {lines[i]}\n \n );\n };\n\n return (\n \n \n \n \n \n {lines.map((_, i) => copyLine(i))}\n \n \n \n \n \n \n Cards\n \n
\n {count} cards · Fernway\n
\n \n {STACK.map((_, i) => {\n if (!walletPhase) {\n const v = stackIn[i];\n const o = sp(OUT + i * 3, HEAVY);\n return stackCard(i, 196 + i * 60, {\n transform: `translateY(${(1 - v) * 640 - o * 340}px) rotate(${(1 - v) * (i - 1) * 8}deg) scale(${1 - o * 0.08})`,\n opacity: 1 - o,\n });\n }\n const v = sp(WALLET + 6 + i * 3, CARD);\n return stackCard(i, 190 + i * 52, {\n transform: `translateY(${(1 - v) * -28}px) scale(${0.97 + v * 0.03})`,\n opacity: Math.min(1, v * 1.4),\n });\n })}\n \n \n \n +\n \n New card\n \n \n Manage\n \n \n {f >= SLOT ? (\n
\n \n \n \n \n \n Skip\n \n
\n \n Customise card\n \n \n {swatches.map((col, i) => (\n tp.idx === i)?.t ?? -99) * 0.12})`,\n ...enter(sp(PRINT + 20 + i * 2, CHIP), 10),\n }}\n />\n ))}\n {[\"Colour\", \"Name\", \"Details\"].map((t, i) => (\n \n {t}\n \n ))}\n {[\n `Virtual · ${finishes[colorIdx] ?? \"Custom\"}`,\n `Printed on the front as ${holder.toUpperCase()}`,\n \"Only you can see the full number\",\n ].map((hint, i) => {\n const on = [PRINT + 34, NAME_TAB + 2, DETAILS_TAB + 2][i];\n const off = [NAME_TAB + 1, DETAILS_TAB + 1, 9999][i];\n const v =\n interpolate(f, [on, on + 6], [0, 1], clamp) *\n interpolate(f, [off, off + 4], [1, 0], clamp) *\n (i === 0 ? 0.35 + 0.65 * wipe : 1);\n return (\n \n {hint}\n \n );\n })}\n \n Add to wallet\n \n \n ) : null}\n {f >= PRINT ? (\n \n 0.2 ||\n Math.cos((angle * Math.PI) / 180) < -0.2\n ? dark\n ? \"0 18px 40px rgba(0,0,0,0.45)\"\n : \"0 2px 4px rgba(20,20,30,0.06), 0 18px 36px rgba(20,20,30,0.16)\"\n : \"none\",\n borderRadius: 16,\n }}\n >\n \n \n \n \n \n \n \n \n \n ) : null}\n \n \n \n \n \n \n Card ready to use\n \n \n \n \n \n \n );\n}\n", "type": "registry:component", "target": "components/remocn/card-create.tsx" } ], "type": "registry:component" }