32 lines
873 B
TypeScript
32 lines
873 B
TypeScript
'use client';
|
|
|
|
import { useIsMobile } from '@workspace/ui/hooks/use-mobile';
|
|
import { MotionEffect } from '@/registry/effects/motion-effect';
|
|
|
|
export const MotionEffectImageGridDemo = () => {
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{Array.from({ length: isMobile ? 2 : 4 }).map((_, index) => (
|
|
<MotionEffect
|
|
key={index}
|
|
slide={{
|
|
direction: 'down',
|
|
}}
|
|
fade
|
|
zoom
|
|
inView
|
|
delay={0.5 + index * 0.1}
|
|
>
|
|
<img
|
|
src={`https://picsum.photos/seed/${index + 100}/600/400`}
|
|
alt="Slide In Demo"
|
|
className="w-[300px] h-[200px] object-cover object-center bg-muted rounded-xl flex items-center justify-center"
|
|
/>
|
|
</MotionEffect>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|