From d3ff1950b85971216d0a85ddfcbe0f6dbcc3f5ab Mon Sep 17 00:00:00 2001
From: Pixel <pixel@faebits.com>
Date: Sun, 15 Mar 2026 09:48:53 +0100
Subject: [PATCH] feat: Replace static text with dynamic Gate component

---
 app/components/Gate.tsx | 63 +++++++++++++++++++++++++++++++++++++++++
 app/page.tsx            | 19 ++-----------
 2 files changed, 66 insertions(+), 16 deletions(-)
 create mode 100644 app/components/Gate.tsx

diff --git a/app/components/Gate.tsx b/app/components/Gate.tsx
new file mode 100644
index 0000000..e9cfa75
--- /dev/null
+++ b/app/components/Gate.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import React, { useRef, useMemo } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+function ParticleRing() {
+  const pointsRef = useRef<THREE.Points>(null);
+  const particleCount = 500;
+
+  const positions = useMemo(() => {
+    const pos = new Float32Array(particleCount * 3);
+    const radius = 2.5;
+    for (let i = 0; i < particleCount; i++) {
+      const theta = Math.random() * Math.PI * 2;
+      const r = radius + (Math.random() - 0.5) * 0.5;
+      pos[i * 3] = Math.cos(theta) * r;
+      pos[i * 3 + 1] = (Math.random() - 0.5) * 0.5;
+      pos[i * 3 + 2] = Math.sin(theta) * r;
+    }
+    return pos;
+  }, []);
+
+  useFrame((_, delta) => {
+    if (pointsRef.current) {
+      pointsRef.current.rotation.y += delta * 0.15;
+      pointsRef.current.rotation.x += delta * 0.05;
+    }
+  });
+
+  return (
+    <points ref={pointsRef}>
+      <bufferGeometry>
+        <bufferAttribute
+          attach="attributes-position"
+          count={particleCount}
+          array={positions}
+          itemSize={3}
+        />
+      </bufferGeometry>
+      <pointsMaterial 
+        size={0.04} 
+        color="#ffffff" 
+        transparent 
+        opacity={0.9} 
+        sizeAttenuation 
+      />
+    </points>
+  );
+}
+
+export default function Gate() {
+  return (
+    <div style={{ width: '100%', height: '100%', minHeight: '100vh', background: 'transparent' }}>
+      <Canvas 
+        camera={{ position: [0, 0, 7], fov: 60 }} 
+        gl={{ alpha: true, antialias: true }}
+      >
+        <ParticleRing />
+      </Canvas>
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 6a3a504..d675a1d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -29,18 +29,7 @@ function ParticleField() {
   );
 }
 
-// Runic Status Display (vereinfacht)
-function RunicStatus() {
-  return (
-    <div className="absolute top-10 left-1/2 -translate-x-1/2 text-center z-10">
-      <h1 className="text-4xl font-bold text-purple-400 mb-2">Pixel</h1>
-      <p className="text-xl text-gray-300">Architektin der FaeBits-Anderswelt</p>
-      <div className="mt-4 text-2xl text-purple-300 font-mono">
-        ⚡ Status: <span className="text-green-400">Online</span>
-      </div>
-    </div>
-  );
-}
+import Gate from './components/Gate';
 
 export default function Home() {
   return (
@@ -50,13 +39,11 @@ export default function Home() {
           <color attach="background" args={["#0a0a0a"]} />
           <ambientLight intensity={0.5} />
           <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
-          <ParticleField />
           <OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.5} />
         </Suspense>
       </Canvas>
-      <RunicStatus />
-      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 text-center z-10 text-gray-400">
-        <p>Warte auf den ersten Schritt ins Tor...</p>
+      <div className="absolute inset-0 z-10">
+        <Gate />
       </div>
     </main>
   );