[V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.08 0 0); --foreground: oklch(0.75 0.15 145); --card: oklch(0.12 0 0); --card-foreground: oklch(0.75 0.15 145); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.75 0.15 145); --primary: oklch(0.75 0.15 145); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.15 0 0); --secondary-foreground: oklch(0.75 0.15 145); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.45 0.1 145); --accent: oklch(0.65 0.18 145); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.25 0.08 145); --input: oklch(0.15 0 0); --ring: oklch(0.75 0.15 145); --chart-1: oklch(0.75 0.15 145); --chart-2: oklch(0.65 0.18 145); --chart-3: oklch(0.55 0.12 145); --chart-4: oklch(0.45 0.1 145); --chart-5: oklch(0.35 0.08 145); --radius: 0.25rem; --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.75 0.15 145); --sidebar-primary: oklch(0.75 0.15 145); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(0.75 0.15 145); --sidebar-border: oklch(0.25 0.08 145); --sidebar-ring: oklch(0.75 0.15 145); } .dark { --background: oklch(0.08 0 0); --foreground: oklch(0.75 0.15 145); --card: oklch(0.12 0 0); --card-foreground: oklch(0.75 0.15 145); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.75 0.15 145); --primary: oklch(0.75 0.15 145); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.15 0 0); --secondary-foreground: oklch(0.75 0.15 145); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.45 0.1 145); --accent: oklch(0.65 0.18 145); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.25 0.08 145); --input: oklch(0.15 0 0); --ring: oklch(0.75 0.15 145); --chart-1: oklch(0.75 0.15 145); --chart-2: oklch(0.65 0.18 145); --chart-3: oklch(0.55 0.12 145); --chart-4: oklch(0.45 0.1 145); --chart-5: oklch(0.35 0.08 145); --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.75 0.15 145); --sidebar-primary: oklch(0.75 0.15 145); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(0.75 0.15 145); --sidebar-border: oklch(0.25 0.08 145); --sidebar-ring: oklch(0.75 0.15 145); } @theme inline { --font-sans: "Geist Mono", "Geist Mono Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } @keyframes matrix-fall { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } .matrix-char { animation: matrix-fall linear infinite; } @keyframes glow-pulse { 0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 65, 0.8), 0 0 20px rgba(0, 255, 65, 0.5); } 50% { text-shadow: 0 0 20px rgba(0, 255, 65, 1), 0 0 30px rgba(0, 255, 65, 0.8); } } .glow-text { animation: glow-pulse 2s ease-in-out infinite; } @keyframes scan-line { 0% { top: 0; } 100% { top: 100%; } } .scan-line { animation: scan-line 8s linear infinite; } [V0_FILE]typescriptreact:file="app/page.tsx" import MatrixRain from "@/components/matrix-rain" import ConsolePanel from "@/components/console-panel" export default function Home() { const panels = [ { title: "WECHAT", description: "SECURE CHANNEL", url: "https://fastly.jsdelivr.net/gh/bucketio/img9@main/2025/03/03/1741006399641-4ff4fa1c-4c2d-44ba-827a-26bf3e5bb3f9.png", icon: "💬", }, { title: "BLOG", description: "DATA STREAM", url: "https://dqxf1izhlm.feishu.cn/wiki/J4PCwCBmEipifUkxglQcu40qnhg", icon: "📝", }, { title: "1NBOX", description: "MESSAGE VAULT", url: "https://dqxf1izhlm.feishu.cn/wiki/SHXUwGYeQiuStdkOTjucuzifnRe", icon: "📬", }, { title: "REDNOTE", description: "ENCRYPTED NOTES", url: "https://cutt.ly/zrdVvl5k", icon: "📕", }, { title: "TWITTER", description: "BROADCAST FEED", url: "https://x.com/Jackywine", icon: "🐦", }, ] return (

JACKYWINE

{">"} SYSTEM ACCESS GRANTED

{panels.map((panel, index) => ( ))}

{"["} STATUS: ONLINE {"]"} {"["} UPTIME: 99.9% {"]"}

) } [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 // Set canvas size const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resizeCanvas() window.addEventListener("resize", resizeCanvas) // Matrix rain configuration const text = "JACKYWINE" const fontSize = 16 const columns = Math.floor(canvas.width / fontSize) const drops: number[] = Array(columns).fill(1) // Animation function const draw = () => { // Semi-transparent black to create fade effect ctx.fillStyle = "rgba(0, 0, 0, 0.05)" ctx.fillRect(0, 0, canvas.width, canvas.height) // Green text ctx.fillStyle = "#00ff41" ctx.font = `${fontSize}px monospace` for (let i = 0; i < drops.length; i++) { // Random character from JACKYWINE const char = text[Math.floor(Math.random() * text.length)] const x = i * fontSize const y = drops[i] * fontSize ctx.fillText(char, x, y) // Reset drop to top randomly if (y > canvas.height && Math.random() > 0.975) { drops[i] = 0 } drops[i]++ } } const interval = setInterval(draw, 33) return () => { clearInterval(interval) window.removeEventListener("resize", resizeCanvas) } }, []) return

JACKYWINE

{title}

About

Tags

Share

About

Tags

Share

More from jackywine

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jackywine

More Templates Like This