Penguin Writes Mochii

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_187":188,"_189":190},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_140":-5,"_20":141,"_22":142,"_143":144,"_145":146,"_25":147,"_24":-5,"_148":-5,"_149":-5,"_150":55,"_151":152,"_153":46,"_154":-5,"_155":-5,"_156":157},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","ethansalve990_b86130e2","name","untitled-6272","branchName","main","version","path","","project",{"_35":87,"_13":14,"_47":88,"_89":-5,"_90":55,"_91":92,"_93":92,"_94":-5,"_95":-5,"_96":97,"_98":-5,"_99":55,"_100":-5,"_101":-5,"_102":103,"_104":105,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":111,"_112":111,"_113":114,"_115":114,"_116":114,"_117":111,"_118":111,"_119":120,"_121":122,"_123":124,"_125":55},"tree",[74,75,76],"file","contents",[32,33,34],"upstream","pull","ahead","behind","envVars",{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":71,"_50":24,"_52":72,"_54":55,"_56":-5,"_18":73},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":49,"_50":63,"_52":64,"_54":55,"_56":-5,"_18":65},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","e5be0ede-33bb-11f1-b9ad-42b51c65c3df","main.http.tsx","fileId","4a0fc5a6-33aa-11f1-97c8-42b51c65c3df","parentId","branchId","4a0d74ea-33aa-11f1-97c8-42b51c65c3df","branchVersion",22,"latest",true,"createdAt",["D",1775701753140],6,"fileType","http","content","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);","deleted",false,"label",[37],"26a2de5c-33bc-11f1-83cc-42b51c65c3df","index.tsx","0f68d3fa-33ac-11f1-9c0e-42b51c65c3df",24,["D",1775701862014],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n return (\n

\n \n\n

\n \n \n \n \n \n \n\n \n\n {/* writing */}\n \n \n\n \n \n \n\n {/* pen tip guide dot */}\n \n\n {/* penguin */}\n \n \n\n {/* back wing */}\n \n\n {/* body back */}\n \n\n {/* belly */}\n \n\n {/* head tuft */}\n \n\n {/* beak */}\n \n\n {/* eye */}\n \n \n \n \n \n\n {/* writing arm */}\n \n \n \n \n\n {/* feet */}\n \n \n \n \n \n \n \n \n

\n );\n}\n\nconst page: React.CSSProperties = {\n minHeight: \"100vh\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"24px\",\n background: \"#f1f2f5\",\n};\n\nconst card: React.CSSProperties = {\n width: \"min(1800px, 98vw)\",\n background: \"#f7f7fa\",\n borderRadius: \"36px\",\n padding: \"20px\",\n boxShadow: \"0 24px 60px rgba(0,0,0,0.06)\",\n};\n\nconst styles = `\n .write-line {\n fill: none;\n stroke: #b69be8;\n stroke-width: 12;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 3600;\n stroke-dashoffset: 3600;\n animation: writeWord 5.8s ease-in-out infinite;\n }\n\n .heart {\n fill: #b69be8;\n opacity: 0;\n transform-origin: center;\n }\n\n .heart-left {\n animation: popHeartLeft 5.8s ease-in-out infinite;\n }\n\n .heart-right {\n animation: popHeartRight 5.8s ease-in-out infinite;\n }\n\n .penguin-float {\n transform-origin: 1288px 500px;\n animation: floatPenguin 3.2s ease-in-out infinite;\n }\n\n .arm {\n transform-origin: 1187px 410px;\n animation: armWrite 5.8s ease-in-out infinite;\n }\n\n .blink {\n transform-origin: 1306px 336px;\n animation: blinkEye 4s infinite;\n }\n\n .ground-shadow {\n transform-origin: center;\n animation: shadowPulse 3.2s ease-in-out infinite;\n }\n\n .pen-tip {\n opacity: 0;\n animation: penTipFlash 5.8s ease-in-out infinite;\n }\n\n @keyframes writeWord {\n 0% {\n stroke-dashoffset: 3600;\n }\n 12% {\n stroke-dashoffset: 3600;\n }\n 72% {\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n }\n\n @keyframes armWrite {\n 0%, 10% {\n transform: rotate(0deg) translate(0px, 0px);\n }\n 18% {\n transform: rotate(-10deg) translate(-8px, 3px);\n }\n 30% {\n transform: rotate(8deg) translate(6px, -3px);\n }\n 42% {\n transform: rotate(-8deg) translate(-5px, 4px);\n }\n 56% {\n transform: rotate(7deg) translate(4px, -3px);\n }\n 70% {\n transform: rotate(-5deg) translate(-2px, 2px);\n }\n 82% {\n transform: rotate(2deg) translate(0px, 0px);\n }\n 100% {\n transform: rotate(0deg) translate(0px, 0px);\n }\n }\n\n @keyframes popHeartLeft {\n 0%, 70% {\n opacity: 0;\n transform: scale(0.5);\n }\n 78% {\n opacity: 1;\n transform: scale(1.15);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes popHeartRight {\n 0%, 76% {\n opacity: 0;\n transform: scale(0.5);\n }\n 84% {\n opacity: 1;\n transform: scale(1.15);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes floatPenguin {\n 0%, 100% {\n transform: translateY(0px);\n }\n 50% {\n transform: translateY(-6px);\n }\n }\n\n @keyframes shadowPulse {\n 0%, 100% {\n transform: scaleX(1);\n opacity: 0.18;\n }\n 50% {\n transform: scaleX(0.94);\n opacity: 0.12;\n }\n }\n\n @keyframes blinkEye {\n 0%, 44%, 48%, 100% {\n transform: scaleY(1);\n }\n 46% {\n transform: scaleY(0.08);\n }\n }\n\n @keyframes penTipFlash {\n 0%, 10% {\n opacity: 0;\n }\n 12%, 72% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n`;\n\ncreateRoot(document.getElementById(\"root\")!).render();",[59],"ec85791e-33bb-11f1-ad3b-42b51c65c3df","index.html","c94c3010-33ab-11f1-a397-42b51c65c3df",23,["D",1775701764514],7,"\n\n \n \n \n Penguin Writes Mochii\n \n \n \n

\n \n \n",[67],{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":84,"_17":71,"_50":24,"_52":72,"_54":55,"_56":-5,"_78":85,"_18":86},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":81,"_17":49,"_50":63,"_52":64,"_54":55,"_56":-5,"_78":82,"_18":83},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":77,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_78":79,"_18":80},["D",1775701753140],"children",[],[37],["D",1775701862014],[],[59],["D",1775701764514],[],[67],"4a0cae84-33aa-11f1-97c8-42b51c65c3df",["D",1775694190499],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","61721e65-40b6-45c8-885f-776e6578358d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d6f9d-f34e-7149-bf57-292642ffd597","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_139":19},"org",{"_11":12,"_134":-5,"_135":19,"_96":97,"_136":137,"_138":55},"branch",{"_17":61,"_13":16,"_35":42,"_126":87,"_127":-5,"_128":-5,"_129":-5,"_130":-5,"_131":-5,"_132":14,"_133":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":87,"_13":14,"_47":183,"_89":-5,"_90":55,"_91":92,"_93":92,"_94":-5,"_95":-5,"_96":97,"_98":-5,"_99":55,"_100":-5,"_101":-5,"_102":103,"_104":105,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":111,"_112":111,"_113":114,"_115":114,"_116":114,"_117":111,"_118":111,"_119":184,"_121":185,"_123":186,"_125":55},[174,175,176],"files",[174,175,176],"counts",{"_164":103,"_165":166,"_167":103,"_31":168,"_169":170},[158,159,160],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":71,"_50":24,"_52":72,"_54":55,"_56":-5,"_18":163},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":49,"_50":63,"_52":64,"_54":55,"_56":-5,"_18":162},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":161},[37],[59],[67],"pulls","branches",1,"forks",{"_171":103,"_173":103},"connections",{"_171":103,"_172":103},"count","unfilledCount","emptyCount",{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":84,"_17":71,"_50":24,"_52":72,"_54":55,"_56":-5,"_78":181,"_18":182},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":81,"_17":49,"_50":63,"_52":64,"_54":55,"_56":-5,"_78":179,"_18":180},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":77,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_78":177,"_18":178},[],[37],[],[59],[],[67],["D",1775694190499],{"_11":12,"_139":19},{"_11":12,"_134":-5,"_135":19,"_96":97,"_136":137,"_138":55},{"_17":61,"_13":16,"_35":42,"_126":87,"_127":-5,"_128":-5,"_129":-5,"_130":-5,"_131":-5,"_132":14,"_133":12},"ctx",{"_119":-5,"_155":220,"_221":222,"_223":224,"_225":55,"_226":55,"_227":55,"_228":46,"_229":-5,"_230":-7,"_231":-7,"_232":103,"_233":55,"_234":55,"_235":-5,"_236":55,"_237":55,"_238":55,"_239":-5},"ENV",{"_191":192,"_193":194,"_195":16,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219},"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"]

Code