[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export default function RunSearchEngine() { const [searchValue, setSearchValue] = useState("") const [position, setPosition] = useState({ x: 0, y: 0 }) const [isSpinning, setIsSpinning] = useState(false) const [isInitialized, setIsInitialized] = useState(false) const searchContainerRef = useRef(null) const inputRef = useRef(null) const typingTimeoutRef = useRef(null) // Initialize position to center once component mounts useEffect(() => { if (typeof window !== "undefined" && !isInitialized) { setPosition({ x: window.innerWidth / 2 - 200, y: window.innerHeight / 3, }) setIsInitialized(true) } }, [isInitialized]) // Handle window resize useEffect(() => { const handleResize = () => { if (searchContainerRef.current) { const containerWidth = searchContainerRef.current.offsetWidth const maxX = window.innerWidth - containerWidth - 20 const maxY = window.innerHeight - 100 setPosition((prev) => ({ x: Math.min(prev.x, maxX), y: Math.min(prev.y, maxY), })) } } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) // Move to random position when typing const handleKeyDown = (e: React.KeyboardEvent) => { // Don't move on Enter key if (e.key === "Enter") { e.preventDefault() setIsSpinning(true) // Reset spinning after animation completes setTimeout(() => { setIsSpinning(false) }, 1000) return } // Clear previous timeout if (typingTimeoutRef.current) { clearTimeout(typingTimeoutRef.current) } // Move to random position moveToRandomPosition() // Set timeout to detect when user stops typing typingTimeoutRef.current = setTimeout(() => { // User stopped typing }, 1000) } const moveToRandomPosition = () => { if (searchContainerRef.current) { const containerWidth = searchContainerRef.current.offsetWidth const containerHeight = searchContainerRef.current.offsetHeight // Calculate safe boundaries const maxX = window.innerWidth - containerWidth - 20 const maxY = window.innerHeight - containerHeight - 20 // Generate random position within viewport const randomX = Math.max(20, Math.floor(Math.random() * maxX)) const randomY = Math.max(20, Math.floor(Math.random() * maxY)) setPosition({ x: randomX, y: randomY }) } } const handleChange = (e: React.ChangeEvent) => { setSearchValue(e.target.value) } return (

RUN

The search engine that runs away from you

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Run - The Search Engine That Runs Away", description: "A playful search engine that runs away when you type", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }

About

About