the way that it works is that they have the image of the ticket and then on top of that they're stacking one two three four different layers each with their own mixed blend mode and their own opacity so they have the holographic as just black and white then they've got a two different gradients and then finally they have this little shine that sort of follows your cursor around and when they're stacked on top of each other i wrote a little bit of code to sort of follow your mouse around and it detects how far mouse over what percentage you are of the ticket so on bottom right hand corner you're 100 x and y top left hand corner you're zero percent x and y and you can just use that in a css calc to transform the x and y throw a perspective on there and you get this sort of neat effect, create it with nextjs and tailwind css
Interactive Holographic Ticket Effect
I'll create a holographic ticket effect that follows your mouse cursor with layered elements, blend modes, and perspective transforms using Next.js and Tailwind CSS.
How It Works
I've created a holographic ticket effect that matches your description with multiple layered elements:
- Base Layer: The ticket image serves as the foundation
- Holographic Patterns: Black and white patterns with overlay blend mode
- Gradient Layers: Two different gradients (rainbow and metallic) with different blend modes
- Shine Effect: A radial gradient that follows your cursor
Key Technical Features
- Mouse Tracking: Calculates mouse position as percentages (0-100%) across the ticket
- 3D Perspective: Uses CSS
perspectiveandtransformwithrotateXandrotateYbased on mouse position - Blend Modes: Uses
mix-blend-overlayandmix-blend-soft-lightfor realistic layer blending - Animations: Includes gradient animations for additional visual interest
Implementation Details
- The component tracks mouse position relative to the ticket container
- It calculates rotation angles based on mouse position percentages
- The shine effect's position is directly tied to cursor coordinates
- Multiple layers are stacked with different blend modes and opacities
- CSS animations are used for the gradient effects
You can customize the effect by adjusting the opacity values, blend modes, or adding additional layers.
Exact Holographic Ticket Recreation
I'll recreate the exact ticket design with the non-hover and hover states as shown in your images.
How It Works
I've created an exact recreation of the ticket design with the specific hover effect you showed:
Non-Hover State
- Clean ticket design with the Toronto skyline on the left
- "REMIX JAM TORONTO '25" text and event details in the center
- Barcode and "ALL DAY PASS LTD. ACCESS" on the right
- Rainbow gradient bar on the right side
Hover State
- Holographic patterns appear (dot pattern, R logo, and globe design)
- "OCT 10" and "20 25" text appears in the corners
- Rainbow and metallic gradient overlays add dimension
- A shine effect follows your cursor for an interactive feel
Technical Implementation
State Management:
- Tracks mouse position and hover state
- Only shows holographic elements when hovering
3D Effect:
- Uses CSS perspective and transform for the 3D tilt effect
- Rotation angles are calculated based on cursor position
Layering System:
- Multiple layers with different blend modes (mix-blend-overlay, mix-blend-soft-light)
- SVG patterns for the dot pattern, R logo, and globe design
Cursor Tracking:
- Shine effect follows the cursor position
- Position is calculated as percentages across the ticket
I've also included an optimized version that simply swaps between the two images you provided, which might be more performant if you prefer that approach.
very close, here is the html from inspect <div class="group z-10 w-[300px] select-none md:w-[800px]" style="perspective:1500px"><div class="relative isolate z-10 overflow-hidden rounded-xl border border-white/20 transition-transform duration-200 ease-out" style="transform-style: preserve-3d; transform: rotateY(2.23125deg) rotateX(0.986277deg) scale(1.05);"><div class="absolute inset-0 z-10 opacity-0 mix-blend-color-dodge transition-opacity duration-300 ease-in-out group-hover:opacity-50"><div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image:url(/assets/ticket-holographic-DklhCYfT.avif)"></div><div class="absolute inset-0 left-1/2 top-1/2 h-[160%] w-[160%] -translate-x-1/2 -translate-y-1/2 opacity-20 mix-blend-hue" style="background:linear-gradient(135deg, rgb(255, 119, 115) 2%, rgb(255, 237, 95) 12.9661%, rgb(168, 255, 95) 23.5922%, rgb(131, 255, 247) 39.1029%, rgb(119, 221, 223) 48.545%, rgb(120, 148, 255) 59.1618%, rgb(209, 124, 242) 62.9954%, rgb(255, 119, 115) 76.7431%)"></div><div class="absolute inset-0 left-1/2 top-1/2 h-[160%] w-[160%] -translate-x-1/2 -translate-y-1/2 opacity-50 mix-blend-plus-lighter" style="background:linear-gradient(315deg, rgb(19, 20, 21) 0%, rgb(143, 163, 163) 6.03181%, rgb(162, 163, 163) 9.74451%, rgb(20, 20, 20) 25.0721%, rgb(143, 163, 163) 33.5357%, rgb(164, 166, 166) 35.2988%, rgb(37, 37, 38) 41.503%, rgb(161, 161, 161) 52.393%, rgb(124, 125, 125) 61.1346%, rgb(19, 20, 21) 66.269%, rgb(166, 166, 166) 74.4633%, rgb(163, 163, 163) 79.8987%, rgb(19, 20, 21) 85.7299%, rgb(161, 161, 161) 89.8948%, rgb(19, 20, 21) 100%)"></div><div class="absolute inset-0 mix-blend-overlay blur-xl" style="background: radial-gradient(50% 50% at 50% 50%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.5) 43.6638%, rgba(255, 255, 255, 0.11) 80.5409%, rgba(255, 255, 255, 0) 100%); transform: translate(119px, -18.4727px);"></div></div><div class="contrast-[1.05]"><img src="/assets/general-CFnhvhhh.avif" width="800" height="280" alt="Remix Jam 2025 Event Ticket" class="relative w-full"></div><div class="absolute bottom-0 left-[35%] z-40 pb-1 pl-2 text-left font-conf-mono text-[8px] text-white md:pb-4 md:pl-6 md:text-base"><div class="flex flex-col gap-0 uppercase md:gap-2"><p>october 10 2025</p><div><p>your name</p><p>your company</p></div><p class="uppercase text-[#36d3ff]">Early Bird</p></div></div></div></div>