[V0_FILE]typescriptreact:file="components/optimized-holographic-ticket.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useState } from "react" import Image from "next/image" export default function OptimizedHolographicTicket() { const containerRef = useRef(null) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [isHovering, setIsHovering] = useState(false) const handleMouseMove = (e: React.MouseEvent) => { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect() // Calculate mouse position as percentage (0-100) const x = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100)) const y = Math.max(0, Math.min(100, ((e.clientY - rect.top) / rect.height) * 100)) setMousePosition({ x, y }) } } // Calculate transforms based on mouse position const rotateY = isHovering ? (mousePosition.x - 50) / 15 : 0 const rotateX = isHovering ? (50 - mousePosition.y) / 15 : 0 // Calculate shine position const shineX = mousePosition.x const shineY = mousePosition.y return (

setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} style={{ perspective: "1000px", }} >

{/* Base ticket - using the actual image */}

{/* Shine effect that follows cursor - only visible on hover */} {isHovering && (

)}

) } [V0_FILE]typescriptreact:file="app/alternative/page.tsx" isMerged="true" import OptimizedHolographicTicket from "@/components/optimized-holographic-ticket" export default function AlternativePage() { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import HolographicTicket from "@/components/holographic-ticket" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/holographic-ticket.tsx" isEdit="true" "use client" import type React from "react" import { useRef, useState } from "react" import Image from "next/image" export default function HolographicTicket() { const containerRef = useRef(null) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const handleMouseMove = (e: React.MouseEvent) => { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect() // Calculate mouse position relative to the container const x = e.clientX - rect.left const y = e.clientY - rect.top // Calculate percentage across the container (0-100%) const percentX = (x / rect.width) * 100 const percentY = (y / rect.height) * 100 setMousePosition({ x: percentX, y: percentY }) } } // Calculate rotation based on mouse position // Center is 50%, so we subtract 50 to get a range of -50 to 50, then scale down const rotateY = ((mousePosition.x - 50) / 50) * 5 // Max ±5 degrees const rotateX = ((50 - mousePosition.y) / 50) * 2 // Max ±2 degrees // Calculate shine position for the radial gradient const shineX = mousePosition.x const shineY = mousePosition.y return (

{/* Holographic effect layers - hidden by default, shown on hover */}

{/* Holographic pattern background */}

{/* Rainbow gradient layer */}

{/* Metallic gradient layer */}

{/* Shine effect that follows cursor */}

{/* Base ticket image */}

{/* Text overlay */}

october 10 2025

your name

your company

Early Bird

) } [V0_FILE]typescriptreact:file="components/enhanced-holographic-ticket.tsx" isEdit="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" import Image from "next/image" export default function EnhancedHolographicTicket() { const containerRef = useRef(null) const shineRef = useRef(null) const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 }) const handleMouseMove = (e: React.MouseEvent) => { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect() // Calculate mouse position relative to the container const x = e.clientX - rect.left const y = e.clientY - rect.top setMousePosition({ x, y }) } } useEffect(() => { if (shineRef.current && containerRef.current) { const rect = containerRef.current.getBoundingClientRect() // Calculate rotation based on mouse position // Center is 50%, so we subtract 50 to get a range of -50 to 50, then scale down const percentX = (mousePosition.x / rect.width) * 100 const percentY = (mousePosition.y / rect.height) * 100 const rotateY = ((percentX - 50) / 50) * 5 // Max ±5 degrees const rotateX = ((50 - percentY) / 50) * 2 // Max ±2 degrees // Apply rotation to the card const card = containerRef.current.querySelector("div") if (card) { card.style.transform = `rotateY(${rotateY}deg) rotateX(${rotateX}deg) scale(1.05)` } // Move the shine effect shineRef.current.style.transform = `translate(${mousePosition.x}px, ${mousePosition.y - 50}px)` } }, [mousePosition]) return (

{/* Holographic effect layers - hidden by default, shown on hover */}

{/* Holographic pattern background */}

{/* Rainbow gradient layer */}

{/* Metallic gradient layer */}

{/* Shine effect that follows cursor */}

{/* Base ticket image */}

{/* Text overlay */}

october 10 2025

your name

your company

Early Bird

) } [V0_FILE]typescriptreact:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Add support for mix-blend-plus-lighter which might not be in Tailwind by default */ .mix-blend-plus-lighter { mix-blend-mode: plus-lighter; } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config