\n \n \n \n \n

\n {children}\n

\n );\n}\n\nexport function Scribble({ hex, ink, size = 76, nonce = 0 }: { hex: string; ink: string; size?: number; nonce?: number }) {\n const r = size / 2 - 8;\n const outline = useMemo(() => circlePath(r, 1.7), [r, nonce]);\n const fill = useMemo(() => scribblePath(r - 3), [r, nonce]);\n return (\n \n );\n}\n\nexport function Squiggle({ width = 120, color = \"#333\", sw = 2.6, nonce = 0 }: { width?: number; color?: string; sw?: number; nonce?: number }) {\n const d = useMemo(() => squigglePath(width), [width, nonce]);\n return (\n \n );\n}\n\n// hand-drawn marks: polylines on a 24×24 grid, jittered at render time\nconst MARKS: Record = {\n arrow: [[[3, 12], [19, 12]], [[14, 6], [20, 12], [14, 18]]],\n check: [[[4, 13], [9, 18], [20, 5]]],\n star: [[[12, 3], [14.6, 9.2], [21, 9.8], [16.2, 14], [17.8, 20.5], [12, 17], [6.2, 20.5], [7.8, 14], [3, 9.8], [9.4, 9.2], [12, 3]]],\n heart: [[[12, 20], [4.5, 12.5], [3.5, 8], [6.5, 4.5], [10, 5], [12, 8], [14, 5], [17.5, 4.5], [20.5, 8], [19.5, 12.5], [12, 20]]],\n sprout: [[[12, 21], [12, 10]], [[12, 13], [7, 10.5], [5, 5.5], [10, 7], [12, 10]], [[12, 11], [17, 8.5], [19, 3.5], [14, 5], [12, 8]]],\n bolt: [[[13, 2], [6, 13], [11, 13], [9, 22], [18, 10], [13, 10], [13, 2]]],\n};\n\nexport const MARK_NAMES = Object.keys(MARKS);\n\nexport function Mark({ name, color, size = 30, nonce = 0 }: { name: string; color: string; size?: number; nonce?: number }) {\n const paths = useMemo(\n () =>\n (MARKS[name] ?? MARKS.star).map(\n (line) => \"M \" + line.map(([x, y]) => `${x + (Math.random() - 0.5) * 1.3},${y + (Math.random() - 0.5) * 1.3}`).join(\" L \"),\n ),\n [name, nonce],\n );\n return (\n \n );\n}\n",[],[74,110],"c24cf26b-cf0f-455c-a947-5535b011fd1e","index.tsx","631d3e00-89ce-11f1-875d-1607ee4eb77e",15,["D",1785192525292],8,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { DIRECTIONS } from \"./directions.ts\";\nimport { Mark, Squiggle } from \"./pen.tsx\";\nimport { POEMS, RULES, type SlopBlock } from \"../shared/poems.ts\";\n\nconst FONT_URL = \"https://cdn.jsdelivr.net/gh/dcm31/myfont@main/Fullerfont-Regular.otf\";\n\n// Fullerfont is display-voice only: the big title + one apologetic margin note.\nconst hand = (size: string): React.CSSProperties => ({\n fontFamily: \"'Fullerfont', sans-serif\",\n fontWeight: 400,\n fontSize: size,\n lineHeight: 1.25,\n});\nconst handBold = (size: string): React.CSSProperties => ({\n ...hand(size),\n WebkitTextStroke: \"0.035em currentColor\",\n});\n\n/** hand-drawn squiggle underline (repeating SVG tile) */\nconst squigUnder = (color: string, sw = 2): React.CSSProperties => {\n const svg =\n ``;\n return {\n textDecoration: \"none\",\n backgroundImage: `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`,\n backgroundRepeat: \"repeat-x\",\n backgroundPosition: \"0 100%\",\n backgroundSize: \"28px 7px\",\n paddingBottom: \"3px\",\n };\n};\n\n\n// ---- slop rendering: ⟦phrase|ruleId⟧ → red-squiggled span + rule tooltip ----\nconst SLOP_RE = /⟦(.+?)\\|(.+?)⟧/g;\n\nfunction collectRuleIds(text: string): string[] {\n return [...text.matchAll(SLOP_RE)].map((m) => m[2]);\n}\n\nfunction SlopText({ text, red }: { text: string; red: string }) {\n const parts: React.ReactNode[] = [];\n let last = 0;\n let i = 0;\n for (const m of text.matchAll(SLOP_RE)) {\n if (m.index! > last) parts.push(text.slice(last, m.index));\n parts.push(\n \n {m[1]}\n ,\n );\n last = m.index! + m[0].length;\n }\n if (last < text.length) parts.push(text.slice(last));\n return <>{parts};\n}\n\nfunction App() {\n const [fontLoaded, setFontLoaded] = useState(false);\n const [dark, setDark] = useState(false);\n const [idx, setIdx] = useState(0);\n const [nonce, setNonce] = useState(0);\n\n useEffect(() => {\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n setDark(mq.matches);\n const fn = (e: MediaQueryListEvent) => setDark(e.matches);\n mq.addEventListener(\"change\", fn);\n return () => mq.removeEventListener(\"change\", fn);\n }, []);\n\n useEffect(() => {\n const font = new FontFace(\"Fullerfont\", `url('${FONT_URL}')`);\n font.load()\n .then((f) => document.fonts.add(f))\n .catch((err) => console.error(\"Font load failed:\", err))\n .finally(() => setFontLoaded(true));\n }, []);\n\n // quatro: black ink, with blue/red/green doing real jobs\n const d = DIRECTIONS[0];\n const paper = dark ? d.paperDark : d.paper;\n const ink = dark ? d.inkDark : d.ink;\n const faint = dark ? d.faintDark : d.faint;\n const blue = dark ? d.accents[0].dark : d.accents[0].hex;\n const red = dark ? d.accents[1].dark : d.accents[1].hex;\n const green = dark ? d.accents[2].dark : d.accents[2].hex;\n\n if (!fontLoaded) return null;\n\n const poem = POEMS[idx];\n const phraseRules = poem.slop.flatMap((b) => [\n ...(b.text ? collectRuleIds(b.text) : []),\n ...(b.items ?? []).flatMap(collectRuleIds),\n ]);\n const violations = [...new Set([...phraseRules, ...poem.structural])];\n\n const renderBlock = (b: SlopBlock, i: number) => {\n if (b.kind === \"bullets\") {\n return (\n

\n •\n \n

\n );\n }\n if (b.kind === \"bait\") {\n return (\n

\n \n

\n );\n }\n return (\n

\n \n

\n );\n };\n\n return (\n \n

\n {/* header */}\n

slopify

\n \n

\n the anti-slop skills, run in reverse. famous public-domain poems on the left; the same poems after every\n banned phrase, banned structure, and banned emoji has been carefully added back in on the right.\n

\n\n {/* poem picker */}\n

\n {POEMS.map((p, i) => {\n const active = i === idx;\n return (\n {\n setIdx(i);\n setNonce((n) => n + 1);\n }}\n className=\"cursor-pointer transition-transform hover:-translate-y-0.5 focus:outline-none focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4\"\n style={{ background: \"none\", border: \"none\", padding: 0 }}\n aria-pressed={active}\n >\n \n {p.pick}\n {active\n ? \n : }\n \n \n );\n })}\n

\n\n {/* side by side */}\n

\n {/* original */}\n

\n \n

\n the original\n \n

\n {poem.title}\n

\n {poem.author}, {poem.year}\n

\n {poem.original.map((line, i) => (line === \"\" ?

{line}

))}\n

\n zero violations. specific, concrete, could not have been written by anyone for anyone.\n

\n\n {/* slop */}\n

\n \n

\n the slop\n \n

\n \n i'm so sorry\n \n

{poem.slopTitle}

\n {poem.author} (optimized for engagement)\n

{poem.slop.map(renderBlock)}

\n {violations.length} anti-slop rules violated{\" \"}\n (hover the red squiggles):{\" \"}\n {violations.map((v, i) => (\n \n {(RULES[v] ?? v).split(\" — \")[0]}\n {i < violations.length - 1 ? \" · \" : \"\"}\n \n ))}\n

\n\n {/* footer */}\n \n

\n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[74,117],"d124d481-b3bf-4b10-8d47-040bee3438ed","index.html","13c266be-89ce-11f1-b428-1607ee4eb77e",3,["D",1785165361290],"\n\n\n \n \n slopify — the classics, but worse\n \n \n \n\n\n

\n \n\n\n",[],[74,126],"f94bdd56-7946-4001-89a6-4b88a61aab68","directions.ts","019fa425-873b-728a-b847-5054bbc4115d",["D",1785165350720],"// The three palette directions being riffed on. Each keeps the house DNA\n// (Fullerfont handwriting + wobbly ballpoint strokes) and adds color a\n// different way: colored INK, highlighter WASHES, or colored STROKES.\n\nexport interface Accent {\n name: string;\n hex: string; // light-mode color\n dark: string; // dark-mode color\n role: string;\n}\n\nexport interface Direction {\n id: string;\n name: string;\n tagline: string;\n paper: string;\n paperDark: string;\n ink: string;\n inkDark: string;\n faint: string;\n faintDark: string;\n accents: Accent[];\n /** draw card/button borders in accent colors (felt-tip) */\n colorStrokes: boolean;\n /** translucent highlighter washes behind text (highlighter) */\n wash: boolean;\n}\n\nexport const DIRECTIONS: Direction[] = [\n {\n id: \"quatro\",\n name: \"quatro\",\n tagline: \"the Bic 4-colour pen: black ink, with blue / red / green doing real jobs\",\n paper: \"#fdfbf4\",\n paperDark: \"#191817\",\n ink: \"#24211d\",\n inkDark: \"#e9e6df\",\n faint: \"#9a938a\",\n faintDark: \"#6f6a63\",\n accents: [\n { name: \"blue\", hex: \"#2049c7\", dark: \"#7f9bff\", role: \"links + primary\" },\n { name: \"red\", hex: \"#d0342c\", dark: \"#ff7a70\", role: \"danger + no\" },\n { name: \"green\", hex: \"#187a3f\", dark: \"#5fce8b\", role: \"success + grow\" },\n { name: \"ink\", hex: \"#24211d\", dark: \"#e9e6df\", role: \"everything else\" },\n ],\n colorStrokes: false,\n wash: false,\n },\n {\n id: \"highlighter\",\n name: \"highlighter\",\n tagline: \"everything stays ink — color arrives as fluorescent swipes behind the words\",\n paper: \"#fffef8\",\n paperDark: \"#1b1b19\",\n ink: \"#232323\",\n inkDark: \"#ececec\",\n faint: \"#a3a39b\",\n faintDark: \"#71716b\",\n accents: [\n { name: \"yellow\", hex: \"#ffe93c\", dark: \"#ffe93c\", role: \"the default mark\" },\n { name: \"pink\", hex: \"#ff87b8\", dark: \"#ff87b8\", role: \"love it\" },\n { name: \"green\", hex: \"#6ee787\", dark: \"#6ee787\", role: \"go\" },\n { name: \"orange\", hex: \"#ffb340\", dark: \"#ffb340\", role: \"careful\" },\n ],\n colorStrokes: false,\n wash: true,\n },\n {\n id: \"felt-tip\",\n name: \"felt-tip\",\n tagline: \"the strokes themselves change pens — cards and marks drawn in marker colors\",\n paper: \"#fbf7ef\",\n paperDark: \"#1c1a20\",\n ink: \"#2a2436\",\n inkDark: \"#efeaf6\",\n faint: \"#9d94a8\",\n faintDark: \"#6e6779\",\n accents: [\n { name: \"purple\", hex: \"#6a3fd6\", dark: \"#a98cff\", role: \"primary\" },\n { name: \"orange\", hex: \"#ee7712\", dark: \"#ffa14d\", role: \"energy\" },\n { name: \"teal\", hex: \"#0d8f8f\", dark: \"#4ecfcb\", role: \"calm\" },\n { name: \"magenta\", hex: \"#d0338f\", dark: \"#ff7ac2\", role: \"play\" },\n ],\n colorStrokes: true,\n wash: false,\n },\n];\n\n/** hex + alpha → rgba() string */\nexport function hexA(hex: string, a: number): string {\n const n = parseInt(hex.slice(1), 16);\n return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;\n}\n",[],[74,134],"e09a1d87-4af6-4f26-ac68-90b8a13ce22a",["D",1785165346995],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","famous poems vs. their slop rewrites, side by side","imageUrl","userId","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_194":190},"org",{"_11":12,"_187":188,"_189":190,"_150":151,"_191":192,"_193":56},"branch",{"_17":62,"_13":16,"_36":43,"_179":140,"_180":-5,"_181":-5,"_182":-5,"_183":-5,"_184":-5,"_185":14,"_186":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789585199&sig=791f927e7effb459fa28d239d1d031174bf5fa1d08898fecc3c6ffbf23ca6003","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":140,"_13":14,"_48":257,"_142":-5,"_143":56,"_144":145,"_146":145,"_147":148,"_149":-5,"_150":151,"_152":40,"_153":47,"_154":-5,"_155":-5,"_156":50,"_157":158,"_159":-5,"_160":-5,"_161":-5,"_162":-5,"_163":164,"_165":164,"_166":167,"_168":167,"_169":167,"_170":164,"_171":164,"_172":258,"_174":259,"_176":260,"_178":56},[230,235,237,238],"files",[230,231,232,233,234,235,236,237,238],"counts",{"_221":50,"_222":76,"_223":50,"_31":224,"_225":226},[213,214,215,216],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":73,"_13":74,"_39":75,"_41":-5,"_42":43,"_44":76,"_46":47,"_48":77,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_18":220},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":70,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_18":219},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":63,"_17":45,"_51":24,"_53":64,"_55":56,"_57":-5,"_18":218},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":14,"_18":217},[38],[60],[67],[74],"pulls","branches","forks",{"_227":50,"_229":50},"connections",{"_227":50,"_228":50},"count","unfilledCount","emptyCount",{"_36":73,"_13":74,"_39":75,"_41":-5,"_42":43,"_44":76,"_46":47,"_48":102,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_84":255,"_18":256},{"_36":133,"_13":134,"_39":135,"_41":75,"_42":43,"_44":76,"_46":47,"_48":136,"_17":50,"_51":98,"_53":137,"_55":56,"_57":-5,"_84":253,"_18":254},{"_36":125,"_13":126,"_39":127,"_41":75,"_42":43,"_44":128,"_46":47,"_48":129,"_17":50,"_51":24,"_53":130,"_55":56,"_57":-5,"_84":251,"_18":252},{"_36":116,"_13":117,"_39":118,"_41":75,"_42":43,"_44":119,"_46":47,"_48":120,"_17":121,"_51":98,"_53":122,"_55":56,"_57":-5,"_84":249,"_18":250},{"_36":109,"_13":110,"_39":111,"_41":75,"_42":43,"_44":76,"_46":47,"_48":112,"_17":50,"_51":98,"_53":113,"_55":56,"_57":-5,"_84":247,"_18":248},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":90,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_84":245,"_18":246},{"_36":94,"_13":95,"_39":96,"_41":68,"_42":43,"_44":69,"_46":47,"_48":97,"_17":50,"_51":98,"_53":99,"_55":56,"_57":-5,"_84":243,"_18":244},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":87,"_17":45,"_51":24,"_53":64,"_55":56,"_57":-5,"_84":241,"_18":242},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":83,"_17":50,"_51":52,"_53":54,"_55":56,"_57":14,"_84":239,"_18":240},[],[38],[],[60],[],[67,95],[236],[67],[],[74,110],[],[74,117],[],[74,126],[],[74,134],[231,232,233,234],[74],["D",1785165346995],{"_11":12,"_194":190},{"_11":12,"_187":188,"_189":190,"_150":151,"_191":192,"_193":56},{"_17":62,"_13":16,"_36":43,"_179":140,"_180":-5,"_181":-5,"_182":-5,"_183":-5,"_184":-5,"_185":14,"_186":12},"ctx",{"_172":-5,"_210":294,"_295":296,"_297":298,"_299":56,"_300":56,"_301":56,"_302":47,"_303":-5,"_304":-7,"_305":-7,"_306":50,"_307":56,"_308":56,"_309":-5,"_310":56,"_311":56,"_312":56,"_313":-5},"ENV",{"_265":266,"_267":268,"_269":16,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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