theonesky

/** @jsxImportSource https://esm.sh/react */ import { BskyAgent } from "https://esm.sh/@atproto/api"; import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function createTypewriterMachine() { const messages = ["The bsky has you...", "Follow the blue butterfly", "made with val.town"]; return { initialState: { value: "idle", context: { messages, currentMessageIndex: 0, typedText: "", letterDelay: 100, }, }, transition(state, event) { switch (state.value) { case "idle": if (event === "START") { return { value: "typingSentence", context: state.context, }; } return state; case "typingSentence": // Check if we need to type a letter or pause if (state.context.typedText.length < state.context.messages[state.context.currentMessageIndex].length) { return { value: "typingLetter", context: state.context, }; } else { return { value: "dramaticPause", context: state.context, }; } case "typingLetter": if (event === "TICK") { return { value: "typingSentence", context: { ...state.context, typedText: state.context.messages[state.context.currentMessageIndex].slice( 0, state.context.typedText.length + 1, ), letterDelay: 120 + Math.random() * 75, }, }; } return state; case "dramaticPause": // Check if we can move to next message or finish if (event === "NEXT") { if (state.context.currentMessageIndex < state.context.messages.length - 1) { return { value: "idle", context: { ...state.context, currentMessageIndex: state.context.currentMessageIndex + 1, typedText: "", }, }; } else { return { value: "finished", context: state.context, }; } } return state; case "finished": return state; default: return state; } }, }; } function MatrixBlueskyStream() { const [posts, setPosts] = useState([]); const canvasRef = useRef(null); const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight, }); const typewriterMachine = useRef(createTypewriterMachine()); // State to manage machine state const [machineState, setMachineState] = useState(typewriterMachine.current.initialState); // Wrapper function to update state const updateMachineState = useCallback((event) => { const newState = typewriterMachine.current.transition(machineState, event); setMachineState(newState); }, [machineState]); // Start the typewriter on component mount useEffect(() => { updateMachineState("START"); }, [updateMachineState]); // Periodic state update to simulate typing and pauses useEffect(() => { let timerId: number; if (machineState.value === "typingLetter") { timerId = setTimeout(() => { updateMachineState("TICK"); }, machineState.context.letterDelay); } else if (machineState.value === "dramaticPause") { timerId = setTimeout(() => { updateMachineState("NEXT"); }, machineState.context.currentMessageIndex < machineState.context.messages.length - 1 ? 2000 : 500); } return () => { if (timerId) clearTimeout(timerId); }; }, [machineState, updateMachineState]); useEffect(() => { const agent = new BskyAgent({ service: "https://bsky.social" }); async function streamPosts() { try { await agent.login({ identifier: "firehose.bsky.social", password: "public", }); const stream = await agent.com.atproto.sync.subscribeRepos({ onEvent: (event) => { if (event.type === "commit") { const newPost = { text: event.ops.map(op => op.payload?.text).filter(Boolean)[0], time: Date.now(), }; setPosts(prev => [newPost, ...prev].slice(0, 50)); } }, }); } catch (error) { console.error("Streaming error:", error); } } streamPosts(); }, []); useEffect(() => { const handleResize = () => { setDimensions({ width: window.innerWidth, height: window.innerHeight, }); }; window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); // Use device pixel ratio for crisp rendering const dpr = window.devicePixelRatio || 1; // Set actual pixel dimensions canvas.width = dimensions.width * dpr; canvas.height = dimensions.height * dpr; // Scale canvas back to CSS pixels canvas.style.width = `${dimensions.width}px`; canvas.style.height = `${dimensions.height}px`; // Scale drawing context ctx.scale(dpr, dpr); const characters = "田由甲申甴电便未末术白百皆年而已巳巴巵工弋"; const fontSize = 10; // Safely calculate columns with a maximum limit const columns = Math.min(Math.floor(dimensions.width / fontSize), 500); // Enhanced drops array with more properties for randomness const drops = Array.from({ length: columns }, (_, index) => ({ y: Math.random() * dimensions.height, // Random starting position speed: 1 + Math.random() * 3, // Varied fall speed drift: (Math.random() - 0.5) * 2, // Horizontal drift resetProbability: 0.975 + (Math.random() * 0.02), // Slightly varied reset chance lastRenderTime: Date.now(), })); function draw() { try { ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, dimensions.width, dimensions.height); ctx.fillStyle = "#0F0"; ctx.font = `${fontSize}px monospace`; const now = Date.now(); for (let i = 0; i < drops.length; i++) { // Probabilistic character rendering if (Math.random() > 0.7) { const text = characters.charAt(Math.floor(Math.random() * characters.length)); // Calculate time-based movement const timeDelta = (now - drops[i].lastRenderTime) / 16; // normalize to ~60fps drops[i].y += drops[i].speed * timeDelta; // Add slight horizontal drift const x = (i + drops[i].drift) * fontSize; ctx.fillText(text, x, drops[i].y); // Reset condition with varied probability if (drops[i].y * fontSize > dimensions.height && Math.random() > drops[i].resetProbability) { drops[i].y = 0; drops[i].speed = 1 + Math.random() * 3; drops[i].drift = (Math.random() - 0.5) * 2; } drops[i].lastRenderTime = now; } } } catch (error) { console.error("Canvas drawing error:", error); } } const animationFrame = setInterval(draw, 33); // Cleanup function return () => { clearInterval(animationFrame); }; }, [dimensions]); // Extract typed text from the machine state const { typedText, currentMessageIndex } = machineState.context; const isFinished = machineState.value === "finished"; const isTyping = ["typingSentence", "typingLetter"].includes(machineState.value); return (

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

`, { headers: { "Content-Type": "text/html" }, }, ); }

theOneSky

Version 1