22 lines
2.9 KiB
JSON
22 lines
2.9 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "liquid-glass-demo",
|
|
"type": "registry:ui",
|
|
"title": "Liquid Glass Demo",
|
|
"description": "Demo showing a liquid glass effect.",
|
|
"dependencies": [
|
|
"lucide-react",
|
|
"motion"
|
|
],
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/liquid-glass"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/components/liquid-glass/index.tsx",
|
|
"content": "import { LiquidGlass } from '@/components/animate-ui/components/liquid-glass';\nimport { GlassesIcon } from 'lucide-react';\nimport { motion } from 'motion/react';\n\nexport default function LiquidGlassDemo() {\n return (\n <div className=\"absolute inset-0\">\n <div className=\"relative h-full w-full overflow-hidden rounded-xl\">\n <div className=\"overflow-y-auto h-full\">\n <LiquidGlass\n className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-pointer\"\n radius={10}\n blur={1}\n childClassName=\"flex items-center gap-2 text-white font-medium px-3\"\n as={motion.button}\n whileHover={{\n scale: 1.05,\n }}\n whileTap={{\n scale: 0.95,\n }}\n >\n <GlassesIcon className=\"size-5\" />\n <span>Liquid Glass</span>\n </LiquidGlass>\n <div\n className=\"size-full dark:bg-neutral-900 bg-neutral-100\"\n style={{\n backgroundImage:\n 'url(https://upload.wikimedia.org/wikipedia/commons/9/93/Rainbow_on_Rara_Lake.jpg)',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n />\n <div\n className=\"size-full dark:bg-neutral-950 bg-white\"\n style={{\n backgroundImage:\n 'url(https://www.terdav.com/Content/img/mag/vignettes/grande/1515.jpg)',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n />\n <div\n className=\"size-full dark:bg-neutral-900 bg-neutral-100\"\n style={{\n backgroundImage:\n 'url(https://www.amplitudes.com/blog/wp-content/uploads/2019/07/iStock-1014791492-1.jpg)',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n />\n <div\n className=\"size-full dark:bg-neutral-950 bg-white\"\n style={{\n backgroundImage:\n 'url(https://m.media-amazon.com/images/I/714N8vbkr6L._AC_UF1000,1000_QL80_.jpg)',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n />\n </div>\n </div>\n </div>\n );\n}\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/components/liquid-glass.tsx"
|
|
}
|
|
]
|
|
} |