refactor: migrate project to TypeScript and translate comments to English

2026-09-14 13:27:17 +02:00
parent 1ef621f832
commit 4cd34106b0
35 changed files with 427 additions and 165 deletions
@@ -0,0 +1,58 @@
+'use client';
+
+// Animate decorative snack images with gentle randomized motion.
+
+import type {FloatingSnack} from '@/types/domain';
+import {useEffect, useRef} from 'react';
+import {gsap} from 'gsap';
+
+/**
+ * Renders the centralized `floatingSnacks` config as absolutely-positioned
+ * images and gives each one a gentle, randomized floating drift via GSAP.
+ * Positions/sizes/images all come from data/content.ts — edit there only.
+ */
+export default function FloatingItems({items}: {items: FloatingSnack[]}) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const nodes = containerRef.current?.querySelectorAll('[data-float-item]');
+        if (!nodes) return;
+
+        const tweens = Array.from(nodes).map((node, i) => {
+            const drift = 14 + Math.random() * 14;
+            const rotate = 4 + Math.random() * 6;
+            return gsap.to(node, {
+                y: `+=${drift}`,
+                rotate: i % 2 === 0 ? rotate : -rotate,
+                duration: 3.5 + Math.random() * 2.5,
+                ease: 'sine.inOut',
+                yoyo: true,
+                repeat: -1,
+                delay: Math.random() * 1.5,
+            });
+        });
+
+        return () => tweens.forEach((t) => t.kill());
+    }, [items]);
+
+    return (
+        <div ref={containerRef} className="absolute inset-0 pointer-events-none hidden md:block">
+            {items.map((item) => (
+                <img
+                    key={item.id}
+                    data-float-item
+                    src={item.image}
+                    alt=""
+                    aria-hidden="true"
+                    className="absolute drop-shadow-[0_8px_20px_rgba(0,0,0,0.35)]"
+                    style={{
+                        top: item.top,
+                        left: item.left,
+                        width: item.size,
+                        height: 'auto',
+                    }}
+                />
+            ))}
+        </div>
+    );
+}