\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",[],[207,200],"frontend","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",[],[207,209],"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",[],[207,218],"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",[],[207,226],"5ab32bfd-4aaa-4b95-b723-da79c46296e3",["D",1785165350720],[169,170,171,172],[207],["D",1785165346995],{"_11":12,"_123":70},{"_11":12,"_118":119,"_69":70,"_31":68,"_120":121,"_122":30},{"_39":109,"_13":16,"_33":36,"_110":74,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":14,"_117":12},"ctx",{"_52":-5,"_142":273,"_274":275,"_276":277,"_278":30,"_279":30,"_280":30,"_281":24,"_282":-5,"_283":-7,"_284":-7,"_285":26,"_286":30,"_287":30,"_288":-5,"_289":30,"_290":30,"_291":30,"_292":-5},"ENV",{"_244":245,"_246":247,"_248":16,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

History · shared