{ "name": "comment-callout", "type": "registry:block", "description": "Viewer comment answered on screen: it lands from the feed, the ask is marked up, the creator hearts it, and the reply is typed and sent", "dependencies": [ "remotion", "@remotion/google-fonts" ], "registryDependencies": [ "ai-composer-utils", "code-syntax", "motion-tokens", "text-emphasis" ], "files": [ { "path": "registry/bases/default/scenes/comment-callout/index.tsx", "type": "registry:block", "content": "import { loadFont } from \"@remotion/google-fonts/Inter\";\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { stageScale } from \"@/remotion/lib/ai-composer-utils\";\nimport { CODE_THEMES } from \"@/remotion/lib/code-syntax\";\nimport { EASING } from \"@/remotion/lib/motion-tokens\";\nimport { markEmphasis, markerEdges } from \"@/remotion/lib/text-emphasis\";\n\nconst { fontFamily } = loadFont(\"normal\", {\n weights: [\"400\", \"500\", \"600\", \"700\"],\n subsets: [\"latin\"],\n});\n\n/** Reference stage the card is laid out against, then uniformly scaled. */\nconst REF_WIDTH = 1280;\nconst REF_HEIGHT = 720;\n\nconst CARD_WIDTH = 840;\nconst AVATAR = 68;\nconst BODY_SIZE = 40;\nconst BODY_LINE = 1.2;\n\n/** Characters per second the reply is typed at. */\nconst REPLY_CPS = 34;\n\nexport type CommentCalloutProps = {\n /** The viewer comment being answered. */\n body?: string;\n /** Display name of the commenter. */\n author?: string;\n /** Social handle, also used on the reply line. */\n handle?: string;\n /** Avatar initials. Falls back to the first two letters of `author`. */\n initials?: string;\n /** Relative time shown next to the handle, e.g. \"2h\". */\n timestamp?: string;\n /**\n * Substring of `body` to mark up as the creator emphasises the ask.\n * Matched case-insensitively; omit to skip the highlight beat.\n */\n highlight?: string;\n /** The answer typed back. Omit to end the scene on the comment itself. */\n reply?: string;\n /** Label above the composer. */\n replyLabel?: string;\n /** Like count before the creator hearts the comment. */\n likes?: number;\n accentColor?: string;\n /** Overrides the page background behind the card. */\n backgroundColor?: string;\n theme?: \"dark\" | \"light\";\n /** Animation speed multiplier. */\n speed?: number;\n};\n\n/** Drawn, not typed โ€” emoji render inconsistently across platforms. */\nconst Heart: React.FC<{ size: number; color: string; fill: number }> = ({\n size,\n color,\n fill,\n}) => (\n \n \n \n);\n\nconst Reply: React.FC<{ size: number; color: string }> = ({ size, color }) => (\n \n \n \n);\n\nconst Send: React.FC<{ size: number; color: string }> = ({ size, color }) => (\n \n \n \n);\n\nconst Check: React.FC<{ size: number; color: string; progress: number }> = ({\n size,\n color,\n progress,\n}) => {\n const length = 22;\n return (\n \n \n \n );\n};\n\n/** Word gap in the comment body, also bridged by the marker. */\nconst WORD_GAP = \"0.3em\";\n\n/**\n * A viewer comment staged the way a creator actually uses one: it arrives from\n * the feed, the ask gets marked up, the creator hearts it, and the answer is\n * typed back and sent โ€” rather than a quote card fading into place.\n */\nexport const CommentCallout: React.FC = ({\n body = \"Can you break down how you built that transition?\",\n author = \"Alex Chen\",\n handle = \"@alexchen\",\n initials,\n timestamp = \"2h\",\n highlight = \"how you built that transition\",\n reply = \"Full breakdown drops Thursday โ€” here's the short version.\",\n replyLabel,\n likes = 128,\n accentColor = \"#F472B6\",\n backgroundColor,\n theme = \"dark\",\n speed = 1,\n}) => {\n const rawFrame = useCurrentFrame();\n const { width, height, fps } = useVideoConfig();\n const palette = CODE_THEMES[theme];\n const page = backgroundColor ?? palette.page;\n const scale = stageScale(width, height, REF_WIDTH, REF_HEIGHT);\n const frame = rawFrame * speed;\n\n const seconds = (value: number) => value * fps;\n const clamp = {\n extrapolateLeft: \"clamp\" as const,\n extrapolateRight: \"clamp\" as const,\n };\n\n const words = markEmphasis(body, highlight);\n const markedCount = words.filter((word) => word.marked).length;\n const avatarText =\n initials ?? (author ? author.slice(0, 2).toUpperCase() : \"??\");\n\n // --- Beat plan ----------------------------------------------------------\n const markStart = seconds(0.85);\n const markStep = seconds(0.09);\n const markEnd = markStart + Math.max(markedCount - 1, 0) * markStep + seconds(0.34);\n const heartAt = markedCount > 0 ? markEnd + seconds(0.14) : seconds(1.0);\n const composerAt = heartAt + seconds(0.34);\n const typeStart = composerAt + seconds(0.3);\n const typeEnd = typeStart + (reply.length / REPLY_CPS) * fps;\n const sendAt = typeEnd + seconds(0.3);\n\n const cardEnter = spring({\n fps,\n frame,\n config: { damping: 17, stiffness: 125, mass: 0.85 },\n });\n const identityIn = interpolate(\n frame,\n [seconds(0.14), seconds(0.5)],\n [0, 1],\n { easing: EASING.enter, ...clamp },\n );\n const bodyIn = interpolate(frame, [seconds(0.26), seconds(0.66)], [0, 1], {\n easing: EASING.enter,\n ...clamp,\n });\n\n const hearted = interpolate(\n frame,\n [heartAt, heartAt + seconds(0.26)],\n [0, 1],\n { easing: EASING.enter, ...clamp },\n );\n // The count flips at the moment the heart fills, and rises as it flips.\n const countFlip = interpolate(\n frame,\n [heartAt + seconds(0.08), heartAt + seconds(0.3)],\n [0, 1],\n { easing: EASING.enter, ...clamp },\n );\n\n const hasReply = reply.length > 0;\n const composerOpen = hasReply\n ? interpolate(frame, [composerAt, composerAt + seconds(0.32)], [0, 1], {\n easing: EASING.enter,\n ...clamp,\n })\n : 0;\n const typed = hasReply\n ? Math.round(interpolate(frame, [typeStart, typeEnd], [0, reply.length], clamp))\n : 0;\n const sent = hasReply\n ? interpolate(frame, [sendAt, sendAt + seconds(0.3)], [0, 1], {\n easing: EASING.enter,\n ...clamp,\n })\n : 0;\n // Press dip on the send control, right as the reply commits.\n const press = hasReply\n ? interpolate(\n frame,\n [sendAt - seconds(0.06), sendAt, sendAt + seconds(0.16)],\n [0, 1, 0],\n clamp,\n )\n : 0;\n const caretOn =\n hasReply &&\n frame > composerAt + seconds(0.18) &&\n sent < 0.5 &&\n (frame < typeStart || typed >= reply.length\n ? Math.floor(frame / (fps * 0.4)) % 2 === 0\n : true);\n\n const composerHeight = 118;\n\n return (\n \n \n \n\n \n
\n \n \n {avatarText}\n
\n
\n \n {author}\n \n {handle}\n {timestamp ? (\n \n ยท {timestamp}\n \n ) : null}\n
\n \n\n \n {words.map((word, index) => {\n // Marker sweeps word by word, so it tracks a wrapped phrase.\n const mark = word.marked\n ? interpolate(\n frame,\n [\n markStart + word.order * markStep,\n markStart + word.order * markStep + seconds(0.34),\n ],\n [0, 1],\n { easing: EASING.enter, ...clamp },\n )\n : 0;\n\n return (\n \n {word.marked ? (\n \n ) : null}\n {word.text}\n \n );\n })}\n

\n\n \n 0.5 ? accentColor : palette.faint,\n fontSize: 22,\n fontWeight: 500,\n transform: `scale(${1 + Math.sin(Math.PI * hearted) * 0.09})`,\n transformOrigin: \"left center\",\n }}\n >\n 0.5 ? accentColor : palette.faint}\n fill={hearted}\n />\n \n {likes + (countFlip > 0.5 ? 1 : 0)}\n \n \n 0.2 ? accentColor : palette.faint,\n fontSize: 22,\n fontWeight: 500,\n }}\n >\n 0.2 ? accentColor : palette.faint}\n />\n {replyLabel ?? \"Reply\"}\n \n \n \n\n {hasReply ? (\n 0.5 ? \"14\" : \"0A\"}`,\n }}\n >\n \n
\n \n Replying to {handle}\n
\n 0.4 ? palette.fg : palette.dim,\n fontSize: 25,\n fontWeight: 500,\n lineHeight: 1.25,\n whiteSpace: \"pre-wrap\",\n }}\n >\n {reply.slice(0, typed)}\n {caretOn ? (\n \n ) : null}\n \n \n 0.5 || typed >= reply.length\n ? accentColor\n : `${accentColor}26`,\n transform: `scale(${1 - press * 0.12})`,\n }}\n >\n {sent > 0.02 ? (\n \n ) : (\n = reply.length ? palette.page : accentColor}\n />\n )}\n \n \n \n ) : null}\n \n \n );\n};\n" } ], "atlas": { "lane": "blocks", "drive": "time", "tier": "advanced", "tags": [ "creator", "social" ] } }