[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_165":166,"_167":168},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_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",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_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",22,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","865648e0-30fa-11f0-9d7d-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Function to get color based on keyboard position\nfunction getKeyColor(key) {\n // Create a mapping based on keyboard layout position\n const keyboardLayout = [\n ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '='],\n ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\\\'],\n ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', \"'\"],\n ['Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/']\n ];\n \n // Find position of key\n let row = -1, col = -1;\n for (let r = 0; r < keyboardLayout.length; r++) {\n const c = keyboardLayout[r].indexOf(key);\n if (c !== -1) {\n row = r;\n col = c;\n break;\n }\n }\n \n if (row === -1) {\n // Default color for special keys\n return { r: 200, g: 200, b: 200 };\n }\n \n // RGB from left to right: Red -> Orange -> Yellow -> Green -> Cyan -> Blue -> Purple\n // Including secondary colors on the far right (purple for symbols like [];',.)\n const maxCols = Math.max(...keyboardLayout.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\n if (normalizedCol <= 1/6) {\n // Red to Orange\n const t = normalizedCol * 6;\n r = 255;\n g = Math.floor(t * 165); // 0 to 165 (orange)\n b = 0;\n } else if (normalizedCol <= 2/6) {\n // Orange to Yellow\n const t = (normalizedCol - 1/6) * 6;\n r = 255;\n g = Math.floor(165 + t * 90); // 165 to 255\n b = 0;\n } else if (normalizedCol <= 3/6) {\n // Yellow to Green\n const t = (normalizedCol - 2/6) * 6;\n r = Math.floor(255 - t * 255); // 255 to 0\n g = 255;\n b = 0;\n } else if (normalizedCol <= 4/6) {\n // Green to Cyan\n const t = (normalizedCol - 3/6) * 6;\n r = 0;\n g = 255;\n b = Math.floor(t * 255); // 0 to 255\n } else if (normalizedCol <= 5/6) {\n // Cyan to Blue\n const t = (normalizedCol - 4/6) * 6;\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 - 5/6) * 6;\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 // Row 0 (numbers): medium brightness, less saturated\n // Row 1 (upper letters): light\n // Row 2 (home row): full saturation\n // Row 3 (lower row): dark\n \n let brightness, saturation;\n \n switch (row) {\n case 0: // Number row - medium brightness, less saturated\n brightness = 0.7;\n saturation = 0.6;\n break;\n case 1: // QWERTY 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\nconst MODIFIER_COLORS = [\n { color: \"#FFD700\", texture: \"radial-gradient(circle, #FFD700 0%, #FFA500 100%)\" }, // Gold to Orange\n { color: \"#00CED1\", texture: \"linear-gradient(135deg, #00CED1 0%, #1E90FF 100%)\" }, // Turquoise to Dodger Blue\n { color: \"#FF69B4\", texture: \"linear-gradient(45deg, #FF69B4 0%, #FF1493 100%)\" }, // Hot Pink\n { color: \"#7FFFD4\", texture: \"radial-gradient(circle, #7FFFD4 0%, #00FA9A 100%)\" }, // Aquamarine to Medium Spring Green\n];\n\n// Progressive animation keyframes\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};\n\nconst MODIFIER_ANIMATIONS = [\n { \n name: \"screen-flash\", \n keyframes: `\n @keyframes screen-flash {\n 0%, 100% { background-color: #f0f0f0; }\n 50% { background-color: #ffffff; }\n }\n `,\n class: \"screen-flash\"\n },\n { \n name: \"color-wave\", \n keyframes: `\n @keyframes color-wave {\n 0% { background-color: #f0f0f0; }\n 25% { background-color: #FFD700; }\n 50% { background-color: #00CED1; }\n 75% { background-color: #FF69B4; }\n 100% { background-color: #f0f0f0; }\n }\n `,\n class: \"color-wave\"\n }\n];\n\nfunction BabyKeyboard() {\n const [pressedKeys, setPressedKeys] = useState({});\n const [keyTimers, setKeyTimers] = useState({});\n const [screenEffect, setScreenEffect] = useState(null);\n const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });\n const [cursorSize, setCursorSize] = useState(20);\n\n const startKeyAnimation = (key) => {\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 handleKeyPress = (key, isSpecial = false) => {\n if (isSpecial) {\n // Special handling for modifier and special keys\n const { color: modColor } = MODIFIER_COLORS[Math.floor(Math.random() * MODIFIER_COLORS.length)];\n const { class: animationClass } = MODIFIER_ANIMATIONS[Math.floor(Math.random() * MODIFIER_ANIMATIONS.length)];\n \n setScreenEffect(animationClass);\n setTimeout(() => setScreenEffect(null), 1000);\n } else {\n startKeyAnimation(key);\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', '2': '2', '3': '3', '4': '4', '5': '5', \n '6': '6', '7': '7', '8': '8', '9': '9', '0': '0', \n '-': '-', '=': '=', \n 'Backspace': 'BKSP',\n 'Tab': 'TAB',\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.toUpperCase();\n \n // Only start animation if key isn't already pressed\n if (!pressedKeys[key]) {\n // Modifier keys\n if (['META', 'CONTROL', 'ALT', 'SHIFT', 'CAPS'].includes(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', '2': '2', '3': '3', '4': '4', '5': '5', \n '6': '6', '7': '7', '8': '8', '9': '9', '0': '0', \n '-': '-', '=': '=', \n 'Backspace': 'BKSP',\n 'Tab': 'TAB',\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.toUpperCase();\n \n // Stop animation when key is released\n if (!['META', 'CONTROL', 'ALT', 'SHIFT', 'CAPS'].includes(key)) {\n stopKeyAnimation(key);\n }\n };\n\n window.addEventListener('keydown', handleHardwareKeyDown, { capture: true });\n window.addEventListener('keyup', handleHardwareKeyUp, { capture: true });\n \n return () => {\n window.removeEventListener('keydown', handleHardwareKeyDown, { capture: true });\n window.removeEventListener('keyup', handleHardwareKeyUp, { capture: true });\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]);\n\n const keyboardRows = [\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 ['CTRL', 'ALT', 'SPACE', 'ALT', 'CTRL']\n ];\n\n return (\n <>\n

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

\n {row.map(key => {\n const keyState = pressedKeys[key];\n const isPressed = !!keyState;\n const animationClass = keyState?.phase || '';\n \n return (\n

{\n e.preventDefault();\n e.stopPropagation();\n if (!isPressed) {\n handleKeyPress(key, false);\n }\n }}\n onMouseUp={(e) => {\n e.preventDefault();\n e.stopPropagation();\n stopKeyAnimation(key);\n }}\n onMouseLeave={(e) => {\n e.preventDefault();\n e.stopPropagation();\n stopKeyAnimation(key);\n }}\n style={{\n backgroundColor: keyState?.color || 'white',\n color: isPressed ? 'white' : '#333',\n flex: key === 'SPACE' ? '4' : \n (['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '[', ']', '\\\\'].includes(key) ? '0' : '1')\n }}\n >\n {key}\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 ...MODIFIER_ANIMATIONS.map(anim => anim.keyframes)\n ].join('\\n');\n\n return new Response(`\n \n \n Baby Keyboard 🧸\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\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.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.screen-flash { animation: screen-flash 1s; }\n.color-wave { animation: color-wave 2s; }\n`;","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Function to get color based on keyboard position\nfunction getKeyColor(key) {\n // Create a mapping based on keyboard layout position\n const keyboardLayout = [\n ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '='],\n ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\\\'],\n ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', \"'\"],\n ['Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/']\n ];\n \n // Find position of key\n let row = -1, col = -1;\n for (let r = 0; r < keyboardLayout.length; r++) {\n const c = keyboardLayout[r].indexOf(key);\n if (c !== -1) {\n row = r;\n col = c;\n break;\n }\n }\n \n if (row === -1) {\n // Default color for special keys\n return { r: 200, g: 200, b: 200 };\n }\n \n // RGB from left to right: Red -> Orange -> Yellow -> Green -> Cyan -> Blue -> Purple\n // Including secondary colors on the far right (purple for symbols like [];',.)\n const maxCols = Math.max(...keyboardLayout.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\n if (normalizedCol <= 1/6) {\n // Red to Orange\n const t = normalizedCol * 6;\n r = 255;\n g = Math.floor(t * 165); // 0 to 165 (orange)\n b = 0;\n } else if (normalizedCol <= 2/6) {\n // Orange to Yellow\n const t = (normalizedCol - 1/6) * 6;\n r = 255;\n g = Math.floor(165 + t * 90); // 165 to 255\n b = 0;\n } else if (normalizedCol <= 3/6) {\n // Yellow to Green\n const t = (normalizedCol - 2/6) * 6;\n r = Math.floor(255 - t * 255); // 255 to 0\n g = 255;\n b = 0;\n } else if (normalizedCol <= 4/6) {\n // Green to Cyan\n const t = (normalizedCol - 3/6) * 6;\n r = 0;\n g = 255;\n b = Math.floor(t * 255); // 0 to 255\n } else if (normalizedCol <= 5/6) {\n // Cyan to Blue\n const t = (normalizedCol - 4/6) * 6;\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 - 5/6) * 6;\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 // Row 0 (numbers): medium brightness, less saturated\n // Row 1 (upper letters): light\n // Row 2 (home row): full saturation\n // Row 3 (lower row): dark\n \n let brightness, saturation;\n \n switch (row) {\n case 0: // Number row - medium brightness, less saturated\n brightness = 0.7;\n saturation = 0.6;\n break;\n case 1: // QWERTY 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\nconst MODIFIER_COLORS = [\n { color: \"#FFD700\", texture: \"radial-gradient(circle, #FFD700 0%, #FFA500 100%)\" }, // Gold to Orange\n { color: \"#00CED1\", texture: \"linear-gradient(135deg, #00CED1 0%, #1E90FF 100%)\" }, // Turquoise to Dodger Blue\n { color: \"#FF69B4\", texture: \"linear-gradient(45deg, #FF69B4 0%, #FF1493 100%)\" }, // Hot Pink\n { color: \"#7FFFD4\", texture: \"radial-gradient(circle, #7FFFD4 0%, #00FA9A 100%)\" }, // Aquamarine to Medium Spring Green\n];\n\n// Progressive animation keyframes\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};\n\nconst MODIFIER_ANIMATIONS = [\n { \n name: \"screen-flash\", \n keyframes: `\n @keyframes screen-flash {\n 0%, 100% { background-color: #f0f0f0; }\n 50% { background-color: #ffffff; }\n }\n `,\n class: \"screen-flash\"\n },\n { \n name: \"color-wave\", \n keyframes: `\n @keyframes color-wave {\n 0% { background-color: #f0f0f0; }\n 25% { background-color: #FFD700; }\n 50% { background-color: #00CED1; }\n 75% { background-color: #FF69B4; }\n 100% { background-color: #f0f0f0; }\n }\n `,\n class: \"color-wave\"\n }\n];\n\nfunction BabyKeyboard() {\n const [pressedKeys, setPressedKeys] = useState({});\n const [keyTimers, setKeyTimers] = useState({});\n const [screenEffect, setScreenEffect] = useState(null);\n const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });\n const [cursorSize, setCursorSize] = useState(20);\n\n const startKeyAnimation = (key) => {\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 handleKeyPress = (key, isSpecial = false) => {\n if (isSpecial) {\n // Special handling for modifier and special keys\n const { color: modColor } = MODIFIER_COLORS[Math.floor(Math.random() * MODIFIER_COLORS.length)];\n const { class: animationClass } = MODIFIER_ANIMATIONS[Math.floor(Math.random() * MODIFIER_ANIMATIONS.length)];\n \n setScreenEffect(animationClass);\n setTimeout(() => setScreenEffect(null), 1000);\n } else {\n startKeyAnimation(key);\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', '2': '2', '3': '3', '4': '4', '5': '5', \n '6': '6', '7': '7', '8': '8', '9': '9', '0': '0', \n '-': '-', '=': '=', \n 'Backspace': 'BKSP',\n 'Tab': 'TAB',\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.toUpperCase();\n \n // Only start animation if key isn't already pressed\n if (!pressedKeys[key]) {\n // Modifier keys\n if (['META', 'CONTROL', 'ALT', 'SHIFT', 'CAPS'].includes(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', '2': '2', '3': '3', '4': '4', '5': '5', \n '6': '6', '7': '7', '8': '8', '9': '9', '0': '0', \n '-': '-', '=': '=', \n 'Backspace': 'BKSP',\n 'Tab': 'TAB',\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.toUpperCase();\n \n // Stop animation when key is released\n if (!['META', 'CONTROL', 'ALT', 'SHIFT', 'CAPS'].includes(key)) {\n stopKeyAnimation(key);\n }\n };\n\n window.addEventListener('keydown', handleHardwareKeyDown, { capture: true });\n window.addEventListener('keyup', handleHardwareKeyUp, { capture: true });\n \n return () => {\n window.removeEventListener('keydown', handleHardwareKeyDown, { capture: true });\n window.removeEventListener('keyup', handleHardwareKeyUp, { capture: true });\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]);\n\n const keyboardRows = [\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 ['CTRL', 'ALT', 'SPACE', 'ALT', 'CTRL']\n ];\n\n return (\n <>\n

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

\n {row.map(key => {\n const keyState = pressedKeys[key];\n const isPressed = !!keyState;\n const animationClass = keyState?.phase || '';\n \n return (\n

{\n e.preventDefault();\n e.stopPropagation();\n if (!isPressed) {\n handleKeyPress(key, false);\n }\n }}\n onMouseUp={(e) => {\n e.preventDefault();\n e.stopPropagation();\n stopKeyAnimation(key);\n }}\n onMouseLeave={(e) => {\n e.preventDefault();\n e.stopPropagation();\n stopKeyAnimation(key);\n }}\n style={{\n backgroundColor: keyState?.color || 'white',\n color: isPressed ? (getKeyRowFromKey(key) <= 2 ? '#333' : 'white') : '#333',\n flex: key === 'SPACE' ? '4' : \n (['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '[', ']', '\\\\'].includes(key) ? '0' : '1')\n }}\n >\n {key}\n

\n );\n })}\n

\n ))}\n

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

Baby Keyboard 🧸

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

Diff · v22