4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2993,'use client'; import React from 'react'; import { Shader, Blob, CursorRipples, FilmGrain, SolidColor, Swirl, WaveDistortion } from 'shaders/react'; // First texture shader provided by the user (Mercury collection) export function Shader0() { return (

); } // Map of shaders for the 9 cards. You can send the code for each card one by one! export function Shader1() { return (

); } // Third texture shader provided by the user export function Shader2() { return (

); } // Fourth texture shader provided by the user export function Shader3() { return (

); } // Fifth texture shader provided by the user export function Shader4() { return (

); } // Sixth texture shader provided by the user export function Shader5() { return (

); } // Seventh texture shader provided by the user export function Shader6() { return (

); } // Eighth texture shader provided by the user export function Shader7() { return (

); } // Ninth texture shader provided by the user export function Shader8() { return (

); } export const SHADERS_MAP: (React.ComponentType | null)[] = [ Shader0, // Card 1 (i = 0) Shader1, // Card 2 (i = 1) Shader2, // Card 3 (i = 2) Shader3, // Card 4 (i = 3) Shader4, // Card 5 (i = 4) Shader5, // Card 6 (i = 5) Shader6, // Card 7 (i = 6) Shader7, // Card 8 (i = 7) Shader8, // Card 9 (i = 8) ]; 51:T7078,'use client'; import { useState, useEffect, useRef } from 'react'; import { SHADERS_MAP } from './cards-shader-effect'; // Nine beautiful premium solid colors to clearly track the cards const CARD_COLORS = [ '#FF3B30', // Apple Red '#FF9500', // Apple Orange '#FFCC00', // Apple Yellow '#34C759', // Apple Green '#007AFF', // Apple Blue '#5856D6', // Apple Purple '#FF2D55', // Apple Pink '#AF52DE', // Apple Violet '#00C7BE', // Apple Teal ]; // Different card details for each of the cards const CARD_DETAILS = [ { number: '4232 8908 1121 4892', name: 'ZACHARY MERCER', cvv: '382' }, { number: '4154 7831 9904 5124', name: 'SOPHIA MARTINEZ', cvv: '109' }, { number: '5457 4120 7733 9035', name: 'BENJAMIN CARTER', cvv: '764' }, { number: '4441 5567 1223 2468', name: 'EMILY MORRISON', cvv: '491' }, { number: '5375 8891 2234 7713', name: 'JACKSON REID', cvv: '255' }, ]; export function CardsShader() { const cardCount = 1; const cardsRefs = useRef<(HTMLDivElement | null)[]>([]); const frameId = useRef(0); // Track hover state natively to avoid React enclosure delays/stales in 60fps tick const isHoveredRef = useRef(false); const [designIndex, setDesignIndex] = useState(0); // Smoothly interpolated flip rotation angle around Y axis const flipAngle = useRef(0); // Track mouse coordinates for interactive 3D parallax tilt with inertia damping const mouse = useRef({ x: 0, y: 0, targetX: 0, targetY: 0 }); // Responsive state containing card dimensions const [metrics, setMetrics] = useState({ cardW: 336, cardH: 211, // 1.59 standard credit card ratio }); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { // Screen-space cursor offset relative to window center, clamped to [-1.0, 1.0] range const rx = (e.clientX - window.innerWidth / 2) / (window.innerWidth / 2); const ry = (e.clientY - window.innerHeight / 2) / (window.innerHeight / 2); mouse.current.targetX = Math.max(-1, Math.min(1, rx)); mouse.current.targetY = Math.max(-1, Math.min(1, ry)); }; const handleMouseLeave = () => { // Return gently to center orientation when mouse focus is lost or moves away mouse.current.targetX = 0; mouse.current.targetY = 0; }; window.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseleave', handleMouseLeave); return () => { window.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseleave', handleMouseLeave); }; }, []); useEffect(() => { const handleResize = () => { const w = window.innerWidth; const h = window.innerHeight; // Calculate Card Metrics (shrink cards if height is small to save vertical space) let cardW = Math.round(w * 0.16 + 130); const heightFactor = Math.min(1.0, Math.max(0.65, h / 850)); cardW = Math.round(cardW * heightFactor); cardW = Math.min(336, Math.max(150, cardW)); const cardH = Math.round(cardW / 1.5925); // Standard credit card ratio setMetrics({ cardW, cardH }); }; handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); // Compute positions, rotations, and visual rules at 60fps const renderLoop = () => { // Smoothly interpolate current mouse variables towards their target positions (damping/inertia logic) mouse.current.x += (mouse.current.targetX - mouse.current.x) * 0.08; mouse.current.y += (mouse.current.targetY - mouse.current.y) * 0.08; const cards = cardsRefs.current; const card = cards[0]; if (!card) return; // Smoothly interpolate the Y rotation flip progress const targetFlip = isHoveredRef.current ? 180 : 0; flipAngle.current += (targetFlip - flipAngle.current) * 0.1; // Vertical tilt (around X-axis) and horizontal tilt (around Y-axis) driven by mouse coordinates const maxTiltY = 15; // Max angle tilt left-to-right (degrees) const maxTiltX = 12; // Max angle tilt up-and-down (degrees) // Flip factor inverts Y-tilt when card is face-down to feel completely natural under user's cursor const flipFactor = Math.cos((flipAngle.current * Math.PI) / 180); const activeTiltX = -mouse.current.y * maxTiltX; const activeTiltY = mouse.current.x * maxTiltY * flipFactor; const totalRotX = activeTiltX; const totalRotY = flipAngle.current + activeTiltY; card.style.zIndex = '100'; card.style.opacity = '1'; card.style.visibility = 'visible'; // Inject translation matrix with the premium -2deg tilt combined with dynamic mouse-interactive 3D tilt card.style.transform = `translateZ(130px) rotateX(${totalRotX.toFixed(2)}deg) rotateY(${totalRotY.toFixed(2)}deg) rotateZ(-2deg)`; }; useEffect(() => { const tick = () => { renderLoop(); frameId.current = requestAnimationFrame(tick); }; frameId.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(frameId.current); }, [metrics]); // Slices for 3D volumetric depth with 30% reduced thickness // Span from -1.47px to 1.47px creates an extremely premium real 3D volume feel const thicknessLayers = [-1.47, -0.73, 0, 0.73, 1.47]; return (

{/* Wavebank Header brand overlay */}

{/* Left side: Custom wavebank SVG Logo */}

{/* Right side: Completely separated action buttons with 0px gap */}

{/* 3D perspective camera space */}

{/* Dynamic 3D coordinate viewport */}

{ setDesignIndex(prev => { let next = Math.floor(Math.random() * 9); while (next === prev) { next = Math.floor(Math.random() * 9); } return next; }); }} onMouseEnter={() => { isHoveredRef.current = true; }} onMouseLeave={() => { isHoveredRef.current = false; }} className="absolute cursor-pointer active:scale-[0.97] transition-all duration-300 ease-out pointer-events-auto focus:outline-none" style={{ width: `${metrics.cardW}px`, height: `${metrics.cardH}px`, transformStyle: 'preserve-3d', }} > {Array.from({ length: cardCount }).map((_, i) => (

{ cardsRefs.current[i] = el; }} className="absolute inset-0" style={{ width: `${metrics.cardW}px`, height: `${metrics.cardH}px`, transformStyle: 'preserve-3d', backfaceVisibility: 'visible', }} > {/* Build physical 3D volumetric thickness by dense parallel layering */} {thicknessLayers.map((zOffset, layerIdx) => { const isFrontFace = layerIdx === thicknessLayers.length - 1; const isBackFace = layerIdx === 0; const ShaderComponent = SHADERS_MAP[designIndex % SHADERS_MAP.length]; const baseBgColor = ShaderComponent ? '#0f0f0f' : CARD_COLORS[designIndex % CARD_COLORS.length]; // Middle structural slice if (!isFrontFace && !isBackFace) { return (

); } // Front face slice if (isFrontFace) { const frontBorderStyle = 'border border-white/15'; return (

{ShaderComponent && }

{/* Golden/Silver Metallic Contact Chip - positioned mid-left (vertically centered on the card) with custom user vectors */}

{/* JWT Brand Logo - positioned at top-right */}

{/* Double intersecting circle Brand Logo - bottom right corner */}

); } // Back face slice if (isBackFace) { const backBorderStyle = 'border border-white/15'; const details = CARD_DETAILS[designIndex % CARD_DETAILS.length]; return (

{/* Render WebGL Shader with premium 16px blur on the back face of the card */} {ShaderComponent && (

)} {/* Premium Real Magnetic stripe */}

{/* Card holder info and details on the bottom-left */}

{/* Card Number */}

{details.number}

{/* Owner & CVV */}

{details.name} • CVV: {details.cvv}

); } return null; })}

))}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","shaders",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/shaders","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"shaders"}]]}]}]]}],["$","$L4e",null,{"namespace":"@uui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/uui/cards-shader-effect/cards-shader-effect.tsx","content":"$50","type":"registry:block","target":"@components/uui/cards-shader-effect/cards-shader-effect.tsx"},{"path":"components/uui/cards-shader-effect/example.tsx","content":"$51","type":"registry:block","target":"@components/uui/cards-shader-effect/example.tsx"}],"className":"h-[70svh] min-h-80"}]]}]