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
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.
I've created a holographic ticket effect that matches your description with multiple layered elements:
perspective and transform with rotateX and rotateY based on mouse positionmix-blend-overlay and mix-blend-soft-light for realistic layer blendingYou can customize the effect by adjusting the opacity values, blend modes, or adding additional layers.
I'll recreate the exact ticket design with the non-hover and hover states as shown in your images.
I've created an exact recreation of the ticket design with the specific hover effect you showed:
State Management:
3D Effect:
Layering System:
Cursor Tracking:
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>