If its your first day at Fight Club, you have to fight.

{items.map((item) => (

{item.title}

))} ); } `,__rawStringJsx__:`import React from "react"; import { DraggableCardBody, DraggableCardContainer, } from "@/components/ui/draggable-card"; export function DraggableCardDemo() { const items = [ { title: "Tyler Durden", image: "https://images.unsplash.com/photo-1732310216648-603c0255c000?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-10 left-[20%] rotate-[-5deg]", }, { title: "The Narrator", image: "https://images.unsplash.com/photo-1697909623564-3dae17f6c20b?q=80&w=2667&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-40 left-[25%] rotate-[-7deg]", }, { title: "Iceland", image: "https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=2600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-5 left-[40%] rotate-[8deg]", }, { title: "Japan", image: "https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?q=80&w=3648&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-32 left-[55%] rotate-[10deg]", }, { title: "Norway", image: "https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-20 right-[35%] rotate-[2deg]", }, { title: "New Zealand", image: "https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=3070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-24 left-[45%] rotate-[-7deg]", }, { title: "Canada", image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-8 left-[30%] rotate-[4deg]", }, ]; return (

If its your first day at Fight Club, you have to fight.

{items.map((item) => (

{item.title}

))} ); } `,__src__:"/src/registry/default/example/draggable-card-demo-2.tsx",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardContainer"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/components/ui/draggable-card"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" DraggableCardDemo"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" items"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Tyler Durden"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1732310216648-603c0255c000?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-10 left-[20%] rotate-[-5deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "The Narrator"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1697909623564-3dae17f6c20b?q=80&w=2667&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-40 left-[25%] rotate-[-7deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Iceland"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=2600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-5 left-[40%] rotate-[8deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Japan"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?q=80&w=3648&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-32 left-[55%] rotate-[10deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Norway"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-20 right-[35%] rotate-[2deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "New Zealand"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=3070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-24 left-[45%] rotate-[-7deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Canada"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-8 left-[30%] rotate-[4deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ];"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardContainer"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative flex min-h-screen w-full items-center justify-center overflow-clip"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"absolute top-1/2 mx-auto max-w-sm -translate-y-3/4 text-center text-2xl font-black text-neutral-400 md:text-4xl dark:text-neutral-800"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" If its your first day at Fight Club, you have to fight."})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"items"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"img"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" src"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" alt"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"pointer-events-none relative z-10 h-80 w-80 object-cover"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"h3"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mt-4 text-center text-2xl font-bold text-neutral-700 dark:text-neutral-300"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ))}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})}),` `,(0,e.jsxs)(i.h2,{id:"installation",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(t,{defaultValue:"manual",children:[(0,e.jsxs)(b,{children:[(0,e.jsx)(c,{value:"cli",children:"CLI"}),(0,e.jsx)(c,{value:"manual",children:"Manual"})]}),(0,e.jsx)(o,{value:"cli",children:(0,e.jsxs)(h,{children:[(0,e.jsx)(d,{children:"Run the following command"}),(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/draggable-card.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/draggable-card.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/draggable-card.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/draggable-card.json `,__bunCommand__:`bun x --bun shadcn@latest add https://ui.aceternity.com/registry/draggable-card.json `,children:(0,e.jsx)(i.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npx"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" shadcn@latest"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" add"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" https://ui.aceternity.com/registry/draggable-card.json"})]})})})})]})}),(0,e.jsx)(o,{value:"manual",children:(0,e.jsxs)(h,{children:[(0,e.jsx)(d,{children:"Install dependencies"}),(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npm i motion clsx tailwind-merge `,children:(0,e.jsx)(i.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npm"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" i"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" motion"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" clsx"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" tailwind-merge"})]})})})}),(0,e.jsx)(d,{children:"Add util file"}),(0,e.jsxs)(i.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(i.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"BeardedTheme Arc",children:"lib/utils.ts"}),(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clsx"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "clsx"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "tailwind-merge"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" cn"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(..."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"inputs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[])"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"clsx"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"inputs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"));"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})]}),(0,e.jsx)(d,{children:"Copy the source code"}),(0,e.jsx)(i.p,{children:(0,e.jsx)(i.code,{children:"components/ui/draggable-card.tsx"})}),(0,e.jsx)(n,{name:"draggable-card",children:(0,e.jsx)(i.figure,{__src__:"/src/registry/default/ui/draggable-card.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`"use client"; import { cn } from "@/lib/utils"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform, animate, useVelocity, useAnimationControls, } from "motion/react"; export const DraggableCardBody = ({ className, children, }: { className?: string; children?: React.ReactNode; }) => { const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const cardRef = useRef(null); const controls = useAnimationControls(); const [constraints, setConstraints] = useState({ top: 0, left: 0, right: 0, bottom: 0, }); // physics biatch const velocityX = useVelocity(mouseX); const velocityY = useVelocity(mouseY); const springConfig = { stiffness: 100, damping: 20, mass: 0.5, }; const rotateX = useSpring( useTransform(mouseY, [-300, 300], [25, -25]), springConfig, ); const rotateY = useSpring( useTransform(mouseX, [-300, 300], [-25, 25]), springConfig, ); const opacity = useSpring( useTransform(mouseX, [-300, 0, 300], [0.8, 1, 0.8]), springConfig, ); const glareOpacity = useSpring( useTransform(mouseX, [-300, 0, 300], [0.2, 0, 0.2]), springConfig, ); useEffect(() => { // Update constraints when component mounts or window resizes const updateConstraints = () => { if (typeof window !== "undefined") { setConstraints({ top: -window.innerHeight / 2, left: -window.innerWidth / 2, right: window.innerWidth / 2, bottom: window.innerHeight / 2, }); } }; updateConstraints(); // Add resize listener window.addEventListener("resize", updateConstraints); // Clean up return () => { window.removeEventListener("resize", updateConstraints); }; }, []); const handleMouseMove = (e: React.MouseEvent) => { const { clientX, clientY } = e; const { width, height, left, top } = cardRef.current?.getBoundingClientRect() ?? { width: 0, height: 0, left: 0, top: 0, }; const centerX = left + width / 2; const centerY = top + height / 2; const deltaX = clientX - centerX; const deltaY = clientY - centerY; mouseX.set(deltaX); mouseY.set(deltaY); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); }; return ( { document.body.style.cursor = "grabbing"; }} onDragEnd={(event, info) => { document.body.style.cursor = "default"; controls.start({ rotateX: 0, rotateY: 0, transition: { type: "spring", ...springConfig, }, }); const currentVelocityX = velocityX.get(); const currentVelocityY = velocityY.get(); const velocityMagnitude = Math.sqrt( currentVelocityX * currentVelocityX + currentVelocityY * currentVelocityY, ); const bounce = Math.min(0.8, velocityMagnitude / 1000); animate(info.point.x, info.point.x + currentVelocityX * 0.3, { duration: 0.8, ease: [0.2, 0, 0, 1], bounce, type: "spring", stiffness: 50, damping: 15, mass: 0.8, }); animate(info.point.y, info.point.y + currentVelocityY * 0.3, { duration: 0.8, ease: [0.2, 0, 0, 1], bounce, type: "spring", stiffness: 50, damping: 15, mass: 0.8, }); }} style={{ rotateX, rotateY, opacity, willChange: "transform", }} animate={controls} whileHover={{ scale: 1.02 }} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} className={cn( "relative min-h-96 w-80 overflow-hidden rounded-md bg-neutral-100 p-6 shadow-2xl transform-3d dark:bg-neutral-900", className, )} > {children} ); }; export const DraggableCardContainer = ({ className, children, }: { className?: string; children?: React.ReactNode; }) => { return (

{children}

); }; `,__rawStringJsx__:`"use client"; import { cn } from "@/lib/utils"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform, animate, useVelocity, useAnimationControls, } from "motion/react"; export const DraggableCardBody = ({ className, children }) => { const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const cardRef = useRef(null); const controls = useAnimationControls(); const [constraints, setConstraints] = useState({ top: 0, left: 0, right: 0, bottom: 0, }); // physics biatch const velocityX = useVelocity(mouseX); const velocityY = useVelocity(mouseY); const springConfig = { stiffness: 100, damping: 20, mass: 0.5, }; const rotateX = useSpring(useTransform(mouseY, [-300, 300], [25, -25]), springConfig); const rotateY = useSpring(useTransform(mouseX, [-300, 300], [-25, 25]), springConfig); const opacity = useSpring(useTransform(mouseX, [-300, 0, 300], [0.8, 1, 0.8]), springConfig); const glareOpacity = useSpring(useTransform(mouseX, [-300, 0, 300], [0.2, 0, 0.2]), springConfig); useEffect(() => { // Update constraints when component mounts or window resizes const updateConstraints = () => { if (typeof window !== "undefined") { setConstraints({ top: -window.innerHeight / 2, left: -window.innerWidth / 2, right: window.innerWidth / 2, bottom: window.innerHeight / 2, }); } }; updateConstraints(); // Add resize listener window.addEventListener("resize", updateConstraints); // Clean up return () => { window.removeEventListener("resize", updateConstraints); }; }, []); const handleMouseMove = (e) => { const { clientX, clientY } = e; const { width, height, left, top } = cardRef.current?.getBoundingClientRect() ?? { width: 0, height: 0, left: 0, top: 0, }; const centerX = left + width / 2; const centerY = top + height / 2; const deltaX = clientX - centerX; const deltaY = clientY - centerY; mouseX.set(deltaX); mouseY.set(deltaY); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); }; return ( { document.body.style.cursor = "grabbing"; }} onDragEnd={(event, info) => { document.body.style.cursor = "default"; controls.start({ rotateX: 0, rotateY: 0, transition: { type: "spring", ...springConfig, }, }); const currentVelocityX = velocityX.get(); const currentVelocityY = velocityY.get(); const velocityMagnitude = Math.sqrt(currentVelocityX * currentVelocityX + currentVelocityY * currentVelocityY); const bounce = Math.min(0.8, velocityMagnitude / 1000); animate(info.point.x, info.point.x + currentVelocityX * 0.3, { duration: 0.8, ease: [0.2, 0, 0, 1], bounce, type: "spring", stiffness: 50, damping: 15, mass: 0.8, }); animate(info.point.y, info.point.y + currentVelocityY * 0.3, { duration: 0.8, ease: [0.2, 0, 0, 1], bounce, type: "spring", stiffness: 50, damping: 15, mass: 0.8, }); }} style={{ rotateX, rotateY, opacity, willChange: "transform", }} animate={controls} whileHover={{ scale: 1.02 }} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} className={cn( "relative min-h-96 w-80 overflow-hidden rounded-md bg-neutral-100 p-6 shadow-2xl transform-3d dark:bg-neutral-900", className )}> {children} ); }; export const DraggableCardContainer = ({ className, children }) => { return (

{children}

); }; `,__src__:"/src/registry/default/ui/draggable-card.tsx",__style__:"default",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cn"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/lib/utils"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useRef"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useState"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useEffect"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" motion"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useMotionValue"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useSpring"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" animate"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useVelocity"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useAnimationControls"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "motion/react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" children"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useMotionValue"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" mouseY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useMotionValue"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cardRef"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useRef"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"HTMLDivElement"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"null"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" controls"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useAnimationControls"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"();"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"constraints"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setConstraints"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"({"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" top"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" left"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" right"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bottom"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" });"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // physics biatch"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" velocityX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useVelocity"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"mouseX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" velocityY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useVelocity"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"mouseY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" springConfig"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" stiffness"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 100"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" damping"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 20"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" mass"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rotateX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useSpring"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"mouseY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"300"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 300"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"25"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"25"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]),"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" springConfig"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rotateY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useSpring"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"mouseX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"300"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 300"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"25"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 25"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]),"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" springConfig"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useSpring"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"mouseX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"300"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 300"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.8"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.8"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]),"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" springConfig"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" glareOpacity"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useSpring"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useTransform"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"mouseX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"300"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 300"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]),"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" springConfig"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useEffect"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Update constraints when component mounts or window resizes"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" updateConstraints"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" if"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"typeof"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" window"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" !=="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "undefined"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setConstraints"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"({"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" top"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"window"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"innerHeight"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" left"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"window"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"innerWidth"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" right"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" window"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"innerWidth"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bottom"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" window"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"innerHeight"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" });"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" updateConstraints"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"();"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Add resize listener"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" window"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"addEventListener"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"resize"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" updateConstraints"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Clean up"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" window"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"removeEventListener"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"resize"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" updateConstraints"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" []);"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" handleMouseMove"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"e"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"MouseEvent"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"HTMLDivElement"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">)"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clientX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clientY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" e"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" width"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" height"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" left"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" top"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" cardRef"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"current"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"getBoundingClientRect"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ??"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" left"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" top"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" centerX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" left"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" width"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" centerY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" top"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" height"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" deltaX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clientX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" centerX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" deltaY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clientY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" centerY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" mouseX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"deltaX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" mouseY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"deltaY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" handleMouseLeave"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" mouseX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" mouseY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ref"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"cardRef"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" drag"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" dragConstraints"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"constraints"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onDragStart"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" document"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"body"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"style"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"cursor"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "grabbing"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onDragEnd"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"event"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" info"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" document"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"body"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"style"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"cursor"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "default"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" controls"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"start"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"({"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" rotateX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" rotateY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transition"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" type"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "spring"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ..."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"springConfig"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" });"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" currentVelocityX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" velocityX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"get"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"();"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" currentVelocityY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" velocityY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"get"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"();"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" velocityMagnitude"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"sqrt"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" currentVelocityX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" currentVelocityX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" currentVelocityY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" currentVelocityY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" bounce"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"min"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.8"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" velocityMagnitude"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1000"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" animate"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"info"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"point"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"x"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" info"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"point"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"x"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" currentVelocityX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.3"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" duration"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.8"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" ease"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" bounce"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" type"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "spring"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" stiffness"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 50"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" damping"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 15"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" mass"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.8"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" });"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" animate"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"info"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"point"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"y"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" info"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"point"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"y"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" currentVelocityY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.3"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" duration"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.8"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" ease"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0.2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" bounce"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" type"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "spring"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" stiffness"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 50"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" damping"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 15"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" mass"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.8"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" });"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rotateX"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rotateY"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" willChange"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "transform"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" animate"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"controls"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" whileHover"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" scale"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1.02"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onMouseMove"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"handleMouseMove"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onMouseLeave"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"handleMouseLeave"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "relative min-h-96 w-80 overflow-hidden rounded-md bg-neutral-100 p-6 shadow-2xl transform-3d dark:bg-neutral-900"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" glareOpacity"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"pointer-events-none absolute inset-0 bg-white select-none"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardContainer"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" children"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"[perspective:3000px]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})})]})})]}),` `,(0,e.jsxs)(i.h2,{id:"examples",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,e.jsxs)(i.h4,{id:"polaroid-collection",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#polaroid-collection",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Polaroid collection"]}),` `,(0,e.jsx)(a,{name:"draggable-card-demo-2",children:(0,e.jsx)(i.figure,{__src__:"/src/registry/default/example/draggable-card-demo-2.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import React from "react"; import { DraggableCardBody, DraggableCardContainer, } from "@/components/ui/draggable-card"; export function DraggableCardDemo() { const items = [ { title: "Tyler Durden", image: "https://images.unsplash.com/photo-1732310216648-603c0255c000?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-10 left-[20%] rotate-[-5deg]", }, { title: "The Narrator", image: "https://images.unsplash.com/photo-1697909623564-3dae17f6c20b?q=80&w=2667&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-40 left-[25%] rotate-[-7deg]", }, { title: "Iceland", image: "https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=2600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-5 left-[40%] rotate-[8deg]", }, { title: "Japan", image: "https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?q=80&w=3648&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-32 left-[55%] rotate-[10deg]", }, { title: "Norway", image: "https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-20 right-[35%] rotate-[2deg]", }, { title: "New Zealand", image: "https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=3070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-24 left-[45%] rotate-[-7deg]", }, { title: "Canada", image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", className: "absolute top-8 left-[30%] rotate-[4deg]", }, ]; return (

If its your first day at Fight Club, you have to fight.

{items.map((item) => (

{item.title}

If its your first day at Fight Club, you have to fight.

{items.map((item) => (

{item.title}

))} ); } `,__src__:"/src/registry/default/example/draggable-card-demo-2.tsx",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardContainer"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/components/ui/draggable-card"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" DraggableCardDemo"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" items"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Tyler Durden"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1732310216648-603c0255c000?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-10 left-[20%] rotate-[-5deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "The Narrator"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1697909623564-3dae17f6c20b?q=80&w=2667&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-40 left-[25%] rotate-[-7deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Iceland"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=2600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-5 left-[40%] rotate-[8deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Japan"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?q=80&w=3648&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-32 left-[55%] rotate-[10deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Norway"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-20 right-[35%] rotate-[2deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "New Zealand"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=3070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-24 left-[45%] rotate-[-7deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Canada"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute top-8 left-[30%] rotate-[4deg]"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ];"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardContainer"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative flex min-h-screen w-full items-center justify-center overflow-clip"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"absolute top-1/2 mx-auto max-w-sm -translate-y-3/4 text-center text-2xl font-black text-neutral-400 md:text-4xl dark:text-neutral-800"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" If its your first day at Fight Club, you have to fight."})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"items"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"img"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" src"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"image"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" alt"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"pointer-events-none relative z-10 h-80 w-80 object-cover"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"h3"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mt-4 text-center text-2xl font-bold text-neutral-700 dark:text-neutral-300"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"title"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ))}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})}),` `,(0,e.jsxs)(i.h4,{id:"grid",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#grid",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Grid"]}),` `,(0,e.jsx)(a,{name:"draggable-card-demo-3",children:(0,e.jsx)(i.figure,{__src__:"/src/registry/default/example/draggable-card-demo-3.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import React from "react"; import { DraggableCardBody, DraggableCardContainer, } from "@/components/ui/draggable-card"; export function DraggableCardDemo() { return (

How

You

Doin

); } const Container = ({ children }: { children: React.ReactNode }) => { return (

{children}

); }; `,__rawStringJsx__:`import React from "react"; import { DraggableCardBody, DraggableCardContainer, } from "@/components/ui/draggable-card"; export function DraggableCardDemo() { return (

How

You

Doin

); } const Container = ({ children }) => { return (

{children}

); }; `,__src__:"/src/registry/default/example/draggable-card-demo-3.tsx",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardContainer"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/components/ui/draggable-card"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" DraggableCardDemo"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardContainer"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative my-10 flex min-h-screen w-full justify-center overflow-clip"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"grid w-full max-w-5xl grid-cols-1 items-center justify-center gap-10 md:grid-cols-3"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"Container"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"img"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" src"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=3634&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" alt"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"Some mountains"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"pointer-events-none relative z-10 h-80 w-full object-cover"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mt-4 text-center text-2xl font-bold text-neutral-700 dark:text-neutral-300"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" How"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"Container"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"img"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" src"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=3506&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" alt"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"Some mountains"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"pointer-events-none relative z-10 h-80 w-full object-cover"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mt-4 text-center text-2xl font-bold text-neutral-700 dark:text-neutral-300"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" You"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"Container"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"img"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" src"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"https://images.unsplash.com/photo-1509316975850-ff9c5deb0cd9?q=80&w=3072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" alt"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"Some mountains"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"pointer-events-none relative z-10 h-80 w-full object-cover"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mt-4 text-center text-2xl font-bold text-neutral-700 dark:text-neutral-300"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Doin"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" Container"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" children"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" })"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative flex items-center justify-center rounded-lg bg-gray-200 dark:bg-neutral-800"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})}),` `,(0,e.jsxs)(i.h4,{id:"single-card",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#single-card",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Single card"]}),` `,(0,e.jsx)(a,{name:"draggable-card-demo",children:(0,e.jsx)(i.figure,{__src__:"/src/registry/default/example/draggable-card-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import React from "react"; import { DraggableCardBody, DraggableCardContainer, } from "@/components/ui/draggable-card"; export function DraggableCardDemo() { return ( Some mountains

Switzerland

); } `,__rawStringJsx__:`import React from "react"; import { DraggableCardBody, DraggableCardContainer, } from "@/components/ui/draggable-card"; export function DraggableCardDemo() { return ( Some mountains

Switzerland

); } `,__src__:"/src/registry/default/example/draggable-card-demo.tsx",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DraggableCardContainer"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/components/ui/draggable-card"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" DraggableCardDemo"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardContainer"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative flex min-h-screen w-full flex-col items-center justify-center overflow-clip"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DraggableCardBody"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"img"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" src"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=3634&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" alt"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"Some mountains"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"pointer-events-none relative z-10 h-80 w-full object-cover"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mt-4 text-center text-2xl font-bold text-neutral-700 dark:text-neutral-300"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Switzerland"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})}),` `,(0,e.jsxs)(i.h2,{id:"props",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(i.h4,{id:"draggablecardbody-props",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#draggablecardbody-props",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"DraggableCardBody Props"]}),` `,(0,e.jsxs)(i.table,{children:[(0,e.jsx)(i.thead,{children:(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.th,{children:"Prop"}),(0,e.jsx)(i.th,{children:"Type"}),(0,e.jsx)(i.th,{children:"Description"}),(0,e.jsx)(i.th,{children:"Default"})]})}),(0,e.jsxs)(i.tbody,{children:[(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"className"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"string?"})}),(0,e.jsx)(i.td,{children:"Additional CSS classes to apply to the card body"}),(0,e.jsx)(i.td,{children:"undefined"})]}),(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"children"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"React.ReactNode?"})}),(0,e.jsx)(i.td,{children:"Content to render inside the card"}),(0,e.jsx)(i.td,{children:"undefined"})]})]})]}),` `,(0,e.jsxs)(i.h4,{id:"draggablecardcontainer-props",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#draggablecardcontainer-props",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"DraggableCardContainer Props"]}),` `,(0,e.jsxs)(i.table,{children:[(0,e.jsx)(i.thead,{children:(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.th,{children:"Prop"}),(0,e.jsx)(i.th,{children:"Type"}),(0,e.jsx)(i.th,{children:"Description"}),(0,e.jsx)(i.th,{children:"Default"})]})}),(0,e.jsxs)(i.tbody,{children:[(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"className"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"string?"})}),(0,e.jsx)(i.td,{children:"Additional CSS classes to apply to the container"}),(0,e.jsx)(i.td,{children:"undefined"})]}),(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"children"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"React.ReactNode?"})}),(0,e.jsx)(i.td,{children:"Content to render inside the container"}),(0,e.jsx)(i.td,{children:"undefined"})]})]})]})]})}function v(r={}){let{wrapper:i}=r.components||{};return i?(0,e.jsx)(i,{...r,children:(0,e.jsx)(y,{...r})}):y(r)}function s(r,i){throw new Error("Expected "+(i?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(w);})(); ;return Component;

Best Free Draggable Components for your Tailwind CSS and React project

Aceternity UI