[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { TimeTravel } from "@/components/time-travel-portal" export default function Home() { return } [V0_FILE]png:file="public/placeholder-m4u8s.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/images/circuit-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/futuristic-city-flying-cars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/futuristic-city-flying-cars-T1HEwZUoKl1D5NsBnVjZoy3kpuZDf6.png" isMerged="true" [V0_FILE]png:file="public/modern-city-skyline.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-city-skyline-nzqztnU0laByIlpuBFtEnCMRB3Q22E.png" isMerged="true" [V0_FILE]png:file="public/placeholder-0z4uv.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-eb31n.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]typescriptreact:file="components/time-travel-portal.tsx" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" const TIME_PERIODS = [ { id: "future", name: "2150", color: "cyan", image: "/images/future-city.png", description: "futuristic city with flying vehicles and tall skyscrapers", }, { id: "present", name: "2025", color: "blue", image: "/images/present-city.png", description: "modern city skyline with contemporary architecture", }, { id: "past", name: "1985", color: "purple", image: "/images/retro-city.png", description: "1980s city street with vintage cars and neon signs", }, { id: "ancient", name: "300 BCE", color: "amber", image: "/images/ancient-city.png", description: "ancient greek or roman city with columns and temples", }, ] export function TimeTravel() { const [active, setActive] = useState(false) const [destination, setDestination] = useState(TIME_PERIODS[0].id) const [stability, setStability] = useState(100) const [anomaly, setAnomaly] = useState(false) const [arriving, setArriving] = useState(false) const canvasRef = useRef(null) const timerRef = useRef(null) const selectedPeriod = TIME_PERIODS.find((period) => period.id === destination) || TIME_PERIODS[0] // Handle keyboard controls useEffect(() => { const handleKeyPress = (e: KeyboardEvent) => { if (e.key === "t" || e.key === "T") { activatePortal() } } window.addEventListener("keydown", handleKeyPress) return () => window.removeEventListener("keydown", handleKeyPress) }, [destination]) // Portal activation function with auto-stop const activatePortal = () => { // Don't restart if already active if (active) return // Clear any existing timer if (timerRef.current) { clearTimeout(timerRef.current) } // Activate portal setActive(true) setArriving(false) // Set timer to deactivate after 3 seconds timerRef.current = setTimeout(() => { // Trigger arrival animation setArriving(true) // Then deactivate after animation completes setTimeout(() => { setActive(false) setArriving(false) timerRef.current = null }, 500) }, 3000) } // Clean up timer on unmount useEffect(() => { return () => { if (timerRef.current) { clearTimeout(timerRef.current) } } }, []) // Portal stability and anomaly effects useEffect(() => { if (!active) { setStability(100) setAnomaly(false) return } // Random stability fluctuations const stabilityInterval = setInterval(() => { setStability((prev) => { const fluctuation = Math.random() * 10 - 5 const newValue = Math.max(60, Math.min(100, prev + fluctuation)) // Trigger anomaly at low stability if (newValue < 75 && Math.random() > 0.7) { setAnomaly(true) setTimeout(() => setAnomaly(false), 500) } return newValue }) }, 1000) return () => clearInterval(stabilityInterval) }, [active]) // Canvas animation effect useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationId: number let particles: Particle[] = [] canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight class Particle { x: number y: number size: number velocity: number centerX: number centerY: number angle: number distance: number color: string constructor() { this.centerX = canvas.width / 2 this.centerY = canvas.height / 2 this.angle = Math.random() * Math.PI * 2 this.distance = Math.random() * Math.min(canvas.width, canvas.height) * 0.4 this.x = this.centerX + Math.cos(this.angle) * this.distance this.y = this.centerY + Math.sin(this.angle) * this.distance this.size = Math.random() * 2 + 1 this.velocity = Math.random() * 1.5 + 0.5 // Set color based on destination switch (destination) { case "future": this.color = "rgba(6, 182, 212, 0.7)" break case "past": this.color = "rgba(168, 85, 247, 0.7)" break case "ancient": this.color = "rgba(245, 158, 11, 0.7)" break default: this.color = "rgba(59, 130, 246, 0.7)" } } update() { // Calculate direction to center const dx = this.centerX - this.x const dy = this.centerY - this.y const distance = Math.sqrt(dx * dx + dy * dy) if (active) { // Move toward center when active this.x += (dx / distance) * this.velocity this.y += (dy / distance) * this.velocity } else { // Move away from center when inactive this.x -= (dx / distance) * this.velocity * 0.3 this.y -= (dy / distance) * this.velocity * 0.3 } // Regenerate particles that get too close to center or too far if (active && distance < 10) { this.resetPosition(true) } else if (!active && distance > Math.min(canvas.width, canvas.height) * 0.5) { this.resetPosition(false) } } resetPosition(outward: boolean) { this.angle = Math.random() * Math.PI * 2 if (outward) { // Reset to outer edge this.distance = Math.min(canvas.width, canvas.height) * 0.4 } else { // Reset closer to center this.distance = Math.random() * 50 + 10 } this.x = this.centerX + Math.cos(this.angle) * this.distance this.y = this.centerY + Math.sin(this.angle) * this.distance } draw() { ctx.fillStyle = this.color ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.fill() } } // Initialize particles const initParticles = () => { particles = [] for (let i = 0; i < 100; i++) { particles.push(new Particle()) } } const animate = () => { ctx.fillStyle = "rgba(0, 0, 0, 0.1)" ctx.fillRect(0, 0, canvas.width, canvas.height) for (let i = 0; i < particles.length; i++) { particles[i].update() particles[i].draw() } animationId = requestAnimationFrame(animate) } const handleResize = () => { canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight initParticles() } window.addEventListener("resize", handleResize) initParticles() animate() return () => { window.removeEventListener("resize", handleResize) cancelAnimationFrame(animationId) } }, [active, destination]) // Get color class based on selected period const getColorClass = (type: string) => { switch (selectedPeriod.color) { case "cyan": return type === "bg" ? "bg-cyan-500" : type === "text" ? "text-cyan-400" : "border-cyan-500" case "purple": return type === "bg" ? "bg-purple-500" : type === "text" ? "text-purple-400" : "border-purple-500" case "amber": return type === "bg" ? "bg-amber-500" : type === "text" ? "text-amber-400" : "border-amber-500" default: return type === "bg" ? "bg-blue-500" : type === "text" ? "text-blue-400" : "border-blue-500" } } return (

{/* Centered time display */} {selectedPeriod.name} {/* Portal stability meter */} {active && (

80 ? "bg-green-500" : stability > 60 ? "bg-yellow-500" : "bg-red-500"}`} style={{ width: `${stability}%` }} animate={{ width: `${stability}%` }} transition={{ duration: 0.5 }} />

)}

About

Tags

Share

About

Tags

Share

More from pysushi

More Templates Like This

About

Tags

Share

About

Tags

Share

More from pysushi

More Templates Like This