19 lines
1.4 KiB
JSON
19 lines
1.4 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "motion-effect-image-grid-demo",
|
|
"type": "registry:ui",
|
|
"title": "Motion Effect Image Grid Demo",
|
|
"description": "Demo showing the motion effect image grid.",
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/motion-effect",
|
|
"use-mobile"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/effects/motion-effect-image-grid/index.tsx",
|
|
"content": "'use client';\n\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { MotionEffect } from '@/components/animate-ui/effects/motion-effect';\n\nexport const MotionEffectImageGridDemo = () => {\n const isMobile = useIsMobile();\n\n return (\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n {Array.from({ length: isMobile ? 2 : 4 }).map((_, index) => (\n <MotionEffect\n key={index}\n slide={{\n direction: 'down',\n }}\n fade\n zoom\n inView\n delay={0.5 + index * 0.1}\n >\n <img\n src={`https://picsum.photos/seed/${index + 100}/600/400`}\n alt=\"Slide In Demo\"\n className=\"w-[300px] h-[200px] object-cover object-center bg-muted rounded-xl flex items-center justify-center\"\n />\n </MotionEffect>\n ))}\n </div>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/effects/motion-effect-image-grid.tsx"
|
|
}
|
|
]
|
|
} |