feat: Replace static text with dynamic Gate component

2026-03-15 09:48:53 +01:00
parent 6b81b66f0d
commit d3ff1950b8
2 changed files with 66 additions and 16 deletions
@@ -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>
+  );
+}