feat: add BlurFadeDemo component and integrate it into MagicuiPage for enhanced visual effects

src/app/[locale]/(marketing)/(pages)/magicui/page.tsx

@@ -4,6 +4,7 @@ import { AnimatedListDemo } from '@/components/magicui/example/animated-list-exa
 import { AnimatedShinyTextDemo } from '@/components/magicui/example/animated-shiny-text-example';
 import { AnimatedSubscribeButtonDemo } from '@/components/magicui/example/animated-subscribe-button-example';
 import { BentoDemo } from '@/components/magicui/example/bento-grid-example';
+import { BlurFadeDemo } from '@/components/magicui/example/blur-fade-example';
 import { DotPatternDemo } from '@/components/magicui/example/dot-pattern-example';
 import { GridPatternDemo } from '@/components/magicui/example/grid-pattern-example';
 import { HeroVideoDialogDemoTopInBottomOut } from '@/components/magicui/example/hero-video-dialog-example';
@@ -68,6 +69,7 @@ export default async function MagicuiPage() {
           <WordRotateDemo />
         </div>
       </div>
+      <BlurFadeDemo />
       <DotPatternDemo />
       <GridPatternDemo />
       <AnimatedGridPatternDemo />

src/components/magicui/example/blur-fade-example.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable @next/next/no-img-element */
+import { BlurFade } from "@/components/magicui/blur-fade";
+
+const images = Array.from({ length: 9 }, (_, i) => {
+  const isLandscape = i % 2 === 0;
+  const width = isLandscape ? 800 : 600;
+  const height = isLandscape ? 600 : 800;
+  return `https://picsum.photos/seed/${i + 1}/${width}/${height}`;
+});
+
+export function BlurFadeDemo() {
+  return (
+    <section id="photos">
+      <div className="columns-2 gap-4 sm:columns-3">
+        {images.map((imageUrl, idx) => (
+          <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>
+            <img
+              className="mb-4 size-full rounded-lg object-contain"
+              src={imageUrl}
+              alt={`Random stock image ${idx + 1}`}
+            />
+          </BlurFade>
+        ))}
+      </div>
+    </section>
+  );
+}