feat: add Next.js base structure from existing project

2026-04-11 20:22:01 +02:00
parent 80d96cff75
commit f0359804d4
9 changed files with 265 additions and 0 deletions
@@ -0,0 +1,62 @@
+"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"
+          args={[positions, 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>
+  );
+}
+
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Pixel | Tor der Wandlerin",
+  description: "Pixel - Architektin der FaeBits-Anderswelt",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="de">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,55 @@
+"use client";
+
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls, Stars } from "@react-three/drei";
+import { Suspense, useRef, useState } from "react";
+import * as THREE from "three";
+
+// Einfache Partikel-Animation (WebGPU-Ersatz für jetzt)
+function ParticleField() {
+  const count = 2000;
+  const meshRef = useRef<THREE.InstancedMesh>(null);
+  const [dummy] = useState(() => new THREE.Object3D());
+
+  // Zufällige Positionen initialisieren
+  const positions = useRef(
+    Array.from({ length: count }, () => ({
+      x: (Math.random() - 0.5) * 20,
+      y: (Math.random() - 0.5) * 20,
+      z: (Math.random() - 0.5) * 20,
+      speed: Math.random() * 0.02 + 0.01,
+    }))
+  );
+
+  return (
+    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
+      <sphereGeometry args={[0.05, 8, 8]} />
+      <meshBasicMaterial color="#a855f7" transparent opacity={0.8} />
+    </instancedMesh>
+  );
+}
+
+import Gate from './components/Gate';
+
+export default function Home() {
+  return (
+    <main className="w-full h-screen relative">
+      <Canvas camera={{ position: [0, 0, 10], fov: 75 }}>
+        <Suspense fallback={null}>
+          <color attach="background" args={["#0a0a0a"]} />
+          <ambientLight intensity={0.5} />
+          <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
+          <OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.5} />
+        </Suspense>
+      </Canvas>
+      <div className="absolute inset-0 z-10 flex flex-col items-center justify-center">
+        <Gate />
+        <div className="absolute bottom-10 flex space-x-8 text-gray-400 font-mono">
+          <a href="https://faebits.com" target="_blank" rel="noopener noreferrer" className="hover:text-purple-400 transition-colors">2D-Ebene</a>
+          <a href="https://3d.faebits.com" target="_blank" rel="noopener noreferrer" className="hover:text-purple-400 transition-colors">3D-Anderswelt</a>
+          <a href="https://git.faebits.com" target="_blank" rel="noopener noreferrer" className="hover:text-purple-400 transition-colors">Das Archiv</a>
+        </div>
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  output: 'export', // Statische Export-Dateien für einfachen Webserver
+  images: {
+    unoptimized: true, // Für statischen Export notwendig
+  },
+};
+
+module.exports = nextConfig;
@@ -0,0 +1,25 @@
+{
+  "name": "pixel-faebits",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "16.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "@react-three/fiber": "^9.0.0",
+    "@react-three/drei": "^10.0.0",
+    "three": "^0.182.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.9.0"
+  }
+}
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Pixel - Architektin der FaeBits-Anderswelt" />
+    <title>Pixel | Tor der Wandlerin</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}