4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T2e51,"use client"; import { animate, motion } from "motion/react"; import React, { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; import { GoCopilot } from "react-icons/go"; export default function CardDemo() { return ( Damn good card A card that showcases a set of tools that you use to create your product. ); } const Skeleton = () => { const scale = [1, 1.1, 1]; const transform = ["translateY(0px)", "translateY(-4px)", "translateY(0px)"]; const sequence = [ [ ".circle-1", { scale, transform, }, { duration: 0.8 }, ], [ ".circle-2", { scale, transform, }, { duration: 0.8 }, ], [ ".circle-3", { scale, transform, }, { duration: 0.8 }, ], [ ".circle-4", { scale, transform, }, { duration: 0.8 }, ], [ ".circle-5", { scale, transform, }, { duration: 0.8 }, ], ]; useEffect(() => { animate(sequence, { // @ts-ignore repeat: Infinity, repeatDelay: 1, }); }, []); return (

); }; const Sparkles = () => { const randomMove = () => Math.random() * 2 - 1; const randomOpacity = () => Math.random(); const random = () => Math.random(); return (

{[...Array(12)].map((_, i) => ( ))}

); }; export const Card = ({ className, children, }: { className?: string; children: React.ReactNode; }) => { return (

{children}

); }; export const CardTitle = ({ children, className, }: { children: React.ReactNode; className?: string; }) => { return (

{children}

); }; export const CardDescription = ({ children, className, }: { children: React.ReactNode; className?: string; }) => { return (

{children}

); }; export const CardSkeletonContainer = ({ className, children, showGradient = true, }: { className?: string; children: React.ReactNode; showGradient?: boolean; }) => { return (

{children}

); }; const Container = ({ className, children, }: { className?: string; children: React.ReactNode; }) => { return (

{children}

); }; export const ClaudeLogo = ({ className }: { className?: string }) => { return ( ); }; export const OpenAILogo = ({ className }: { className?: string }) => { return ( ); }; export const GeminiLogo = ({ className }: { className?: string }) => { return ( ); }; export const MetaIconOutline = ({ className }: { className?: string }) => { return ( ); }; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.aceternity.com/registry/cards-demo-3.json","proxyUrl":"https://shadcnregistry.com/r/aceternity/cards-demo-3","itemId":"@aceternity/cards-demo-3"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"components/cards-demo-3.tsx","content":"$51","type":"registry:block","target":"components/cards-demo-3.tsx"}]}]]}],"$L52"]}]

Cards Demo 3

Installation

Files

components

Styles