\n \n \n \n",[],[90,122],"7fdb9413-241d-4df6-b422-3360b9bcdd43","favicon.svg","019edcf8-c701-7546-af9f-0af205edff78",["D",1781823751846],"\n",[],[90,129],"0f7a109f-6af4-4595-b0e8-7a52fd9a0adb","lib","3ada6e32-a4fe-4984-b0c6-005cbe27694a",["D",1781823807423],[141,142],[90,136],{"_35":150,"_13":151,"_64":152,"_66":137,"_67":68,"_69":153,"_71":72,"_37":154,"_17":74,"_75":117,"_77":155,"_79":50,"_80":-5,"_99":156,"_18":157},{"_35":143,"_13":144,"_64":145,"_66":137,"_67":68,"_69":33,"_71":72,"_37":146,"_17":74,"_75":117,"_77":147,"_79":50,"_80":-5,"_99":148,"_18":149},"66a8bb91-d6d9-4ab9-82b5-838acd3ec714","newspaper.ts","ea733928-6b69-11f1-aa1d-1607ee4eb77e",["D",1781823807423],"// Newspaper clipping renderer — draws a procedurally generated newspaper page\n// onto a 2D canvas context with the user's keyword highlighted.\n// Pure rendering logic, no React. Used by both the live preview and the exporter.\n\nexport const CANVAS_W = 1080;\nexport const CANVAS_H = 1920;\n\n// A curated set of serif/condensed faces that read as \"newspaper\".\n// All are common system fonts so they render without external loads.\nconst HEADLINE_FONTS = [\n \"Georgia, serif\",\n \"'Times New Roman', Times, serif\",\n \"'Playfair Display', Georgia, serif\",\n \"'Didot', 'Bodoni MT', Georgia, serif\",\n \"'Garamond', Georgia, serif\",\n];\n\nconst BODY_FONTS = [\n \"Georgia, serif\",\n \"'Times New Roman', Times, serif\",\n \"'Palatino Linotype', Palatino, serif\",\n];\n\n// Lorem-ish filler tuned to look like dense newsprint.\nconst FILLER_WORDS =\n \"the report indicates that local officials gathered yesterday to discuss the matter at length while residents expressed mixed reactions across the region according to sources familiar with the situation who declined to be named citing the sensitive nature of the ongoing proceedings and the broader implications for the community in the months ahead as analysts weighed the potential outcomes against a backdrop of shifting public sentiment and renewed calls for transparency from elected representatives\"\n .split(\" \");\n\n// Deterministic seeded RNG so a given frame index always renders identically.\nfunction mulberry32(seed: number) {\n return function () {\n seed |= 0;\n seed = (seed + 0x6d2b79f5) | 0;\n let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\nfunction pick(rng: () => number, arr: T[]): T {\n return arr[Math.floor(rng() * arr.length)];\n}\n\nexport interface FrameConfig {\n text: string;\n frameIndex: number; // which clipping variant (changes fonts/layout/texture)\n highlightColor: string; // e.g. \"#ffe600\"\n paperTint: string; // base paper color\n}\n\n// Cache generated layouts so the animation loop doesn't recompute text wrapping\n// every frame — only the highlight sweep animates.\nconst layoutCache = new Map();\n\ninterface Word {\n text: string;\n isKeyword: boolean;\n}\ninterface Line {\n words: Word[];\n x: number;\n y: number;\n width: number;\n space: number; // justified space width\n}\ninterface Layout {\n bgFont: string;\n headlineFont: string;\n paperRot: number;\n paperX: number;\n paperY: number;\n paperW: number;\n paperH: number;\n headline: string;\n lines: Line[];\n keywordLineIndex: number;\n creases: { x: number; y: number; len: number; angle: number }[];\n}\n\nfunction layoutKey(c: FrameConfig) {\n return `${c.text}|${c.frameIndex}`;\n}\n\nfunction buildLayout(ctx: CanvasRenderingContext2D, cfg: FrameConfig): Layout {\n const key = layoutKey(cfg);\n const cached = layoutCache.get(key);\n if (cached) return cached;\n\n const rng = mulberry32(cfg.frameIndex * 9973 + cfg.text.length * 131 + 7);\n const headlineFont = pick(rng, HEADLINE_FONTS);\n const bgFont = pick(rng, BODY_FONTS);\n\n // Paper sits slightly rotated within the frame for a torn-clipping feel.\n const paperRot = (rng() - 0.5) * 0.06;\n const margin = 90;\n const paperX = margin + (rng() - 0.5) * 30;\n const paperY = 220 + (rng() - 0.5) * 40;\n const paperW = CANVAS_W - margin * 2;\n const paperH = CANVAS_H - paperY - 220;\n\n const keyword = cfg.text.trim() || \"BREAKING\";\n const headline = keyword.toUpperCase();\n\n // Body text: dense justified columns of filler with the keyword inserted once.\n const fontSize = 30;\n const lineHeight = 46;\n const padX = 60;\n const colWidth = paperW - padX * 2;\n\n ctx.font = `${fontSize}px ${bgFont}`;\n const spaceW = ctx.measureText(\" \").width;\n\n // Build a long word stream, splice the keyword into a chosen line later.\n const stream: string[] = [];\n const totalWords = 120;\n for (let i = 0; i < totalWords; i++) {\n stream.push(pick(rng, FILLER_WORDS));\n }\n\n const lines: Line[] = [];\n let current: string[] = [];\n let currentW = 0;\n const startY = paperY + 200;\n let y = startY;\n\n for (const w of stream) {\n const ww = ctx.measureText(w).width;\n if (currentW + ww + current.length * spaceW > colWidth && current.length) {\n lines.push(packLine(current, paperX + padX, y, colWidth, spaceW, ctx));\n y += lineHeight;\n current = [];\n currentW = 0;\n if (y > paperY + paperH - 80) break;\n }\n current.push(w);\n currentW += ww;\n }\n if (current.length && y <= paperY + paperH - 80) {\n lines.push(packLine(current, paperX + padX, y, colWidth, spaceW, ctx, true));\n }\n\n // Insert the keyword as its own emphasized word in a roughly central line.\n const keywordLineIndex = Math.min(\n lines.length - 1,\n Math.floor(lines.length * (0.4 + rng() * 0.2)),\n );\n if (lines[keywordLineIndex]) {\n const insertAt = Math.floor(rng() * lines[keywordLineIndex].words.length);\n lines[keywordLineIndex].words.splice(insertAt, 0, {\n text: keyword,\n isKeyword: true,\n });\n }\n\n // A few subtle creases/folds across the paper.\n const creases = Array.from({ length: 2 + Math.floor(rng() * 3) }, () => ({\n x: paperX + rng() * paperW,\n y: paperY + rng() * paperH,\n len: 200 + rng() * 400,\n angle: rng() * Math.PI,\n }));\n\n const layout: Layout = {\n bgFont,\n headlineFont,\n paperRot,\n paperX,\n paperY,\n paperW,\n paperH,\n headline,\n lines,\n keywordLineIndex,\n creases,\n };\n layoutCache.set(key, layout);\n return layout;\n}\n\nfunction packLine(\n words: string[],\n x: number,\n y: number,\n width: number,\n spaceW: number,\n ctx: CanvasRenderingContext2D,\n isLast = false,\n): Line {\n const wordObjs: Word[] = words.map((t) => ({ text: t, isKeyword: false }));\n let textW = 0;\n for (const w of words) textW += ctx.measureText(w).width;\n // Justify (stretch spaces) for all but the last line.\n const gaps = Math.max(1, words.length - 1);\n const space = isLast ? spaceW : (width - textW) / gaps;\n return { words: wordObjs, x, y, width, space };\n}\n\nexport function clearLayoutCache() {\n layoutCache.clear();\n}\n\n// Draw a single frame. `t` is animation progress 0..1 driving the highlight sweep.\nexport function drawFrame(\n ctx: CanvasRenderingContext2D,\n cfg: FrameConfig,\n t: number,\n) {\n const layout = buildLayout(ctx, cfg);\n\n // Backdrop (the area around the clipping).\n ctx.fillStyle = \"#1a1a1a\";\n ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);\n\n ctx.save();\n // Rotate around paper center for the torn-clipping tilt.\n const cx = layout.paperX + layout.paperW / 2;\n const cy = layout.paperY + layout.paperH / 2;\n ctx.translate(cx, cy);\n ctx.rotate(layout.paperRot);\n ctx.translate(-cx, -cy);\n\n drawPaper(ctx, layout, cfg);\n drawHeadline(ctx, layout, cfg);\n drawBody(ctx, layout, cfg, t);\n drawTexture(ctx, layout);\n\n ctx.restore();\n}\n\nfunction drawPaper(ctx: CanvasRenderingContext2D, l: Layout, cfg: FrameConfig) {\n // Drop shadow.\n ctx.save();\n ctx.shadowColor = \"rgba(0,0,0,0.5)\";\n ctx.shadowBlur = 40;\n ctx.shadowOffsetY = 18;\n ctx.fillStyle = cfg.paperTint;\n ctx.fillRect(l.paperX, l.paperY, l.paperW, l.paperH);\n ctx.restore();\n\n // Subtle aged gradient on the paper.\n const grad = ctx.createLinearGradient(\n l.paperX,\n l.paperY,\n l.paperX,\n l.paperY + l.paperH,\n );\n grad.addColorStop(0, \"rgba(255,255,255,0.0)\");\n grad.addColorStop(1, \"rgba(120,100,60,0.10)\");\n ctx.fillStyle = grad;\n ctx.fillRect(l.paperX, l.paperY, l.paperW, l.paperH);\n}\n\nfunction drawHeadline(ctx: CanvasRenderingContext2D, l: Layout, cfg: FrameConfig) {\n const padX = 60;\n // Masthead rule lines.\n ctx.strokeStyle = \"rgba(20,20,20,0.8)\";\n ctx.lineWidth = 4;\n ctx.beginPath();\n ctx.moveTo(l.paperX + padX, l.paperY + 70);\n ctx.lineTo(l.paperX + l.paperW - padX, l.paperY + 70);\n ctx.stroke();\n\n ctx.fillStyle = \"#111\";\n ctx.font = `italic 26px ${l.bgFont}`;\n ctx.textBaseline = \"alphabetic\";\n ctx.fillText(\"THE DAILY CHRONICLE\", l.paperX + padX, l.paperY + 50);\n ctx.font = `22px ${l.bgFont}`;\n const date = \"VOL. MMXXVI — LATE EDITION\";\n const dw = ctx.measureText(date).width;\n ctx.fillText(date, l.paperX + l.paperW - padX - dw, l.paperY + 50);\n\n // Big headline = the keyword.\n ctx.fillStyle = \"#0a0a0a\";\n let size = 96;\n ctx.font = `bold ${size}px ${l.headlineFont}`;\n const maxW = l.paperW - padX * 2;\n while (ctx.measureText(l.headline).width > maxW && size > 36) {\n size -= 4;\n ctx.font = `bold ${size}px ${l.headlineFont}`;\n }\n ctx.fillText(l.headline, l.paperX + padX, l.paperY + 165);\n\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(l.paperX + padX, l.paperY + 185);\n ctx.lineTo(l.paperX + l.paperW - padX, l.paperY + 185);\n ctx.stroke();\n}\n\nfunction drawBody(\n ctx: CanvasRenderingContext2D,\n l: Layout,\n cfg: FrameConfig,\n t: number,\n) {\n const fontSize = 30;\n ctx.textBaseline = \"alphabetic\";\n\n // Highlight sweep: a horizontal wipe that reveals the marker over the keyword.\n const sweep = Math.min(1, Math.max(0, (t - 0.15) / 0.5));\n\n for (const line of l.lines) {\n let x = line.x;\n for (const w of line.words) {\n ctx.font = w.isKeyword\n ? `bold ${fontSize + 4}px ${l.headlineFont}`\n : `${fontSize}px ${l.bgFont}`;\n const ww = ctx.measureText(w.text).width;\n\n if (w.isKeyword) {\n // Draw highlight marker behind the keyword, revealed by the sweep.\n const padY = 8;\n const hlW = ww * sweep;\n ctx.save();\n ctx.fillStyle = cfg.highlightColor;\n ctx.globalAlpha = 0.85;\n // Slightly skewed marker edges for a hand-drawn highlighter feel.\n ctx.beginPath();\n ctx.moveTo(x - 6, line.y - fontSize + 2);\n ctx.lineTo(x - 6 + hlW, line.y - fontSize + 6);\n ctx.lineTo(x - 2 + hlW, line.y + padY);\n ctx.lineTo(x - 10, line.y + padY - 4);\n ctx.closePath();\n ctx.fill();\n ctx.restore();\n }\n\n ctx.fillStyle = w.isKeyword ? \"#0a0a0a\" : \"#1c1a16\";\n ctx.fillText(w.text, x, line.y);\n x += ww + line.space;\n }\n }\n}\n\nfunction drawTexture(ctx: CanvasRenderingContext2D, l: Layout) {\n // Creases.\n ctx.save();\n ctx.strokeStyle = \"rgba(0,0,0,0.06)\";\n ctx.lineWidth = 2;\n for (const cr of l.creases) {\n ctx.beginPath();\n ctx.moveTo(cr.x, cr.y);\n ctx.lineTo(cr.x + Math.cos(cr.angle) * cr.len, cr.y + Math.sin(cr.angle) * cr.len);\n ctx.stroke();\n }\n ctx.restore();\n\n // Vignette/grain via a soft inner shadow on the paper edges.\n ctx.save();\n ctx.strokeStyle = \"rgba(80,60,30,0.12)\";\n ctx.lineWidth = 6;\n ctx.strokeRect(l.paperX, l.paperY, l.paperW, l.paperH);\n ctx.restore();\n}\n",[],[90,136,144],"fa6060ac-5f99-4dc4-9a1c-8f7c7ac49bb9","exporter.ts","f7b85712-6b69-11f1-8aa4-1607ee4eb77e",3,["D",1781823829687],"// Client-side exporters. Capture the animated canvas to a downloadable file on\n// the user's device. WebM uses the browser's MediaRecorder (true full-HD video);\n// GIF uses gif.js encoding worker-side.\n\nimport { CANVAS_H, CANVAS_W, drawFrame, FrameConfig } from \"./newspaper.ts\";\n\nexport interface ExportOptions {\n frames: FrameConfig[]; // ordered list of clipping variants to cycle through\n fps: number;\n secondsPerFrame: number; // how long each clipping is shown\n onProgress?: (pct: number) => void;\n}\n\nfunction triggerDownload(blob: Blob, filename: string) {\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n a.remove();\n setTimeout(() => URL.revokeObjectURL(url), 4000);\n}\n\n// Build the full ordered list of (config, t) animation steps for the whole clip.\nfunction buildTimeline(opts: ExportOptions): { cfg: FrameConfig; t: number }[] {\n const stepsPerFrame = Math.max(1, Math.round(opts.fps * opts.secondsPerFrame));\n const timeline: { cfg: FrameConfig; t: number }[] = [];\n for (const cfg of opts.frames) {\n for (let i = 0; i < stepsPerFrame; i++) {\n timeline.push({ cfg, t: i / (stepsPerFrame - 1 || 1) });\n }\n }\n return timeline;\n}\n\n// Export full-HD WebM via MediaRecorder capturing the canvas stream in real time.\nexport async function exportWebM(opts: ExportOptions): Promise {\n const canvas = document.createElement(\"canvas\");\n canvas.width = CANVAS_W;\n canvas.height = CANVAS_H;\n const ctx = canvas.getContext(\"2d\")!;\n\n const stream = canvas.captureStream(opts.fps);\n const mimeCandidates = [\n \"video/webm;codecs=vp9\",\n \"video/webm;codecs=vp8\",\n \"video/webm\",\n ];\n const mimeType = mimeCandidates.find((m) => MediaRecorder.isTypeSupported(m)) ||\n \"video/webm\";\n\n const recorder = new MediaRecorder(stream, {\n mimeType,\n videoBitsPerSecond: 12_000_000, // ~12 Mbps for crisp full-HD\n });\n const chunks: BlobPart[] = [];\n recorder.ondataavailable = (e) => {\n if (e.data.size > 0) chunks.push(e.data);\n };\n\n const timeline = buildTimeline(opts);\n const frameMs = 1000 / opts.fps;\n\n const done = new Promise((resolve) => {\n recorder.onstop = () => {\n const blob = new Blob(chunks, { type: \"video/webm\" });\n triggerDownload(blob, \"paper-news-animation.webm\");\n resolve();\n };\n });\n\n recorder.start();\n\n // Drive frames on a fixed wall-clock cadence so the recorder samples each one.\n for (let i = 0; i < timeline.length; i++) {\n const { cfg, t } = timeline[i];\n drawFrame(ctx, cfg, t);\n opts.onProgress?.(Math.round((i / timeline.length) * 100));\n await sleep(frameMs);\n }\n // Hold the final frame briefly so the tail isn't clipped.\n await sleep(120);\n recorder.stop();\n await done;\n opts.onProgress?.(100);\n}\n\n// Export animated GIF using gif.js (worker-based encoder).\nexport async function exportGIF(opts: ExportOptions): Promise {\n // @ts-ignore - gif.js has no types on esm.sh\n const GIF = (await import(\"https://esm.sh/gif.js@0.2.0\")).default;\n\n const canvas = document.createElement(\"canvas\");\n canvas.width = CANVAS_W;\n canvas.height = CANVAS_H;\n const ctx = canvas.getContext(\"2d\")!;\n\n const gif = new GIF({\n workers: 4,\n quality: 10,\n width: CANVAS_W,\n height: CANVAS_H,\n workerScript: \"https://esm.sh/gif.js@0.2.0/dist/gif.worker.js\",\n });\n\n // GIFs are heavy at full HD, so sample at a lower fps to keep size sane.\n const gifOpts: ExportOptions = { ...opts, fps: Math.min(opts.fps, 15) };\n const timeline = buildTimeline(gifOpts);\n const delay = 1000 / gifOpts.fps;\n\n for (const { cfg, t } of timeline) {\n drawFrame(ctx, cfg, t);\n gif.addFrame(ctx, { copy: true, delay });\n }\n\n return new Promise((resolve) => {\n gif.on(\"progress\", (p: number) => {\n opts.onProgress?.(Math.round(p * 100));\n });\n gif.on(\"finished\", (blob: Blob) => {\n triggerDownload(blob, \"paper-news-animation.gif\");\n opts.onProgress?.(100);\n resolve();\n });\n gif.render();\n });\n}\n\nfunction sleep(ms: number) {\n return new Promise((r) => setTimeout(r, ms));\n}\n",[],[90,136,151],"ddcfa171-03bd-470b-ab82-fc5009281b29","components","019edcf8-c701-7546-af9f-06ac1bed9881",["D",1781823751846],[164,165,166],[90,159],{"_35":183,"_13":184,"_64":185,"_66":160,"_67":68,"_69":186,"_71":72,"_37":187,"_17":70,"_75":117,"_77":188,"_79":50,"_80":-5,"_99":189,"_18":190},{"_35":175,"_13":176,"_64":177,"_66":160,"_67":68,"_69":178,"_71":72,"_37":179,"_17":74,"_75":117,"_77":180,"_79":50,"_80":-5,"_99":181,"_18":182},{"_35":167,"_13":168,"_64":169,"_66":160,"_67":68,"_69":170,"_71":72,"_37":171,"_17":74,"_75":117,"_77":172,"_79":50,"_80":-5,"_99":173,"_18":174},"8528522f-59ef-4893-8259-4f616eb222ad","Controls.tsx","2ccbd24e-6b6a-11f1-bd00-1607ee4eb77e",6,["D",1781823918732],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nconst HIGHLIGHT_COLORS = [\n { name: \"Marker Yellow\", value: \"#ffe600\" },\n { name: \"Hot Pink\", value: \"#ff5fa2\" },\n { name: \"Cyan\", value: \"#3fe0ff\" },\n { name: \"Lime\", value: \"#9bff57\" },\n { name: \"Orange\", value: \"#ff8a3d\" },\n];\n\nconst PAPER_TINTS = [\n { name: \"Newsprint\", value: \"#efe8d8\" },\n { name: \"Clean White\", value: \"#f7f5f0\" },\n { name: \"Aged Cream\", value: \"#e7dcc1\" },\n { name: \"Vintage Tan\", value: \"#ddcca6\" },\n];\n\ninterface Props {\n text: string;\n setText: (v: string) => void;\n highlight: string;\n setHighlight: (v: string) => void;\n paper: string;\n setPaper: (v: string) => void;\n frameCount: number;\n setFrameCount: (v: number) => void;\n secondsPerFrame: number;\n setSecondsPerFrame: (v: number) => void;\n fps: number;\n setFps: (v: number) => void;\n playing: boolean;\n setPlaying: (fn: (p: boolean) => boolean) => void;\n busy: null | \"webm\" | \"gif\";\n progress: number;\n onExport: (kind: \"webm\" | \"gif\") => void;\n}\n\nexport function Controls(p: Props) {\n return (\n

\n \n Your keyword\n \n \n p.setText((e.target as HTMLInputElement).value.toUpperCase())}\n placeholder=\"Type a word…\"\n class=\"w-full bg-neutral-800 border border-neutral-700 rounded-lg px-4 py-3 text-lg font-bold tracking-wide focus:outline-none focus:ring-2 focus:ring-yellow-400\"\n />\n

\n\n

\n \n Highlight color\n \n

\n {HIGHLIGHT_COLORS.map((c) => (\n p.setHighlight(c.value)}\n title={c.name}\n class={`w-9 h-9 rounded-full border-2 transition ${\n p.highlight === c.value\n ? \"border-white scale-110\"\n : \"border-transparent\"\n }`}\n style={{ background: c.value }}\n />\n ))}\n

\n\n

\n \n Paper texture\n \n

\n {PAPER_TINTS.map((t) => (\n p.setPaper(t.value)}\n class={`px-3 py-2 rounded-lg text-xs font-semibold text-neutral-900 border-2 transition ${\n p.paper === t.value ? \"border-white\" : \"border-transparent\"\n }`}\n style={{ background: t.value }}\n >\n {t.name}\n \n ))}\n

\n\n

\n \n \n \n

\n\n

\n p.setPlaying((v) => !v)}\n class=\"px-4 py-2 rounded-lg bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 text-sm font-medium\"\n >\n {p.playing ? \"⏸ Pause\" : \"▶ Play\"}\n \n \n Total clip: {(p.frameCount * p.secondsPerFrame).toFixed(1)}s\n \n

\n\n

\n p.onExport(\"webm\")}\n class=\"w-full px-4 py-3 rounded-lg bg-yellow-400 hover:bg-yellow-300 text-neutral-900 font-bold disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {p.busy === \"webm\"\n ? `Rendering… ${p.progress}%`\n : \"⬇ Export Full-HD Video (WebM)\"}\n \n p.onExport(\"gif\")}\n class=\"w-full px-4 py-3 rounded-lg bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 font-semibold disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {p.busy === \"gif\" ? `Rendering… ${p.progress}%` : \"⬇ Export GIF\"}\n \n {p.busy && (\n

\n \n

\n )}\n

\n Video exports as WebM (full-HD 1080×1920, plays on modern\n players & social apps). MP4 isn't available because Val Town has no\n server-side video encoder — WebM is rendered right in your browser.\n Keep this tab focused while rendering.\n

\n );\n}\n\nfunction Slider(\n { label, value, min, max, step, onChange, suffix = \"\" }: {\n label: string;\n value: number;\n min: number;\n max: number;\n step: number;\n onChange: (v: number) => void;\n suffix?: string;\n },\n) {\n return (\n

\n \n {label}: {value}{suffix}\n \n \n onChange(parseFloat((e.target as HTMLInputElement).value))}\n class=\"w-full accent-yellow-400\"\n />\n

\n );\n}\n",[],[90,159,168],"e2e3d778-9fe0-47fd-b213-d92b20b93c5c","CanvasPreview.tsx","ffa653f2-6b69-11f1-be27-1607ee4eb77e",4,["D",1781823842991],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport {\n CANVAS_H,\n CANVAS_W,\n drawFrame,\n FrameConfig,\n} from \"../lib/newspaper.ts\";\n\ninterface Props {\n frames: FrameConfig[];\n secondsPerFrame: number;\n playing: boolean;\n}\n\n// Renders the looping animation preview. Cycles through each clipping variant,\n// running the highlight sweep (t: 0->1) within each.\nexport function CanvasPreview({ frames, secondsPerFrame, playing }: Props) {\n const canvasRef = useRef(null);\n const rafRef = useRef(0);\n const startRef = useRef(0);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n startRef.current = performance.now();\n\n const loop = (now: number) => {\n const elapsed = (now - startRef.current) / 1000;\n const totalDur = frames.length * secondsPerFrame;\n const wrapped = totalDur > 0 ? elapsed % totalDur : 0;\n const frameIdx = Math.min(\n frames.length - 1,\n Math.floor(wrapped / secondsPerFrame),\n );\n const t = (wrapped - frameIdx * secondsPerFrame) / secondsPerFrame;\n drawFrame(ctx, frames[frameIdx], t);\n rafRef.current = requestAnimationFrame(loop);\n };\n\n if (playing) {\n rafRef.current = requestAnimationFrame(loop);\n } else {\n // Render a single static frame (first clipping, mid-sweep) when paused.\n drawFrame(ctx, frames[0], 1);\n }\n\n return () => cancelAnimationFrame(rafRef.current);\n }, [frames, secondsPerFrame, playing]);\n\n return (\n

\n \n

\n 1080×1920 · Full HD\n

\n );\n}\n",[],[90,159,176],"cf33341e-201a-4353-998f-da6c6ee9b8c2","App.tsx","019edcf8-c701-7546-af9e-ff1d81e66773",5,["D",1781823895510],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { CanvasPreview } from \"./CanvasPreview.tsx\";\nimport { Controls } from \"./Controls.tsx\";\nimport { FrameConfig } from \"../lib/newspaper.ts\";\nimport { exportGIF, exportWebM } from \"../lib/exporter.ts\";\n\nexport function App() {\n const [text, setText] = useState(\"VIRAL\");\n const [highlight, setHighlight] = useState(\"#ffe600\");\n const [paper, setPaper] = useState(\"#efe8d8\");\n const [frameCount, setFrameCount] = useState(6);\n const [secondsPerFrame, setSecondsPerFrame] = useState(1.4);\n const [fps, setFps] = useState(30);\n const [playing, setPlaying] = useState(true);\n const [busy, setBusy] = useState(null);\n const [progress, setProgress] = useState(0);\n\n // Each \"frame\" is a distinct clipping variant (different fonts/layout/texture).\n const frames: FrameConfig[] = useMemo(\n () =>\n Array.from({ length: frameCount }, (_, i) => ({\n text: text || \"BREAKING\",\n frameIndex: i,\n highlightColor: highlight,\n paperTint: paper,\n })),\n [text, frameCount, highlight, paper],\n );\n\n async function handleExport(kind: \"webm\" | \"gif\") {\n if (busy) return;\n setBusy(kind);\n setProgress(0);\n try {\n const opts = {\n frames,\n fps,\n secondsPerFrame,\n onProgress: (p: number) => setProgress(p),\n };\n if (kind === \"webm\") await exportWebM(opts);\n else await exportGIF(opts);\n } catch (err) {\n console.error(\"Export failed\", err);\n alert(\"Export failed: \" + (err as Error).message);\n } finally {\n setBusy(null);\n setProgress(0);\n }\n }\n\n return (\n

\n 📰 Paper News Animator\n

\n Type a word, get animated newspaper clippings, export Full-HD video\n to your device.\n

\n\n

\n \n

\n\n

\n \n

\n\n \n

\n );\n}\n",[],[90,159,184],"6b0ef271-b498-4f1b-b59d-176210ba7fe0",["D",1781823751846],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789732809&sig=f77ab66c8dcd443abba087601ac9b19d9e10b63c6ed421714cdf66d374eb4584","userId","00b143e6-fd4f-4665-b756-f96927080134","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","79fb50cd-75a7-4319-ac3a-7240d5c57501","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_236":232},"org",{"_11":12,"_230":-5,"_231":232,"_199":200,"_233":234,"_235":50},"branch",{"_17":85,"_13":16,"_35":68,"_41":191,"_44":36,"_45":226,"_227":52,"_228":42,"_229":56,"_57":14,"_53":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJwMHRzQUNPeU5sNFp0UHppZWJrdWdwUktLaSJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":191,"_13":14,"_37":315,"_48":-5,"_193":50,"_51":52,"_194":52,"_195":196,"_197":198,"_199":200,"_201":65,"_202":72,"_203":-5,"_204":-5,"_205":74,"_55":206,"_207":-5,"_208":-5,"_209":-5,"_210":-5,"_211":212,"_213":212,"_214":215,"_216":215,"_217":215,"_218":212,"_219":212,"_220":316,"_222":317,"_224":318,"_49":50},[276,287,288],"files",[276,277,278,279,280,281,282,283,284,285,286,287,288],"counts",{"_267":74,"_268":70,"_269":74,"_34":270,"_271":272},[261,262,263],"upstreamProject",{"_35":42,"_13":58,"_195":196,"_197":198,"_51":52,"_220":259},"upstreamBranch",{"_35":36,"_37":257,"_39":258,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":54,"_236":260},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789732809&sig=4acd00523093871d7ea56a9d868ba67ccaebc34e6c99346ab3cea52c2ba5ed86",{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":92,"_17":74,"_75":93,"_77":-5,"_79":50,"_80":-5,"_18":266},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":86,"_17":70,"_75":24,"_77":87,"_79":50,"_80":-5,"_18":265},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":73,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_18":264},[63],[83],[90],"pulls","branches","forks",{"_273":74,"_275":74},"connections",{"_273":74,"_274":74},"count","unfilledCount","emptyCount",{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":105,"_17":74,"_75":93,"_77":-5,"_79":50,"_80":-5,"_99":313,"_18":314},{"_35":158,"_13":159,"_64":160,"_66":91,"_67":68,"_69":70,"_71":72,"_37":161,"_17":74,"_75":93,"_77":-5,"_79":50,"_80":-5,"_99":311,"_18":312},{"_35":183,"_13":184,"_64":185,"_66":160,"_67":68,"_69":186,"_71":72,"_37":187,"_17":70,"_75":117,"_77":188,"_79":50,"_80":-5,"_99":309,"_18":310},{"_35":175,"_13":176,"_64":177,"_66":160,"_67":68,"_69":178,"_71":72,"_37":179,"_17":74,"_75":117,"_77":180,"_79":50,"_80":-5,"_99":307,"_18":308},{"_35":167,"_13":168,"_64":169,"_66":160,"_67":68,"_69":170,"_71":72,"_37":171,"_17":74,"_75":117,"_77":172,"_79":50,"_80":-5,"_99":305,"_18":306},{"_35":135,"_13":136,"_64":137,"_66":91,"_67":68,"_69":33,"_71":72,"_37":138,"_17":74,"_75":93,"_77":-5,"_79":50,"_80":-5,"_99":303,"_18":304},{"_35":150,"_13":151,"_64":152,"_66":137,"_67":68,"_69":153,"_71":72,"_37":154,"_17":74,"_75":117,"_77":155,"_79":50,"_80":-5,"_99":301,"_18":302},{"_35":143,"_13":144,"_64":145,"_66":137,"_67":68,"_69":33,"_71":72,"_37":146,"_17":74,"_75":117,"_77":147,"_79":50,"_80":-5,"_99":299,"_18":300},{"_35":128,"_13":129,"_64":130,"_66":91,"_67":68,"_69":70,"_71":72,"_37":131,"_17":74,"_75":24,"_77":132,"_79":50,"_80":-5,"_99":297,"_18":298},{"_35":121,"_13":122,"_64":123,"_66":91,"_67":68,"_69":31,"_71":72,"_37":124,"_17":33,"_75":24,"_77":125,"_79":50,"_80":-5,"_99":295,"_18":296},{"_35":113,"_13":114,"_64":115,"_66":91,"_67":68,"_69":70,"_71":72,"_37":116,"_17":74,"_75":117,"_77":118,"_79":50,"_80":-5,"_99":293,"_18":294},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":102,"_17":70,"_75":24,"_77":87,"_79":50,"_80":-5,"_99":291,"_18":292},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":98,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_99":289,"_18":290},[],[63],[],[83],[],[90,114],[],[90,122],[],[90,129],[],[90,136,144],[],[90,136,151],[282,283],[90,136],[],[90,159,168],[],[90,159,176],[],[90,159,184],[278,279,280],[90,159],[277,281,284,285,286],[90],["D",1781823751846],{"_11":12,"_236":232},{"_11":12,"_230":-5,"_231":232,"_199":200,"_233":234,"_235":50},{"_17":85,"_13":16,"_35":68,"_41":191,"_44":36,"_45":226,"_227":52,"_228":42,"_229":56,"_57":14,"_53":12},"ctx",{"_220":-5,"_254":352,"_353":354,"_355":356,"_357":50,"_358":50,"_359":50,"_360":72,"_361":-5,"_362":-7,"_363":-7,"_364":74,"_365":50,"_366":50,"_367":-5,"_368":50,"_369":50,"_370":50,"_371":-5},"ENV",{"_323":324,"_325":326,"_327":16,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code