https://tedfactory.com/en/tags/typing/Recent content in Typing on Ted FactoryHugoenFri, 06 Mar 2026 01:28:03 +0900https://tedfactory.com/en/widgets/typing-sky/Fri, 06 Mar 2026 00:00:00 +0900https://tedfactory.com/en/widgets/typing-sky/<h1 id="typing-sky">Typing Sky<a class="anchor" href="#typing-sky">#</a></h1> <p>A typing game where you shoot down words flying across the sky. Words from the famous poems and novels listed below scroll from right to left. Type them correctly before they reach the left edge to score points. Each word&rsquo;s character count is added to your score, and the speed increases as you succeed.</p> <style> .typing-game-wrap { position: relative; width: 100%; max-width: 900px; margin: 24px auto; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; user-select: none; } .typing-game-wrap *, .typing-game-wrap *::before, .typing-game-wrap *::after { box-sizing: border-box; } /* HUD */ .tg-hud { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(30, 40, 70, 0.85); border-radius: 12px 12px 0 0; color: #e8ecf4; font-size: 15px; gap: 12px; flex-wrap: wrap; } .tg-hud-item { display: flex; align-items: center; gap: 6px; } .tg-hud-label { opacity: 0.7; font-size: 13px; } .tg-hud-value { font-weight: 700; font-size: 18px; min-width: 32px; text-align: right; } #tg-lives-display .tg-heart { color: #ff4d6a; margin-right: 1px; } /* Play area */ .tg-arena { position: relative; width: 100%; height: 340px; background: url('/images/widgets/typing-sky-bg.png') center/cover no-repeat; overflow: hidden; border-left: 4px solid rgba(255, 70, 90, 0.7); } .tg-lane-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.13); pointer-events: none; } /* Words */ .tg-word { position: absolute; padding: 4px 14px; border-radius: 8px; font-size: 18px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; transition: opacity 0.15s, transform 0.15s; text-shadow: 0 1px 3px rgba(0,0,0,0.35); pointer-events: none; } .tg-word.matched { opacity: 0; transform: scale(1.5); } .tg-word.highlight { outline: 2px solid #ffe066; outline-offset: 2px; } /* Input area */ .tg-input-bar { display: flex; gap: 8px; padding: 10px 16px; background: rgba(30, 40, 70, 0.85); border-radius: 0 0 12px 12px; } #tg-input { flex: 1; padding: 10px 16px; font-size: 20px; font-weight: 600; border: 2px solid rgba(255,255,255,0.25); border-radius: 8px; background: rgba(255,255,255,0.12); color: #fff; outline: none; letter-spacing: 1px; } #tg-input:focus { border-color: rgba(100,180,255,0.7); } #tg-input::placeholder { color: rgba(255,255,255,0.35); } #tg-input:disabled { opacity: 0.4; cursor: not-allowed; } .tg-btn { padding: 10px 24px; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.1s; } .tg-btn:active { transform: scale(0.96); } .tg-btn-start { background: linear-gradient(135deg, #4facfe, #00f2fe); color: #fff; } .tg-btn-start:hover { background: linear-gradient(135deg, #3a9aee, #00d4e0); } /* Overlay */ .tg-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15, 20, 40, 0.82); z-index: 10; text-align: center; padding: 24px; } .tg-overlay h2 { color: #fff; margin: 0 0 8px; font-size: 28px; } .tg-overlay p { color: rgba(255,255,255,0.7); margin: 4px 0; font-size: 15px; line-height: 1.6; } .tg-overlay .tg-final-score { font-size: 48px; font-weight: 800; color: #ffe066; margin: 12px 0; } .tg-overlay .tg-btn { margin-top: 18px; } /* Combo */ .tg-combo-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 32px; font-weight: 800; color: #ffe066; text-shadow: 0 2px 8px rgba(0,0,0,0.5); pointer-events: none; opacity: 0; z-index: 5; } .tg-combo-popup.show { animation: tgComboAnim 0.7s ease-out forwards; } @keyframes tgComboAnim { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } } /* Score popup */ .tg-score-popup { position: absolute; font-size: 22px; font-weight: 700; color: #7fff7f; text-shadow: 0 1px 4px rgba(0,0,0,0.5); pointer-events: none; opacity: 0; z-index: 5; } .tg-score-popup.show { animation: tgScoreAnim 0.6s ease-out forwards; } @keyframes tgScoreAnim { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-30px); } } </style> <div class="typing-game-wrap" id="typingGame"> <!-- HUD --> <div class="tg-hud"> <div class="tg-hud-item"> <span class="tg-hud-label">SCORE</span> <span class="tg-hud-value" id="tg-score">0</span> </div> <div class="tg-hud-item"> <span class="tg-hud-label">COMBO</span> <span class="tg-hud-value" id="tg-combo">0</span> </div> <div class="tg-hud-item"> <span class="tg-hud-label">SPEED</span> <span class="tg-hud-value" id="tg-speed">1.0x</span> </div> <div class="tg-hud-item" id="tg-lives-display"> <span class="tg-hud-label">LIVES</span> <span class="tg-hud-value" id="tg-lives"></span> </div> </div> <!-- Arena --> <div class="tg-arena" id="tg-arena"> <div class="tg-overlay" id="tg-overlay-start"> <h2>Typing Sky</h2> <p>Type the words flying across the sky!</p>