[V0_FILE]typescriptreact:file="app/page.tsx" import QuantumTerminal from "@/components/quantum-terminal" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/quantum-terminal.tsx" "use client" import type React from "react" import { useEffect, useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Loader2, TerminalIcon, Zap } from "lucide-react" import MatrixRain from "./matrix-rain" import QuantumCircuit from "./quantum-circuit" const COMMANDS = { HELP: "help", CLEAR: "clear", MATRIX: "matrix", QUANTUM: "quantum", RUN: "run", EXIT: "exit", } const QUANTUM_STATES = ["|0⟩", "|1⟩", "|+⟩", "|-⟩", "|Ψ⟩", "1/√2(|00⟩ + |11⟩)"] export default function QuantumTerminal() { const [input, setInput] = useState("") const [history, setHistory] = useState([ "MATRIX QUANTUM TERMINAL v1.0", "Type 'help' for available commands.", "", ]) const [loading, setLoading] = useState(false) const [showRain, setShowRain] = useState(false) const [showCircuit, setShowCircuit] = useState(false) const terminalRef = useRef(null) const inputRef = useRef(null) const addToHistory = (text: string) => { setHistory((prev) => [...prev, text]) } const handleCommand = (cmd: string) => { addToHistory(`> ${cmd}`) const command = cmd.trim().toLowerCase() if (command === COMMANDS.HELP) { addToHistory("Available commands:") addToHistory(` ${COMMANDS.HELP} - Show this help message`) addToHistory(` ${COMMANDS.CLEAR} - Clear terminal`) addToHistory(` ${COMMANDS.MATRIX} - Toggle Matrix code rain`) addToHistory(` ${COMMANDS.QUANTUM} - Show quantum circuit`) addToHistory(` ${COMMANDS.RUN} - Run quantum simulation`) addToHistory(` ${COMMANDS.EXIT} - Exit terminal`) } else if (command === COMMANDS.CLEAR) { setHistory(["MATRIX QUANTUM TERMINAL v1.0", ""]) } else if (command === COMMANDS.MATRIX) { setShowRain(!showRain) addToHistory(`Matrix code rain ${!showRain ? "activated" : "deactivated"}`) } else if (command === COMMANDS.QUANTUM) { setShowCircuit(true) addToHistory("Quantum circuit initialized") } else if (command === COMMANDS.RUN) { runQuantumSimulation() } else if (command === COMMANDS.EXIT) { addToHistory("Cannot exit the Matrix. You are already too deep.") } else if (command) { addToHistory(`Command not recognized: ${cmd}`) } } const runQuantumSimulation = () => { setLoading(true) addToHistory("Initializing quantum simulation...") // Simulate quantum computation with delay setTimeout(() => { addToHistory("Preparing qubits...") }, 800) setTimeout(() => { addToHistory("Applying quantum gates...") }, 1600) setTimeout(() => { addToHistory("Entangling quantum states...") }, 2400) setTimeout(() => { const randomState = QUANTUM_STATES[Math.floor(Math.random() * QUANTUM_STATES.length)] addToHistory(`Quantum state collapsed to: ${randomState}`) addToHistory("Simulation complete.") setLoading(false) }, 3200) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (input.trim()) { handleCommand(input) setInput("") } } useEffect(() => { if (terminalRef.current) { terminalRef.current.scrollTop = terminalRef.current.scrollHeight } inputRef.current?.focus() }, [history]) return (

{showRain && }

MATRIX QUANTUM TERMINAL

{history.map((line, i) => (

{line}

))} {loading && (

Processing quantum data...

)} {showCircuit && (

)}

) } [V0_FILE]typescriptreact:file="components/matrix-rain.tsx" "use client" import { useEffect, useRef } from "react" export default function MatrixRain() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return canvas.width = window.innerWidth canvas.height = window.innerHeight const resizeCanvas = () => { if (canvas) { canvas.width = window.innerWidth canvas.height = window.innerHeight } } window.addEventListener("resize", resizeCanvas) const characters = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン" const fontSize = 14 const columns = Math.floor(canvas.width / fontSize) const drops: number[] = [] for (let i = 0; i < columns; i++) { drops[i] = Math.floor(Math.random() * -100) } const draw = () => { if (!ctx || !canvas) return ctx.fillStyle = "rgba(0, 0, 0, 0.05)" ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = "#0F0" ctx.font = `${fontSize}px monospace` for (let i = 0; i < drops.length; i++) { const text = characters.charAt(Math.floor(Math.random() * characters.length)) ctx.fillText(text, i * fontSize, drops[i] * fontSize) if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0 } drops[i]++ } } const interval = setInterval(draw, 33) return () => { clearInterval(interval) window.removeEventListener("resize", resizeCanvas) } }, []) return

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This