Parallax Japanese Words

/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState, useCallback } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function ParallaxWords() { const [words] = useState([ "金", "将来", "自分", "ない", "外国人", "答え", "不自由", "久しぶり", "工場", "為", "未来", "約束", "学校", "楽しい", "山", "東京", "電車", "感謝", "友達", "時間", "海", "空", "風", "愛", "心", "笑う", "悲しい", "美しい", "強い", "平和", "夢", "希望", "勇気", "自由", "音楽", "旅行", "春", "夏", "秋", "冬", "朝", "昼", "夜", "星", "月", "花", "森", "川", "山", "絵" ]); const [activeWords, setActiveWords] = useState([]); const MAX_WORDS = 7; const MAX_BRIGHTNESS = 0.7; const MIN_X = 50; const MAX_SPEED = 0.1; const MIN_SPEED = 0.02; const getRandomY = useCallback((usedYPositions) => { const containerHeight = 100; const wordHeight = 6; let y; let tries = 0; do { y = Math.random() * (containerHeight - wordHeight); tries++; } while ( usedYPositions.some( (existingY) => Math.abs(existingY - y) < wordHeight ) && tries < 100 ); return y; }, []); const createNewWord = useCallback(() => { const newWord = { id: Date.now(), // Unique identifier text: words[Math.floor(Math.random() * words.length)], brightness: 0.3 + Math.random() * (MAX_BRIGHTNESS - 0.3), y: getRandomY(activeWords.map(w => w.y)), x: 100, // Start from the right side speed: 0 // Will be calculated based on brightness }; newWord.speed = MIN_SPEED + (newWord.brightness - 0.3) * ((MAX_SPEED - MIN_SPEED) / (MAX_BRIGHTNESS - 0.3)); return newWord; }, [words, activeWords, getRandomY]); useEffect(() => { // Animation loop const animateWords = () => { setActiveWords(prevWords => { // Move existing words const movedWords = prevWords.map(word => ({ ...word, x: word.x - word.speed })).filter(word => word.x > -10); // Remove words that are off-screen // Add new words if needed while (movedWords.length < MAX_WORDS) { movedWords.push(createNewWord()); } return movedWords; }); }; // Set up interval for animation const intervalId = setInterval(animateWords, 50); // Cleanup interval on unmount return () => clearInterval(intervalId); }, [createNewWord, MAX_WORDS]); return (

{activeWords.map((word) => ( {word.text} ))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Parallax Japanese Words

`, { headers: { "content-type": "text/html" } }); }

parallaxWordsVal