{children}

); }; `,__rawStringJsx__:`"use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, useMotionTemplate, } from "motion/react"; import { cn } from "@/lib/utils"; export const CometCard = ({ rotateDepth = 17.5, translateDepth = 20, className, children }) => { const ref = useRef(null); const x = useMotionValue(0); const y = useMotionValue(0); const mouseXSpring = useSpring(x); const mouseYSpring = useSpring(y); const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], [\`-\${rotateDepth}deg\`, \`\${rotateDepth}deg\`]); const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], [\`\${rotateDepth}deg\`, \`-\${rotateDepth}deg\`]); const translateX = useTransform(mouseXSpring, [-0.5, 0.5], [\`-\${translateDepth}px\`, \`\${translateDepth}px\`]); const translateY = useTransform(mouseYSpring, [-0.5, 0.5], [\`\${translateDepth}px\`, \`-\${translateDepth}px\`]); const glareX = useTransform(mouseXSpring, [-0.5, 0.5], [0, 100]); const glareY = useTransform(mouseYSpring, [-0.5, 0.5], [0, 100]); const glareBackground = useMotionTemplate\`radial-gradient(circle at \${glareX}% \${glareY}%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0) 80%)\`; const handleMouseMove = (e) => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const width = rect.width; const height = rect.height; const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; const xPct = mouseX / width - 0.5; const yPct = mouseY / height - 0.5; x.set(xPct); y.set(yPct); }; const handleMouseLeave = () => { x.set(0); y.set(0); }; return (

{children}

); }; `,__src__:"/src/registry/default/ui/comet-card.tsx",__style__:"default",children:(0,r.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useRef"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" motion"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useMotionValue"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useMotionTemplate"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "motion/react"'}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cn"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/lib/utils"'}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" CometCard"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rotateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 17.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" translateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 20"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" children"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" rotateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" translateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ref"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useRef"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"HTMLDivElement"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"null"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" x"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useMotionValue"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" y"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useMotionValue"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseXSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"x"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseYSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"y"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rotateX"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseYSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rotateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"deg`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rotateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"deg`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rotateY"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseXSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rotateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"deg`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rotateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"deg`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" translateX"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseXSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"translateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"px`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"translateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"px`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" translateY"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseYSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"translateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"px`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"translateDepth"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"px`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" glareX"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"mouseXSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 100"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]);"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" glareY"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"mouseYSpring"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 100"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]);"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" glareBackground"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useMotionTemplate"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`radial-gradient(circle at "}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"glareX"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"% "}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"glareY"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0) 80%)`"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" handleMouseMove"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"e"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"MouseEvent"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"HTMLDivElement"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">)"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" if"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"!"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"ref"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"current"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rect"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" ref"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"current"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"getBoundingClientRect"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"();"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" width"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" rect"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"width"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" height"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" rect"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"height"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseX"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" e"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"clientX"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" rect"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"left"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseY"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" e"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"clientY"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" rect"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"top"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" xPct"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseX"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" width"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" yPct"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseY"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" height"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" x"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"xPct"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" y"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"yPct"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" handleMouseLeave"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" x"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" y"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,r.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"perspective-distant transform-3d"'}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ref"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"ref"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onMouseMove"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"handleMouseMove"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onMouseLeave"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"handleMouseLeave"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rotateX"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rotateY"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" translateX"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" translateY"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" boxShadow"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "rgba(0, 0, 0, 0.01) 0px 520px 146px 0px, rgba(0, 0, 0, 0.04) 0px 333px 133px 0px, rgba(0, 0, 0, 0.26) 0px 83px 83px 0px, rgba(0, 0, 0, 0.29) 0px 21px 46px 0px"'}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" initial"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" scale"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" z"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" whileHover"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" scale"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1.05"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" z"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 50"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transition"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" duration"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.2"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative rounded-2xl"'})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"pointer-events-none absolute inset-0 z-50 h-full w-full rounded-[16px] mix-blend-overlay"'})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" background"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" glareBackground"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.6"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" transition"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" duration"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.2"}),(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,r.jsxs)(e.span,{"data-line":"",children:[(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,r.jsx)(e.span,{"data-line":"",children:(0,r.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})})]})})]}),` `,(0,r.jsxs)(e.h4,{id:"props",children:[(0,r.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,r.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{children:"Prop"}),(0,r.jsx)(e.th,{children:"Type"}),(0,r.jsx)(e.th,{children:"Default"}),(0,r.jsx)(e.th,{children:"Description"}),(0,r.jsx)(e.th,{children:"Required"})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"rotateDepth"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"number"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"17.5"})}),(0,r.jsx)(e.td,{children:"Controls the depth of 3D rotation effect on mouse movement. Higher values create more dramatic rotation."}),(0,r.jsx)(e.td,{children:"No"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"translateDepth"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"number"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"20"})}),(0,r.jsx)(e.td,{children:"Controls the depth of translation (movement) effect on mouse movement. Higher values create more dramatic movement."}),(0,r.jsx)(e.td,{children:"No"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"className"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"string"})}),(0,r.jsx)(e.td,{children:"undefined"}),(0,r.jsx)(e.td,{children:"Additional CSS classes to apply to the card container."}),(0,r.jsx)(e.td,{children:"No"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"children"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"React.ReactNode"})}),(0,r.jsx)(e.td,{children:"-"}),(0,r.jsx)(e.td,{children:"The content to be rendered inside the card."}),(0,r.jsx)(e.td,{children:"Yes"})]})]})]})]})}function D(i={}){let{wrapper:e}=i.components||{};return e?(0,r.jsx)(e,{...i,children:(0,r.jsx)(v,{...i})}):v(i)}function s(i,e){throw new Error("Expected "+(e?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(_);})(); ;return Component;

Best Free 3D Components for your Tailwind CSS and React project

Aceternity UI