{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "goomorphic-card",
  "type": "registry:block",
  "title": "Goomorphic card",
  "description": "Goomorphic card",
  "files": [
    {
      "path": "components/usages/goomorphiccardusage.tsx",
      "content": "import GoomorphicCard from \"@/registry/open-source/goomorphic-card\";\n\nexport default function Usage() {\n    return (\n        <div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n            <GoomorphicCard\n                device=\"FUJIFILM, X-T30 II\"\n                location=\"Bogliasco, Italy\"\n                name=\"Grigorii Shcheglov\"\n                url=\"/itjustworks.jpg\"\n                user=\"@shegiva\"\n            />\t\t</div>\n    );\n}",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/goomorphiccardusage.tsx",
      "content": "import GoomorphicCard from \"@/registry/open-source/goomorphic-card\";\n\nexport default function Usage() {\n    return (\n        <div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n            <GoomorphicCard\n                device=\"FUJIFILM, X-T30 II\"\n                location=\"Bogliasco, Italy\"\n                name=\"Grigorii Shcheglov\"\n                url=\"/itjustworks.jpg\"\n                user=\"@shegiva\"\n            />\t\t</div>\n    );\n}",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/goomorphic-card.tsx",
      "content": "import { FC } from \"react\";\nimport { motion, Variants } from \"motion/react\";\nimport styles from \"./GoomorphicCard.module.css\";\n\n// Credit:\n// https://react-motion-components.vercel.app/?path=/docs/components-cards-goomorphic-card--docs&globals=outline:!true\n\nexport const card: Variants = {\n    init: {\n        backgroundSize: \"120%\",\n        backgroundPosition: \"50% 100%\",\n        transition: { ease: [0.7, 0, 0, 0.9], type: \"tween\", duration: 5 },\n    },\n    anim: {\n        backgroundSize: \"110%\",\n        backgroundPosition: \"50% 200%\",\n        filter: [\"brightness(1)\", \"brightness(2)\", \"brightness(1)\"],\n        transition: { ease: [0.7, 0, 0, 0.9], type: \"tween\", duration: 1, delay: 0.9 },\n    },\n};\n\nexport const hr: Variants = {\n    init: {\n        opacity: 0,\n    },\n    anim: {\n        opacity: 1,\n        transition: { type: \"tween\", duration: 0.5, delay: 1.4 },\n    },\n};\n\nexport const text: Variants = {\n    init: {\n        filter: \"blur(5px)\",\n        color: \"rgba(255,0,0,1)\",\n    },\n    anim: {\n        filter: \"blur(0px)\",\n        color: \"rgba(255,255,255,0.6)\",\n        transition: { type: \"tween\", duration: 1, filter: { type: \"tween\", delay: 0.8, duration: 1 } },\n    },\n};\n\nexport const socials: Variants & { [key: string]: any } = {\n    init: {\n        height: 40,\n        \"--mask\":\n            \"radial-gradient(0px at 50% 0px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(0px at 50% 0px, #0000 99%, #000 101%) 50% 0px/72px 100% repeat-x\",\n    },\n    anim: {\n        height: [40, 75, 40],\n        \"--mask\": [\n            \"radial-gradient(0px at 50% 0px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(0px at 50% 0px, #0000 99%, #000 101%) 50% 0px/72px 100% repeat-x\",\n            \"radial-gradient(18px at 50% 18px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(18px at 50% 0px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x\",\n            \"radial-gradient(18px at 50% 18px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(18px at 50% 0px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x\",\n            \"radial-gradient(0px at 50% 0px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(0px at 50% 0px, #0000 99%, #000 101%) 50% 0px/72px 100% repeat-x\",\n        ],\n        transition: {\n            ease: [0.85, 0, 0.15, 0.6],\n            type: \"tween\",\n            duration: 1.5,\n            \"--mask\": { delay: 0.2, duration: 0.65 },\n            height: { duration: 1 },\n        },\n    },\n};\n\nexport const meta: Variants & { [key: string]: any } = {\n    init: {\n        bottom: [-30, -30, -30],\n        height: [40, 40, 40],\n        width: \"70%\",\n        borderRadius: 0,\n        \"--mask\":\n            \"radial-gradient(0px at 50% calc(100% - 0px), #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(0px at 50% calc(100% + 0px), #0000 99%, #000 101%) 50% calc(100% - 0px) / 72px 100% repeat-x\",\n    },\n    anim: {\n        bottom: [-30, 115, 70],\n        height: [40, 70, 40],\n        width: [\"70%\", \"90%\", \"100%\"],\n        borderRadius: [0, 0, 50],\n        borderBottomLeftRadius: 0,\n        borderBottomRightRadius: 0,\n        \"--mask\": [\n            \"radial-gradient(0px at 50% calc(100% - 0px), #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(0px at 50% calc(100% + 0px), #0000 99%, #000 101%) 50% calc(100% - 0px) / 72px 100% repeat-x\",\n            \"radial-gradient(18px at 50% calc(100% - 18px), #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(18px at 50% calc(100% + 0px), #0000 99%, #000 101%) 50% calc(100% - 18px) / 72px 100% repeat-x\",\n            \"radial-gradient(18px at 50% calc(100% - 18px), #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(18px at 50% calc(100% + 0px), #0000 99%, #000 101%) 50% calc(100% - 18px) / 72px 100% repeat-x\",\n            \"radial-gradient(0px at 50% calc(100% - 0px), #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%, radial-gradient(0px at 50% calc(100% + 0px), #0000 99%, #000 101%) 50% calc(100% - 0px) / 72px 100% repeat-x\",\n        ],\n        transition: {\n            duration: 1.5,\n            type: \"tween\",\n            ease: [0.9, 0, 0.15, 0.6],\n            \"--mask\": { delay: 0.2, duration: 0.65 },\n            height: { duration: 0.9 },\n        },\n    },\n};\n\nconst MapIcon: FC = () => {\n    return (\n        <svg viewBox=\"0 0 32 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n            <g id=\"SVGRepo_iconCarrier\">\n                <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                    <g id=\"Icon-Set-Filled\" transform=\"translate(-206.000000, -413.000000)\" fill=\"#ffffff20\">\n                        <path\n                            d=\"M232,430 C232,430.553 231.552,431 231,431 C230.448,431 230,430.553 230,430 L230,422 C230,421.448 230.448,421 231,421 C231.552,421 232,421.448 232,422 L232,430 L232,430 Z M224,433 C224,433.553 223.552,434 223,434 C222.448,434 222,433.553 222,433 L222,427 C222,426.448 222.448,426 223,426 C223.552,426 224,426.448 224,427 L224,433 L224,433 Z M216,434 C216,434.553 215.552,435 215,435 C214.448,435 214,434.553 214,434 L214,424 C214,423.448 214.448,423 215,423 C215.552,423 216,423.448 216,424 L216,434 L216,434 Z M230,413 L222,419 L214,416 L206,421 L206,445 L214,440 L222,443 L230,437 L238,443 L238,419 L230,413 L230,413 Z\"\n                            id=\"map\"\n                        ></path>\n                    </g>\n                </g>\n            </g>\n        </svg>\n    );\n};\n\nconst CameraIcon: FC = () => {\n    return (\n        <svg viewBox=\"0 -2 32 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n            <g id=\"SVGRepo_iconCarrier\">\n                <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                    <g id=\"Icon-Set-Filled\" transform=\"translate(-258.000000, -467.000000)\" fill=\"#ffffff20\">\n                        <path\n                            d=\"M286,471 L283,471 L282,469 C281.411,467.837 281.104,467 280,467 L268,467 C266.896,467 266.53,467.954 266,469 L265,471 L262,471 C259.791,471 258,472.791 258,475 L258,491 C258,493.209 259.791,495 262,495 L286,495 C288.209,495 290,493.209 290,491 L290,475 C290,472.791 288.209,471 286,471 Z M274,491 C269.582,491 266,487.418 266,483 C266,478.582 269.582,475 274,475 C278.418,475 282,478.582 282,483 C282,487.418 278.418,491 274,491 Z M274,477 C270.687,477 268,479.687 268,483 C268,486.313 270.687,489 274,489 C277.313,489 280,486.313 280,483 C280,479.687 277.313,477 274,477 L274,477 Z\"\n                            id=\"camera\"\n                        ></path>\n                    </g>\n                </g>\n            </g>\n        </svg>\n    );\n};\n\nexport type DataType = {\n    location: string;\n    device: string;\n    name: string;\n    user: string;\n    url: string;\n};\n\nconst GoomorphicCard: FC<DataType> = (data: DataType) => {\n    const { location, device, name, user, url } = data;\n\n    return (\n        <motion.div\n            className={styles.card}\n            variants={card}\n            initial=\"init\"\n            whileHover=\"anim\"\n            style={{\n                backgroundImage: `url(${url})`,\n            }}\n        >\n            <div className={styles.container}>\n                <motion.div className={styles.meta} variants={meta}>\n                    <motion.p variants={text}>\n                        <MapIcon />\n                        <span>{location}</span>\n                    </motion.p>\n\n                    <motion.p variants={text}>\n                        <span>{device}</span>\n                        <CameraIcon />\n                    </motion.p>\n                </motion.div>\n                <motion.div className={styles.socials} variants={socials}>\n                    <motion.hr variants={hr} />\n                    <p>{name}</p>\n                    <p>{user} on Unsplash</p>\n                </motion.div>\n            </div>\n        </motion.div>\n    );\n};\n\nexport default GoomorphicCard;",
      "type": "registry:ui"
    }
  ]
}