\n \n \n \n",[],[82,134],"7fdb9413-241d-4df6-b422-3360b9bcdd43","favicon.svg","019edcf8-c701-7546-af9f-0af205edff78",["D",1781823751846],"\n",[],[82,141],["D",1781823807423],[150,151],[82,83],{"_36":84,"_13":85,"_64":86,"_66":67,"_68":69,"_70":87,"_71":72,"_38":155,"_17":74,"_75":76,"_77":89,"_79":51,"_80":-5,"_106":156,"_18":157},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":34,"_71":72,"_38":152,"_17":74,"_75":76,"_77":78,"_79":51,"_80":-5,"_106":153,"_18":154},["D",1781823807423],[],[82,83,63],["D",1781823829687],[],[82,83,85],"ddcfa171-03bd-470b-ab82-fc5009281b29","components","019edcf8-c701-7546-af9f-06ac1bed9881",["D",1781823751846],[164,165,166],[82,159],{"_36":183,"_13":184,"_64":185,"_66":160,"_68":69,"_70":186,"_71":72,"_38":187,"_17":102,"_75":76,"_77":188,"_79":51,"_80":-5,"_106":189,"_18":190},{"_36":175,"_13":176,"_64":177,"_66":160,"_68":69,"_70":178,"_71":72,"_38":179,"_17":74,"_75":76,"_77":180,"_79":51,"_80":-5,"_106":181,"_18":182},{"_36":167,"_13":168,"_64":169,"_66":160,"_68":69,"_70":170,"_71":72,"_38":171,"_17":74,"_75":76,"_77":172,"_79":51,"_80":-5,"_106":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",[],[82,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",[],[82,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",[],[82,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=1789707988&sig=afa830848f754c766c020e792a36863495a5e7b819be237cb3ce5c8767170d8f","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":51},"branch",{"_17":112,"_13":16,"_36":69,"_42":191,"_45":37,"_46":226,"_227":53,"_228":43,"_229":57,"_58":14,"_54":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJwMHRzQUNPeU5sNFp0UHppZWJrdWdwUktLaSJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":191,"_13":14,"_38":316,"_49":-5,"_193":51,"_52":53,"_194":53,"_195":196,"_197":198,"_199":200,"_201":101,"_202":72,"_203":-5,"_204":-5,"_205":74,"_56":206,"_207":-5,"_208":-5,"_209":-5,"_210":-5,"_211":212,"_213":212,"_214":215,"_216":215,"_217":215,"_218":212,"_219":212,"_220":317,"_222":318,"_224":319,"_50":51},[277,288,289],"files",[277,278,279,280,281,282,283,284,285,286,287,288,289],"counts",{"_268":74,"_269":102,"_270":74,"_35":271,"_272":273},[264,265],{"_36":91,"_68":69,"_64":67,"_13":83,"_77":-5,"_75":94,"_17":74,"_66":92,"_38":262,"_70":34,"_80":-5,"_18":263},"upstreamProject",{"_36":43,"_13":59,"_195":196,"_197":198,"_52":53,"_220":260},"upstreamBranch",{"_36":37,"_38":258,"_40":259,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":55,"_236":261},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789707988&sig=905e47734086f8d1fdd9f432aba8bc721d01717d71bd739b9b85c1086da531d8",["D",1781823807423],[82,83],{"_36":84,"_13":85,"_64":86,"_66":67,"_68":69,"_70":87,"_71":72,"_38":88,"_17":74,"_75":76,"_77":89,"_79":51,"_80":-5,"_18":267},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":34,"_71":72,"_38":73,"_17":74,"_75":76,"_77":78,"_79":51,"_80":-5,"_18":266},[82,83,63],[82,83,85],"pulls","branches","forks",{"_274":74,"_276":74},"connections",{"_274":74,"_275":74},"count","unfilledCount","emptyCount",{"_36":117,"_13":82,"_64":92,"_66":-5,"_68":69,"_70":102,"_71":72,"_38":118,"_17":74,"_75":94,"_77":-5,"_79":51,"_80":-5,"_106":314,"_18":315},{"_36":158,"_13":159,"_64":160,"_66":92,"_68":69,"_70":102,"_71":72,"_38":161,"_17":74,"_75":94,"_77":-5,"_79":51,"_80":-5,"_106":312,"_18":313},{"_36":183,"_13":184,"_64":185,"_66":160,"_68":69,"_70":186,"_71":72,"_38":187,"_17":102,"_75":76,"_77":188,"_79":51,"_80":-5,"_106":310,"_18":311},{"_36":175,"_13":176,"_64":177,"_66":160,"_68":69,"_70":178,"_71":72,"_38":179,"_17":74,"_75":76,"_77":180,"_79":51,"_80":-5,"_106":308,"_18":309},{"_36":167,"_13":168,"_64":169,"_66":160,"_68":69,"_70":170,"_71":72,"_38":171,"_17":74,"_75":76,"_77":172,"_79":51,"_80":-5,"_106":306,"_18":307},{"_36":91,"_13":83,"_64":67,"_66":92,"_68":69,"_70":34,"_71":72,"_38":147,"_17":74,"_75":94,"_77":-5,"_79":51,"_80":-5,"_106":304,"_18":305},{"_36":84,"_13":85,"_64":86,"_66":67,"_68":69,"_70":87,"_71":72,"_38":155,"_17":74,"_75":76,"_77":89,"_79":51,"_80":-5,"_106":302,"_18":303},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":34,"_71":72,"_38":152,"_17":74,"_75":76,"_77":78,"_79":51,"_80":-5,"_106":300,"_18":301},{"_36":140,"_13":141,"_64":142,"_66":92,"_68":69,"_70":102,"_71":72,"_38":143,"_17":74,"_75":24,"_77":144,"_79":51,"_80":-5,"_106":298,"_18":299},{"_36":133,"_13":134,"_64":135,"_66":92,"_68":69,"_70":32,"_71":72,"_38":136,"_17":34,"_75":24,"_77":137,"_79":51,"_80":-5,"_106":296,"_18":297},{"_36":126,"_13":127,"_64":128,"_66":92,"_68":69,"_70":102,"_71":72,"_38":129,"_17":74,"_75":76,"_77":130,"_79":51,"_80":-5,"_106":294,"_18":295},{"_36":109,"_13":110,"_64":111,"_66":-5,"_68":69,"_70":112,"_71":72,"_38":113,"_17":102,"_75":24,"_77":114,"_79":51,"_80":-5,"_106":292,"_18":293},{"_36":99,"_13":100,"_64":101,"_66":-5,"_68":69,"_70":102,"_71":72,"_38":103,"_17":74,"_75":104,"_77":105,"_79":51,"_80":-5,"_106":290,"_18":291},[],[100],[],[110],[],[82,127],[],[82,134],[],[82,141],[],[82,83,63],[],[82,83,85],[283,284],[82,83],[],[82,159,168],[],[82,159,176],[],[82,159,184],[279,280,281],[82,159],[278,282,285,286,287],[82],["D",1781823751846],{"_11":12,"_236":232},{"_11":12,"_230":-5,"_231":232,"_199":200,"_233":234,"_235":51},{"_17":112,"_13":16,"_36":69,"_42":191,"_45":37,"_46":226,"_227":53,"_228":43,"_229":57,"_58":14,"_54":12},"ctx",{"_220":-5,"_255":353,"_354":355,"_356":357,"_358":51,"_359":51,"_360":51,"_361":72,"_362":-5,"_363":-7,"_364":-7,"_365":74,"_366":51,"_367":51,"_368":-5,"_369":51,"_370":51,"_371":51,"_372":-5},"ENV",{"_324":325,"_326":327,"_328":16,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352},"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"]