[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_95":94,"_32":44,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",65,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","86567194-30fa-11f0-9d7d-569c3dd06744","name","fileType","content","# Baby Keyboard 🧸\n\nA deterministic baby keyboard where actions have predictable, educational\nconsequences to help babies learn cause and effect.\n\n_Note for Townie or other AI coding systems: using str_replace on escaped\ncharacters is very tricky and may no-op. if it seems to not be working, try a\nvery different tack instead of just bashing your head against the wall\nrepeatedly._\n\n## Features\n\n### Deterministic Interactions\n\n- **Hold to Grow**: Keys start growing immediately when pressed, reaching 2x\n size over 2 seconds\n- **Progressive Animations**:\n - 0-2s: Key grows smoothly to 2x size\n - 3s: Key starts vibrating while staying large\n - 5s: Key begins spinning while vibrating\n- **Release to Reset**: Letting go immediately stops all animations and shrinks\n the key back to normal\n\n### Visual Feedback\n\n- Keys are grey by default, with immediate color feedback when pressed\n\n## Educational Value\n\n- **Cause & Effect**: Every action has a predictable, visible consequence\n- **Temporal Learning**: Babies learn that holding longer creates more dramatic\n effects\n- **Spatial Awareness**: Color patterns help babies understand keyboard\n geography\n- **Motor Skills**: Encourages intentional key holding vs. random pressing\n\n## TODO\n\n- [ ] try to disable more keys (while still having a way to get out)\n\n### other modes\n\n- [ ] mode where each key only lights up once until all the other keys have been\n pressed. like it goes dark and if you press it again it makes a tiny dud\n animation. but then when you've pressed EVERY key it does a cool big\n animation\n\n## NOTES TO SELF\n\n### Things to disable on my mac to keep this active\n\n(maybe there's a better way to do this with a special app-wrapper)\n\n- make full-screen\n- turn off Alfred cmd-space\n- karabiner - turn off caps-lock to hyper so those hotkeys aren't activated\n- Settings -> three/four finger swipe to change spaces\n- see if I can turn off more of the fn keys","# Baby Keyboard 🧸\n\nA deterministic baby keyboard where actions have predictable, educational\nconsequences to help babies learn cause and effect.\n\n_Note for Townie or other AI coding systems: using str_replace on escaped\ncharacters is very tricky and may no-op. if it seems to not be working, try a\nvery different tack instead of just bashing your head against the wall\nrepeatedly._\n\n## Features\n\n### Deterministic Interactions\n\n- **Hold to Grow**: Keys start growing immediately when pressed, reaching 2x\n size over 2 seconds\n- **Progressive Animations**:\n - 0-2s: Key grows smoothly to 2x size\n - 3s: Key starts vibrating while staying large\n - 5s: Key begins spinning while vibrating\n- **Release to Reset**: Letting go immediately stops all animations and shrinks\n the key back to normal\n\n### Modifier Key Behavior\n\n- **Shift Key**: Changes keycaps to show uppercase letters and shifted symbols (e.g., 1 becomes !, 2 becomes @)\n- **Ctrl/Alt/Cmd Keys**: Display a shiny glint animation when pressed instead of expanding\n- **No Screen Effects**: Removed whole-keyboard background animations for cleaner experience\n\n### Visual Feedback\n\n- Keys are grey by default, with immediate color feedback when pressed\n- Letters default to lowercase and change to uppercase when shift is held\n\n## Educational Value\n\n- **Cause & Effect**: Every action has a predictable, visible consequence\n- **Temporal Learning**: Babies learn that holding longer creates more dramatic\n effects\n- **Spatial Awareness**: Color patterns help babies understand keyboard\n geography\n- **Motor Skills**: Encourages intentional key holding vs. random pressing\n\n## TODO\n\n- [ ] try to disable more keys (while still having a way to get out)\n\n### other modes\n\n- [ ] mode where each key only lights up once until all the other keys have been\n pressed. like it goes dark and if you press it again it makes a tiny dud\n animation. but then when you've pressed EVERY key it does a cool big\n animation\n\n## NOTES TO SELF\n\n### Things to disable on my mac to keep this active\n\n(maybe there's a better way to do this with a special app-wrapper)\n\n- make full-screen\n- turn off Alfred cmd-space\n- karabiner - turn off caps-lock to hyper so those hotkeys aren't activated\n- Settings -> three/four finger swipe to change spaces\n- see if I can turn off more of the fn keys","createdAt",["D",1758586849423],"branchVersion","branchId","86531ed6-30fa-11f0-9d7d-569c3dd06744","id","8652c562-30fa-11f0-9d7d-569c3dd06744","babyQwerty",["D",1747251300199],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","53f045b0-fcaa-11ef-9928-c9aafb5d50fa","pinnedFileId","865648e0-30fa-11f0-9d7d-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","658b7c0d-aded-45be-b139-8952d52d1479","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"isOwned",81,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","malcolmocean","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydTRFSlhQcUNYWnZFTjJHNURLendoUzgwbGwifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":162,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":163,"_79":164,"_81":165,"_83":25},"tree",[153,154],"files",[153,154],"counts",{"_142":61,"_143":144,"_145":61,"_146":147,"_148":149},"contents",[125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":138,"_32":28,"_30":31,"_129":-5,"_40":41,"_39":14,"_131":25,"_37":139,"_13":140,"_33":20,"_34":36,"_24":25,"_136":-5,"_27":141},{"_42":127,"_32":128,"_30":55,"_129":-5,"_40":41,"_39":130,"_131":25,"_37":132,"_13":133,"_33":134,"_34":135,"_24":25,"_136":-5,"_27":137},"1a974886-9813-11f0-96f3-0224a6c84d84","main.tsx","parentId",64,"latest",["D",1758586826631],59,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ============================================================================\n// KEYBOARD CONFIGURATION SYSTEM\n// ============================================================================\n\n// Key properties - defines visual and behavioral characteristics\nconst KEY_PROPERTIES = {\n // Regular letter keys (default to lowercase)\n \"a\": { width: \"square\", type: \"letter\", animatable: true },\n \"b\": { width: \"square\", type: \"letter\", animatable: true },\n \"c\": { width: \"square\", type: \"letter\", animatable: true },\n \"d\": { width: \"square\", type: \"letter\", animatable: true },\n \"e\": { width: \"square\", type: \"letter\", animatable: true },\n \"f\": { width: \"square\", type: \"letter\", animatable: true },\n \"g\": { width: \"square\", type: \"letter\", animatable: true },\n \"h\": { width: \"square\", type: \"letter\", animatable: true },\n \"i\": { width: \"square\", type: \"letter\", animatable: true },\n \"j\": { width: \"square\", type: \"letter\", animatable: true },\n \"k\": { width: \"square\", type: \"letter\", animatable: true },\n \"l\": { width: \"square\", type: \"letter\", animatable: true },\n \"m\": { width: \"square\", type: \"letter\", animatable: true },\n \"n\": { width: \"square\", type: \"letter\", animatable: true },\n \"o\": { width: \"square\", type: \"letter\", animatable: true },\n \"p\": { width: \"square\", type: \"letter\", animatable: true },\n \"q\": { width: \"square\", type: \"letter\", animatable: true },\n \"r\": { width: \"square\", type: \"letter\", animatable: true },\n \"s\": { width: \"square\", type: \"letter\", animatable: true },\n \"t\": { width: \"square\", type: \"letter\", animatable: true },\n \"u\": { width: \"square\", type: \"letter\", animatable: true },\n \"v\": { width: \"square\", type: \"letter\", animatable: true },\n \"w\": { width: \"square\", type: \"letter\", animatable: true },\n \"x\": { width: \"square\", type: \"letter\", animatable: true },\n \"y\": { width: \"square\", type: \"letter\", animatable: true },\n \"z\": { width: \"square\", type: \"letter\", animatable: true },\n\n // Number keys (with shift symbols)\n \"1\": { width: \"square\", type: \"number\", animatable: true, shifted: \"!\" },\n \"2\": { width: \"square\", type: \"number\", animatable: true, shifted: \"@\" },\n \"3\": { width: \"square\", type: \"number\", animatable: true, shifted: \"#\" },\n \"4\": { width: \"square\", type: \"number\", animatable: true, shifted: \"$\" },\n \"5\": { width: \"square\", type: \"number\", animatable: true, shifted: \"%\" },\n \"6\": { width: \"square\", type: \"number\", animatable: true, shifted: \"^\" },\n \"7\": { width: \"square\", type: \"number\", animatable: true, shifted: \"&\" },\n \"8\": { width: \"square\", type: \"number\", animatable: true, shifted: \"*\" },\n \"9\": { width: \"square\", type: \"number\", animatable: true, shifted: \"(\" },\n \"0\": { width: \"square\", type: \"number\", animatable: true, shifted: \")\" },\n\n // Symbol keys (with shift symbols)\n \"`\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"~\" },\n \"-\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"_\" },\n \"=\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"+\" },\n \"[\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"{\" },\n \"]\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"}\" },\n \"\\\\\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"|\" },\n \";\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \":\" },\n \"'\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"\\\"\" },\n \",\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"<\" },\n \".\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \">\" },\n \"/\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"?\" },\n\n // AZERTY specific symbols\n \"²\": { width: \"square\", type: \"symbol\", animatable: true },\n \"&\": { width: \"square\", type: \"symbol\", animatable: true },\n \"é\": { width: \"square\", type: \"symbol\", animatable: true },\n '\"': { width: \"square\", type: \"symbol\", animatable: true },\n \"(\": { width: \"square\", type: \"symbol\", animatable: true },\n \"è\": { width: \"square\", type: \"symbol\", animatable: true },\n \"_\": { width: \"square\", type: \"symbol\", animatable: true },\n \"ç\": { width: \"square\", type: \"symbol\", animatable: true },\n \"à\": { width: \"square\", type: \"symbol\", animatable: true },\n \")\": { width: \"square\", type: \"symbol\", animatable: true },\n \"^\": { width: \"square\", type: \"symbol\", animatable: true },\n \"$\": { width: \"square\", type: \"symbol\", animatable: true },\n \"ù\": { width: \"square\", type: \"symbol\", animatable: true },\n \"!\": { width: \"square\", type: \"symbol\", animatable: true },\n \":\": { width: \"square\", type: \"symbol\", animatable: true },\n\n // Modifier and special keys\n \"TAB\": { width: \"wide\", type: \"modifier\", animatable: false },\n \"CAPS\": { width: \"wide\", type: \"modifier\", animatable: false },\n \"SHIFT\": { width: \"wide\", type: \"modifier\", animatable: false },\n \"CTRL\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"ALT\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"ENTER\": { width: \"wide\", type: \"special\", animatable: false },\n \"BKSP\": { width: \"wide\", type: \"special\", animatable: false },\n \"SPACE\": { width: \"spacebar\", type: \"special\", animatable: false },\n // Mac-specific modifier keys\n \"FN\": { width: \"wide\", type: \"modifier\", animatable: false },\n \"OPT\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"CMD\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"←\": { width: \"square\", type: \"arrow\", animatable: false },\n \"↑\": { width: \"square\", type: \"arrow\", animatable: false },\n \"→\": { width: \"square\", type: \"arrow\", animatable: false },\n \"ESC\": { width: \"square\", type: \"special\", animatable: false },\n};\n\n// Keyboard layouts - defines the physical arrangement of keys (lowercase by default)\nconst KEYBOARD_LAYOUTS = {\n qwerty: [\n [\"`\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\", \"-\", \"=\", \"BKSP\"],\n [\"TAB\", \"q\", \"w\", \"e\", \"r\", \"t\", \"y\", \"u\", \"i\", \"o\", \"p\", \"[\", \"]\", \"\\\\\"],\n [\"CAPS\", \"a\", \"s\", \"d\", \"f\", \"g\", \"h\", \"j\", \"k\", \"l\", \";\", \"'\", \"ENTER\"],\n [\"SHIFT\", \"z\", \"x\", \"c\", \"v\", \"b\", \"n\", \"m\", \",\", \".\", \"/\", \"SHIFT\"],\n [\"FN\", \"CTRL\", \"ALT\", \"SPACE\", \"ALT\", \"CTRL\", \"←\", \"↑\", \"→\"],\n ],\n\n azerty: [\n [\"²\", \"&\", \"é\", '\"', \"'\", \"(\", \"-\", \"è\", \"_\", \"ç\", \"à\", \")\", \"=\", \"BKSP\"],\n [\"TAB\", \"a\", \"z\", \"e\", \"r\", \"t\", \"y\", \"u\", \"i\", \"o\", \"p\", \"^\", \"$\", \"\\\\\"],\n [\"CAPS\", \"q\", \"s\", \"d\", \"f\", \"g\", \"h\", \"j\", \"k\", \"l\", \"m\", \"ù\", \"ENTER\"],\n [\"SHIFT\", \"w\", \"x\", \"c\", \"v\", \"b\", \"n\", \",\", \";\", \":\", \"!\", \"SHIFT\"],\n [\"CTRL\", \"ALT\", \"SPACE\", \"ALT\", \"CTRL\"],\n ],\n\n dvorak: [\n [\"`\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\", \"[\", \"]\", \"BKSP\"],\n [\"TAB\", \"'\", \",\", \".\", \"p\", \"y\", \"f\", \"g\", \"c\", \"r\", \"l\", \"/\", \"=\", \"\\\\\"],\n [\"CAPS\", \"a\", \"o\", \"e\", \"u\", \"i\", \"d\", \"h\", \"t\", \"n\", \"s\", \"-\", \"ENTER\"],\n [\"SHIFT\", \";\", \"q\", \"j\", \"k\", \"x\", \"b\", \"m\", \"w\", \"v\", \"z\", \"SHIFT\"],\n [\"CTRL\", \"ALT\", \"SPACE\", \"ALT\", \"CTRL\"],\n ],\n};\n\n// Current active layout (can be changed dynamically)\nlet ACTIVE_LAYOUT = \"qwerty\";\n\n// Platform detection\nfunction detectPlatform() {\n if (typeof navigator !== \"undefined\") {\n return navigator.platform.toLowerCase().includes(\"mac\") ? \"mac\" : \"pc\";\n }\n return \"pc\"; // default to PC on server\n}\n\n// Function to get key position in the current layout\nfunction getKeyPosition(key) {\n const layout = KEYBOARD_LAYOUTS[ACTIVE_LAYOUT];\n\n for (let row = 0; row < layout.length; row++) {\n const col = layout[row].indexOf(key);\n if (col !== -1) {\n return { row, col };\n }\n }\n return null; // Key not found\n}\n\n// Function to get color based on keyboard position\nfunction getKeyColor(key) {\n const position = getKeyPosition(key);\n\n if (!position) {\n // Default color for keys not in layout\n return { r: 200, g: 200, b: 200 };\n }\n\n const { row, col } = position;\n const layout = KEYBOARD_LAYOUTS[ACTIVE_LAYOUT];\n\n // RGB from left to right: Red -> Orange -> Yellow -> Green -> Cyan -> Blue -> Purple\n const maxCols = Math.max(...layout.map((row) => row.length)) - 1;\n const normalizedCol = col / maxCols;\n\n let r, g, b;\n\n // Create RGB spectrum from left to right with smoother transitions\n if (normalizedCol <= 1 / 7) {\n // Red to Red-Orange\n const t = normalizedCol * 7;\n r = 255;\n g = Math.floor(t * 100); // 0 to 100\n b = 0;\n } else if (normalizedCol <= 2 / 7) {\n // Red-Orange to Orange\n const t = (normalizedCol - 1 / 7) * 7;\n r = 255;\n g = Math.floor(100 + t * 65); // 100 to 165\n b = 0;\n } else if (normalizedCol <= 3 / 7) {\n // Orange to Yellow\n const t = (normalizedCol - 2 / 7) * 7;\n r = 255;\n g = Math.floor(165 + t * 90); // 165 to 255\n b = 0;\n } else if (normalizedCol <= 4 / 7) {\n // Yellow to Green\n const t = (normalizedCol - 3 / 7) * 7;\n r = Math.floor(255 - t * 255); // 255 to 0\n g = 255;\n b = 0;\n } else if (normalizedCol <= 5 / 7) {\n // Green to Cyan\n const t = (normalizedCol - 4 / 7) * 7;\n r = 0;\n g = 255;\n b = Math.floor(t * 255); // 0 to 255\n } else if (normalizedCol <= 6 / 7) {\n // Cyan to Blue\n const t = (normalizedCol - 5 / 7) * 7;\n r = 0;\n g = Math.floor(255 - t * 255); // 255 to 0\n b = 255;\n } else {\n // Blue to Purple\n const t = (normalizedCol - 6 / 7) * 7;\n r = Math.floor(t * 255); // 0 to 255\n g = 0;\n b = 255;\n }\n\n // Adjust brightness and saturation based on row\n let brightness, saturation;\n\n switch (row) {\n case 0: // Top row - medium brightness, less saturated\n brightness = 0.85;\n saturation = 0.6;\n break;\n case 1: // Second row - very light, very low saturation (closer to white)\n brightness = 1.4;\n saturation = 0.3;\n break;\n case 2: // Home row - full saturation\n brightness = 1.0;\n saturation = 1.0;\n break;\n case 3: // Lower row - dark\n brightness = 0.5;\n saturation = 1.0;\n break;\n default:\n brightness = 1.0;\n saturation = 1.0;\n }\n\n // Apply saturation (blend with gray)\n const gray = 128;\n r = Math.floor(gray + (r - gray) * saturation);\n g = Math.floor(gray + (g - gray) * saturation);\n b = Math.floor(gray + (b - gray) * saturation);\n\n // Apply brightness\n r = Math.floor(Math.min(255, r * brightness));\n g = Math.floor(Math.min(255, g * brightness));\n b = Math.floor(Math.min(255, b * brightness));\n\n // Ensure values are in valid range\n r = Math.max(0, Math.min(255, r));\n g = Math.max(0, Math.min(255, g));\n b = Math.max(0, Math.min(255, b));\n\n return { r, g, b };\n}\n\n// Helper function to get the row number for a key\nfunction getKeyRowFromKey(key) {\n const position = getKeyPosition(key);\n return position ? position.row : -1;\n}\n\n// Helper function to get key properties\nfunction getKeyProperties(key) {\n return KEY_PROPERTIES[key] ||\n { width: \"square\", type: \"unknown\", animatable: true };\n}\n\n// Helper function to check if key should animate\nfunction shouldKeyAnimate(key) {\n const props = getKeyProperties(key);\n return props.animatable;\n}\n\n// Helper function to check if key is special/modifier\nfunction isSpecialKey(key) {\n const props = getKeyProperties(key);\n return props.type === \"modifier\" || props.type === \"special\";\n}\n\n// Function to switch keyboard layout\nfunction switchKeyboardLayout(layoutName) {\n if (KEYBOARD_LAYOUTS[layoutName]) {\n ACTIVE_LAYOUT = layoutName;\n return true;\n }\n return false;\n}\n\n// ============================================================================\n// ANIMATION AND VISUAL EFFECTS\n// ============================================================================\n\n// ============================================================================\n// MAIN KEYBOARD COMPONENT\n// ============================================================================\nconst PROGRESSIVE_ANIMATIONS = {\n grow: `\n @keyframes grow {\n from { transform: scale(1); }\n to { transform: scale(2); }\n }\n `,\n vibrate: `\n @keyframes vibrate {\n 0%, 100% { transform: scale(2) translateX(0); }\n 25% { transform: scale(2) translateX(-2px); }\n 75% { transform: scale(2) translateX(2px); }\n }\n `,\n spin: `\n @keyframes spin {\n from { transform: scale(2) rotate(0deg); }\n to { transform: scale(2) rotate(360deg); }\n }\n `,\n glint: `\n @keyframes glint {\n 0% { \n background: linear-gradient(45deg, #f0f0f0 0%, #f0f0f0 40%, #ffffff 50%, #f0f0f0 60%, #f0f0f0 100%);\n }\n 50% { \n background: linear-gradient(45deg, #f0f0f0 0%, #ffffff 20%, #f8f8f8 50%, #ffffff 80%, #f0f0f0 100%);\n box-shadow: 0 0 20px rgba(255,255,255,0.8);\n }\n 100% { \n background: linear-gradient(45deg, #f0f0f0 0%, #f0f0f0 40%, #ffffff 50%, #f0f0f0 60%, #f0f0f0 100%);\n }\n }\n `,\n};\n\n// ============================================================================\n// MAIN KEYBOARD COMPONENT\n// ============================================================================\n\nfunction BabyKeyboard() {\n const [pressedKeys, setPressedKeys] = useState({});\n const [keyTimers, setKeyTimers] = useState({});\n const [shiftPressed, setShiftPressed] = useState(false);\n const [glintingKeys, setGlintingKeys] = useState({});\n const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });\n const [cursorSize, setCursorSize] = useState(20);\n const [currentLayout, setCurrentLayout] = useState(ACTIVE_LAYOUT);\n\n const startKeyAnimation = (key) => {\n // Only animate keys that should be animated\n if (!shouldKeyAnimate(key)) return;\n\n const { r, g, b } = getKeyColor(key);\n const color = `rgb(${r}, ${g}, ${b})`;\n\n // Clear any existing timer for this key\n if (keyTimers[key]) {\n clearTimeout(keyTimers[key].growTimer);\n clearTimeout(keyTimers[key].vibrateTimer);\n clearTimeout(keyTimers[key].spinTimer);\n }\n\n // Immediately light up the key with color change (no transition delay)\n setPressedKeys((prev) => ({\n ...prev,\n [key]: {\n color,\n phase: \"grow\",\n startTime: Date.now(),\n },\n }));\n\n // Set up progressive timers\n const growTimer = setTimeout(() => {\n setPressedKeys((prev) => ({\n ...prev,\n [key]: { ...prev[key], phase: \"vibrate\" },\n }));\n }, 2000); // Start growing immediately, vibrate at 2s\n\n const vibrateTimer = setTimeout(() => {\n setPressedKeys((prev) => ({\n ...prev,\n [key]: { ...prev[key], phase: \"vibrate\" },\n }));\n }, 3000); // Vibrate at 3s\n\n const spinTimer = setTimeout(() => {\n setPressedKeys((prev) => ({\n ...prev,\n [key]: { ...prev[key], phase: \"spin\" },\n }));\n }, 5000); // Spin at 5s\n\n setKeyTimers((prev) => ({\n ...prev,\n [key]: { growTimer, vibrateTimer, spinTimer },\n }));\n };\n\n const stopKeyAnimation = (key) => {\n // Clear timers\n if (keyTimers[key]) {\n clearTimeout(keyTimers[key].growTimer);\n clearTimeout(keyTimers[key].vibrateTimer);\n clearTimeout(keyTimers[key].spinTimer);\n }\n\n // Remove key from pressed state\n setPressedKeys((prev) => {\n const newKeys = { ...prev };\n delete newKeys[key];\n return newKeys;\n });\n\n setKeyTimers((prev) => {\n const newTimers = { ...prev };\n delete newTimers[key];\n return newTimers;\n });\n };\n\n const startGlintAnimation = (key) => {\n setGlintingKeys(prev => ({ ...prev, [key]: true }));\n setTimeout(() => {\n setGlintingKeys(prev => {\n const newGlinting = { ...prev };\n delete newGlinting[key];\n return newGlinting;\n });\n }, 1000);\n };\n\n const handleKeyPress = (key, isSpecial = false) => {\n const keyProps = getKeyProperties(key);\n \n if (key === \"SHIFT\") {\n setShiftPressed(true);\n startGlintAnimation(key);\n } else if (keyProps.glint) {\n // Handle CTRL, ALT, CMD, OPT with glint animation\n startGlintAnimation(key);\n } else if (!isSpecial) {\n startKeyAnimation(key);\n }\n };\n\n const handleKeyRelease = (key) => {\n if (key === \"SHIFT\") {\n setShiftPressed(false);\n }\n \n // Stop animation when key is released (only for animatable keys)\n if (shouldKeyAnimate(key)) {\n stopKeyAnimation(key);\n }\n };\n\n const getDisplayKey = (key) => {\n const keyProps = getKeyProperties(key);\n \n // Handle shift state for letters\n if (keyProps.type === \"letter\") {\n return shiftPressed ? key.toUpperCase() : key;\n }\n \n // Handle shift state for numbers and symbols\n if (shiftPressed && keyProps.shifted) {\n return keyProps.shifted;\n }\n \n return key;\n };\n\n // Function to switch layouts\n const switchLayout = (layoutName) => {\n if (switchKeyboardLayout(layoutName)) {\n setCurrentLayout(layoutName);\n // Clear any active animations when switching layouts\n setPressedKeys({});\n Object.values(keyTimers).forEach((timer) => {\n clearTimeout(timer.growTimer);\n clearTimeout(timer.vibrateTimer);\n clearTimeout(timer.spinTimer);\n });\n setKeyTimers({});\n }\n };\n\n useEffect(() => {\n const handleMouseMove = (event) => {\n setCursorPosition({ x: event.clientX, y: event.clientY });\n setCursorSize(Math.min(Math.max(20 + event.movementX * 0.5, 20), 100));\n };\n\n window.addEventListener(\"mousemove\", handleMouseMove);\n\n const handleHardwareKeyDown = (event) => {\n // Prevent default and stop propagation for all key events\n event.preventDefault();\n event.stopPropagation();\n\n const specialKeys = {\n \"`\": \"`\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n \"4\": \"4\",\n \"5\": \"5\",\n \"6\": \"6\",\n \"7\": \"7\",\n \"8\": \"8\",\n \"9\": \"9\",\n \"0\": \"0\",\n \"-\": \"-\",\n \"=\": \"=\",\n \"Backspace\": \"BKSP\",\n \"Tab\": \"TAB\",\n \"[\": \"[\",\n \"]\": \"]\",\n \"\\\\\": \"\\\\\",\n \";\": \";\",\n \"'\": \"'\",\n \",\": \",\",\n \".\": \".\",\n \"/\": \"/\",\n \" \": \"SPACE\",\n \"Enter\": \"ENTER\",\n \"Escape\": \"ESC\",\n \"Alt\": \"ALT\",\n \"Control\": \"CTRL\",\n \"Shift\": \"SHIFT\",\n \"CapsLock\": \"CAPS\",\n };\n\n const key = specialKeys[event.key] || event.key.toLowerCase();\n\n // Only start animation if key isn't already pressed\n if (!pressedKeys[key] && !glintingKeys[key]) {\n // Check if it's a special key using our abstracted function\n if (isSpecialKey(key) && !shouldKeyAnimate(key)) {\n handleKeyPress(key, true);\n return;\n }\n\n // Handle all other keys\n handleKeyPress(key, false);\n }\n };\n\n const handleHardwareKeyUp = (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n const specialKeys = {\n \"`\": \"`\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n \"4\": \"4\",\n \"5\": \"5\",\n \"6\": \"6\",\n \"7\": \"7\",\n \"8\": \"8\",\n \"9\": \"9\",\n \"0\": \"0\",\n \"-\": \"-\",\n \"=\": \"=\",\n \"Backspace\": \"BKSP\",\n \"Tab\": \"TAB\",\n \"[\": \"[\",\n \"]\": \"]\",\n \"\\\\\": \"\\\\\",\n \";\": \";\",\n \"'\": \"'\",\n \",\": \",\",\n \".\": \".\",\n \"/\": \"/\",\n \" \": \"SPACE\",\n \"Enter\": \"ENTER\",\n \"Escape\": \"ESC\",\n \"Alt\": \"ALT\",\n \"Control\": \"CTRL\",\n \"Shift\": \"SHIFT\",\n \"CapsLock\": \"CAPS\",\n };\n\n const key = specialKeys[event.key] || event.key.toLowerCase();\n\n handleKeyRelease(key);\n };\n\n window.addEventListener(\"keydown\", handleHardwareKeyDown, {\n capture: true,\n });\n window.addEventListener(\"keyup\", handleHardwareKeyUp, { capture: true });\n\n return () => {\n window.removeEventListener(\"keydown\", handleHardwareKeyDown, {\n capture: true,\n });\n window.removeEventListener(\"keyup\", handleHardwareKeyUp, {\n capture: true,\n });\n window.removeEventListener(\"mousemove\", handleMouseMove);\n\n // Clean up any remaining timers\n Object.values(keyTimers).forEach((timer) => {\n clearTimeout(timer.growTimer);\n clearTimeout(timer.vibrateTimer);\n clearTimeout(timer.spinTimer);\n });\n };\n }, [pressedKeys, keyTimers, glintingKeys]);\n\n // Get current keyboard layout\n const keyboardRows = KEYBOARD_LAYOUTS[currentLayout];\n\n return (\n <>\n \n\n

\n {keyboardRows.map((row, rowIndex) => (\n

\n {row.map((key) => {\n const keyState = pressedKeys[key];\n const isPressed = !!keyState;\n const isGlinting = !!glintingKeys[key];\n const animationClass = keyState?.phase || \"\";\n const keyProps = getKeyProperties(key);\n const displayKey = getDisplayKey(key);\n\n return (\n {\n e.preventDefault();\n e.stopPropagation();\n if (!isPressed && !isGlinting) {\n handleKeyPress(key, !shouldKeyAnimate(key));\n }\n }}\n onMouseUp={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleKeyRelease(key);\n }}\n onMouseLeave={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleKeyRelease(key);\n }}\n style={{\n backgroundColor: keyState?.color || \"white\",\n color: isPressed\n ? (getKeyRowFromKey(key) <= 2 ? \"#333\" : \"white\")\n : \"#333\",\n flex: keyProps.width === \"spacebar\"\n ? \"4\"\n : (keyProps.width === \"wide\" ? \"1\" : \"0 0 40px\"),\n }}\n >\n {displayKey}\n

\n );\n })}\n

\n ))}\n \n \n );\n}\n\nfunction App() {\n return (\n

Baby Keyboard 🧸

\n \n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const animationStyles = [\n PROGRESSIVE_ANIMATIONS.grow,\n PROGRESSIVE_ANIMATIONS.vibrate,\n PROGRESSIVE_ANIMATIONS.spin,\n PROGRESSIVE_ANIMATIONS.glint,\n ].join(\"\\n\");\n\n return new Response(\n `\n \n \n Baby Keyboard 🧸\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n touch-action: manipulation;\n user-select: none;\n cursor: none;\n}\n\n.baby-app {\n width: 100%;\n text-align: center;\n}\n\n.cursor-trail {\n position: fixed;\n pointer-events: none;\n border-radius: 50%;\n background: radial-gradient(\n circle at center, \n rgba(255,105,180,0.7) 0%, \n rgba(255,105,180,0.3) 50%, \n rgba(255,105,180,0.1) 100%\n );\n transform: translate(-50%, -50%);\n z-index: 9999;\n transition: width 0.1s ease, height 0.1s ease;\n}\n\n.layout-switcher {\n margin-bottom: 20px;\n display: flex;\n justify-content: center;\n gap: 10px;\n}\n\n.layout-switcher button {\n padding: 8px 16px;\n border: 2px solid #ccc;\n border-radius: 5px;\n background: white;\n cursor: pointer;\n font-weight: bold;\n transition: all 0.2s ease;\n}\n\n.layout-switcher button:hover {\n background: #f0f0f0;\n}\n\n.layout-switcher button.active {\n background: #007bff;\n color: white;\n border-color: #007bff;\n}\n\n.baby-keyboard {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 10px;\n background-color: #e0e0e0;\n transition: background-color 0.5s ease;\n}\n\n.keyboard-row {\n display: flex;\n justify-content: center;\n gap: 5px;\n}\n\n.key {\n min-width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 2px solid transparent;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0s, color 0s, transform 0.2s ease, box-shadow 0.2s ease;\n font-size: 0.9em;\n font-weight: bold;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n text-align: center;\n background-color: white;\n color: #333;\n}\n\n.special-key {\n background-color: #f0f0f0;\n color: #333;\n}\n\n.key:active {\n transform: scale(0.95);\n}\n\n.key.pressed {\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n border: 2px solid #fff;\n}\n\n/* Progressive animations */\n.grow { \n animation: grow 2s ease-out forwards;\n}\n\n.vibrate { \n animation: vibrate 0.1s infinite;\n}\n\n.spin { \n animation: spin 1s linear infinite;\n}\n\n.glinting {\n animation: glint 1s ease-in-out;\n}\n`;","label",[128],"282d6494-9813-11f0-a09a-0224a6c84d84",["D",1758586849423],5,[28],"pulls","branches",1,"forks","envVars",{"_150":61,"_152":61},"connections",{"_150":61,"_151":61},"count","unfilledCount","emptyCount",{"_42":138,"_32":28,"_30":31,"_129":-5,"_40":41,"_39":14,"_131":25,"_37":159,"_13":140,"_33":20,"_34":36,"_24":25,"_136":-5,"_156":160,"_27":161},{"_42":127,"_32":128,"_30":55,"_129":-5,"_40":41,"_39":130,"_131":25,"_37":155,"_13":133,"_33":134,"_34":135,"_24":25,"_136":-5,"_156":157,"_27":158},["D",1758586826631],"children",[],[128],["D",1758586849423],[],[28],["D",1747251300199],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":25},{"_13":84,"_32":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_122":199,"_200":201,"_202":203,"_204":25,"_205":25,"_206":25,"_207":57,"_208":-5,"_209":-7,"_210":-7,"_211":61,"_212":25,"_213":25,"_214":-5,"_215":25,"_216":25,"_217":25,"_218":-5},"ENV",{"_170":171,"_172":173,"_174":85,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198},"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"]

Diff · v65