[V0_FILE]typescriptreact:file="components/contribution-graph.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { useEffect, useState } from "react" type Dot = { intensity: number hue: number colorPhase: number } export function ContributionGraph() { const columns = 25 const rows = 5 const [dots, setDots] = useState([]) // const controls = useAnimation() useEffect(() => { const newDots = Array.from({ length: columns }, () => Array.from({ length: rows }, () => ({ intensity: Math.random(), hue: Math.random() > 0.5 ? 180 : 300, colorPhase: Math.random() * Math.PI * 2, // Random starting phase })), ) setDots(newDots) const interval = setInterval(() => { setDots((prevDots) => prevDots.map((column) => column.map((dot) => { const phase = (dot.colorPhase + 0.1) % (Math.PI * 2) const sinValue = Math.sin(phase) // Transition between colors based on phase let newHue if (sinValue < -0.33) { newHue = 0 // Black phase } else if (sinValue < 0.33) { newHue = 180 // Cyan phase } else { newHue = 300 // Magenta phase } return { ...dot, colorPhase: phase, hue: newHue, intensity: 0.3 + Math.abs(sinValue) * 0.5, } }), ), ) }, 100) return () => clearInterval(interval) }, []) return (

{dots.map((column, columnIndex) => (

{column.map((dot, rowIndex) => (

))}

) } [V0_FILE]typescriptreact:file="components/data-stream.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" type OrderEntry = { id: number product: string quantity: number price: number timestamp: string } const products = [ "Cybernetic Implant", "Holo-Display", "Quantum Processor", "Neural Interface", "Plasma Rifle", "Stealth Suit", "Nano-Med Kit", "Gravity Boots", "AI Companion", "Time Dilation Device", ] interface DataStreamProps { setTotalRevenue: React.Dispatch> setTotalOrders: React.Dispatch> } export function DataStream({ setTotalRevenue, setTotalOrders }: DataStreamProps) { const [orders, setOrders] = useState([]) useEffect(() => { // Set initial total revenue setTotalRevenue(1540394) setTotalOrders(0) // Initialize total orders const interval = setInterval(() => { const newOrder = { id: Date.now(), product: products[Math.floor(Math.random() * products.length)], quantity: Math.floor(Math.random() * 5) + 1, price: Math.floor(Math.random() * 1000) + 100, timestamp: new Date().toISOString(), } setOrders((prev) => [newOrder, ...prev].slice(0, 30)) setTotalRevenue((prev) => prev + newOrder.price * newOrder.quantity) setTotalOrders((prev) => prev + 1) }, 1000) return () => clearInterval(interval) }, [setTotalRevenue, setTotalOrders]) return (

Recent Orders

{orders.map((order) => ( {order.product} {" x"} {order.quantity} {" - $"} {(order.price * order.quantity).toLocaleString()} ))}

) } [V0_FILE]typescriptreact:file="components/metric-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { motion, useMotionValue, useTransform, animate } from "framer-motion" import { useEffect } from "react" interface MetricCardProps { title: string value: string | number } export function MetricCard({ title, value }: MetricCardProps) { const count = useMotionValue(0) const rounded = useTransform(count, (latest) => Math.round(latest)) useEffect(() => { const numericValue = typeof value === "string" ? Number.parseFloat(value.replace(/[^0-9.-]+/g, "")) : value const animation = animate(count, numericValue, { duration: 1 }) return animation.stop }, [value, count]) return (

{title}

{title === "Total Revenue" ? "$" : ""} {typeof value === "number" ? value.toLocaleString() : typeof value === "string" ? value : rounded.get().toLocaleString()} ) } [V0_FILE]typescriptreact:file="components/activity-graph.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" interface Bar { x: number y: number width: number height: number speed: number intensity: number hue: number targetIntensity: number thickness: number } export function ActivityGraph() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d", { alpha: false }) if (!ctx) return canvas.width = canvas.offsetWidth * 2 canvas.height = canvas.offsetHeight * 2 ctx.scale(2, 2) const columns = 12 const barsPerColumn = 40 const columnWidth = canvas.width / columns const baseBarWidth = columnWidth * 0.4 let bars: Bar[][] = Array(columns) .fill(null) .map((_, colIndex) => { return Array(barsPerColumn) .fill(null) .map(() => { const isThick = Math.random() > 0.7 const thickness = isThick ? 4 + Math.random() * 4 : 1 + Math.random() * 2 return { x: colIndex * columnWidth + (columnWidth - baseBarWidth) / 2, y: canvas.height * Math.random(), width: baseBarWidth, height: thickness, speed: 0.5 + Math.random() * 1.5, intensity: Math.random() > 0.7 ? 0.8 : 0.3, targetIntensity: Math.random() > 0.7 ? 0.8 : 0.3, thickness, hue: Math.random() > 0.5 ? 180 : 300, // Cyan or Magenta } }) }) const drawBar = (bar: Bar, alpha: number, blurSize: number, scale = 1) => { ctx.save() ctx.shadowBlur = blurSize ctx.shadowColor = `hsla(${bar.hue}, 100%, 50%, ${alpha})` const gradient = ctx.createLinearGradient(bar.x - blurSize, bar.y, bar.x + bar.width + blurSize, bar.y) gradient.addColorStop(0, `hsla(${bar.hue}, 100%, 50%, 0)`) gradient.addColorStop(0.4, `hsla(${bar.hue}, 100%, 50%, ${alpha})`) gradient.addColorStop(0.5, `hsla(${bar.hue}, 100%, 80%, ${alpha})`) gradient.addColorStop(0.6, `hsla(${bar.hue}, 100%, 50%, ${alpha})`) gradient.addColorStop(1, `hsla(${bar.hue}, 100%, 50%, 0)`) ctx.fillStyle = gradient const scaledWidth = bar.width * scale const scaledX = bar.x + (bar.width - scaledWidth) / 2 ctx.fillRect(scaledX - blurSize, bar.y, scaledWidth + blurSize * 2, bar.thickness) ctx.restore() } const animate = () => { ctx.fillStyle = "#0a0a1f" ctx.fillRect(0, 0, canvas.width, canvas.height) bars = bars.map((column) => { return column.map((bar) => { bar.y -= bar.speed if (bar.y < -bar.height) { bar.y = canvas.height + Math.random() * 20 bar.thickness = Math.random() > 0.7 ? 4 + Math.random() * 4 : 1 + Math.random() * 2 bar.targetIntensity = Math.random() > 0.7 ? 0.8 + Math.random() * 0.2 : 0.1 + Math.random() * 0.3 bar.hue = Math.random() > 0.5 ? 180 : 300 // Cyan or Magenta } bar.intensity += (bar.targetIntensity - bar.intensity) * 0.2 // Outermost soft glow if (bar.intensity > 0.5) { drawBar(bar, 0.05, 40, 2.5) } // Outer glow if (bar.intensity > 0.4) { drawBar(bar, 0.1, 30, 2) } // Middle glow if (bar.intensity > 0.3) { drawBar(bar, 0.2, 20, 1.5) } // Inner glow drawBar(bar, 0.4, 15, 1.2) // Core drawBar(bar, bar.intensity, 10) return bar }) }) requestAnimationFrame(animate) } animate() return () => { // Cleanup if needed } }, []) return (

) } [V0_FILE]typescriptreact:file="dashboard.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { motion, useAnimation } from "framer-motion" import { useEffect, useState } from "react" import { Card } from "@/components/ui/card" import { ActivityGraph } from "./components/activity-graph" import { ContributionGraph } from "./components/contribution-graph" import { DataStream } from "./components/data-stream" import { MetricCard } from "./components/metric-card" import Image from "next/image" const headshots = [ "https://i.pravatar.cc/100?img=1", "https://i.pravatar.cc/100?img=70", ...Array.from({ length: 28 }, (_, i) => `https://i.pravatar.cc/100?img=${i + 3}`), ] export default function Dashboard() { const controls = Array.from({ length: headshots.length }, () => useAnimation()) const [users, setUsers] = useState( headshots.map((image, i) => ({ id: i, image, control: controls[i], })), ) const [totalRevenue, setTotalRevenue] = useState(1540394) const [totalOrders, setTotalOrders] = useState(19543) const [activeSessions, setActiveSessions] = useState(533938) useEffect(() => { // Initial appearance animation for avatars users.forEach((user) => { user.control.start({ scale: [0, 1], opacity: [0, 1], transition: { type: "spring", stiffness: 260, damping: 20, delay: users.indexOf(user) * 0.05, }, }) }) // Random pulsing animation for avatars const avatarInterval = setInterval(() => { const randomUser = users[Math.floor(Math.random() * users.length)] randomUser.control.start({ scale: [1, 1.2, 1], opacity: [1, 0.7, 1], transition: { duration: 0.5 }, }) }, 1000) // Dynamic counter updates - REMOVED counterInterval // const counterInterval = setInterval(() => { // //setTotalRevenue((prev) => prev + Math.floor(Math.random() * 100)) // setTotalOrders((prev) => prev + Math.floor(Math.random() * 5)) // setActiveSessions((prev) => prev + Math.floor(Math.random() * 10)) // }, 2000) return () => { clearInterval(avatarInterval) //clearInterval(counterInterval) } }, [users]) return (

{/* Retro grid background */}

{/* Top metrics */}

{/* Main visualization area */}

{/* Bottom section */}

Active Sessions

{activeSessions.toLocaleString()}

Users with Items in Cart

{users.map((user) => ( {`User

))}

) }

About

Tags

Share

About

Tags

Share

More from christianelton

More Templates Like This

About

Tags

Share

About

Tags

Share

More from christianelton

More Templates Like This