Spaces:

AntDX316
/

HF-Shapes

Sleeping

App Files Files Community

AntDX316 commited on Apr 1

Commit

4d0d400

1 Parent(s): 6fca17b

updated

Browse files

Files changed (18) hide show

.bolt/config.json +3 -0
.bolt/prompt +8 -0
.gitignore +24 -0
eslint.config.js +28 -0
index.html +13 -0
package-lock.json +0 -0
package.json +38 -0
postcss.config.js +6 -0
src/App.tsx +12 -0
src/components/Scene.tsx +302 -0
src/index.css +3 -0
src/main.tsx +10 -0
src/vite-env.d.ts +1 -0
tailwind.config.js +8 -0
tsconfig.app.json +24 -0
tsconfig.json +7 -0
tsconfig.node.json +22 -0
vite.config.ts +10 -0

.bolt/config.json ADDED Viewed

	@@ -0,0 +1,3 @@

+{
+  "template": "bolt-vite-react-ts"
+}

.bolt/prompt ADDED Viewed

	@@ -0,0 +1,8 @@

+For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
+By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
+Use icons from lucide-react for logos.
+Use stock photos from unsplash where appropriate, only valid URLs you know exist. Do not download the images, only link to them in image tags.

.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

eslint.config.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,38 @@

+{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.99.0",
+    "@react-three/fiber": "^8.15.16",
+    "@react-three/postprocessing": "^2.15.12",
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "three": "^0.161.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@types/three": "^0.161.2",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/App.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+import React from 'react';
+import { Scene } from './components/Scene';
+function App() {
+  return (
+    <div className="w-full h-screen bg-black">
+      <Scene />
+    </div>
+  );
+}
+export default App;

src/components/Scene.tsx ADDED Viewed

	@@ -0,0 +1,302 @@

+import { useRef, useState, Suspense, useEffect } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { OrbitControls, Environment, Stars, Effects } from '@react-three/drei';
+import { Box, Disc, Hexagon, Octagon, Pentagon, Star, Palette, Zap, Maximize } from 'lucide-react';
+import * as THREE from 'three';
+import { EffectComposer, Bloom, ChromaticAberration } from '@react-three/postprocessing';
+interface ShapeProps {
+  geometry: 'box' | 'sphere' | 'torus' | 'icosahedron' | 'octahedron' | 'dodecahedron';
+  color: string;
+  textured: boolean;
+  speed: number;
+  scale: number;
+  effects: boolean;
+}
+function createVoronoiTexture() {
+  const size = 512;
+  const data = new Uint8Array(size * size * 4);
+  const points = Array(16).fill(0).map(() => ({
+    x: Math.random() * size,
+    y: Math.random() * size,
+    color: Math.random() * 255
+  }));
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      let minDist = Infinity;
+      let cellColor = 0;
+      // Find nearest point for voronoi cell
+      points.forEach(point => {
+        const dx = x - point.x;
+        const dy = y - point.y;
+        const dist = dx * dx + dy * dy;
+        if (dist < minDist) {
+          minDist = dist;
+          cellColor = point.color;
+        }
+      });
+      // Add some noise to break up the pattern
+      const noise = Math.random() * 30 - 15;
+      const finalColor = Math.max(0, Math.min(255, cellColor + noise));
+      const i = (y * size + x) * 4;
+      data[i] = finalColor;     // r
+      data[i + 1] = finalColor; // g
+      data[i + 2] = finalColor; // b
+      data[i + 3] = 255;        // a
+    }
+  }
+  const texture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat);
+  texture.wrapS = THREE.RepeatWrapping;
+  texture.wrapT = THREE.RepeatWrapping;
+  texture.needsUpdate = true;
+  return texture;
+}
+function Shape({ geometry, color, textured, speed, scale, effects }: ShapeProps) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const matRef = useRef<THREE.MeshPhysicalMaterial>(null);
+  const [normalMap] = useState(() => createVoronoiTexture());
+  useFrame((state, delta) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.x += delta * speed;
+      meshRef.current.rotation.y += delta * speed * 0.5;
+    }
+    if (matRef.current && effects) {
+      matRef.current.roughness = Math.sin(state.clock.elapsedTime) * 0.3 + 0.5;
+    }
+  });
+  const getGeometry = () => {
+    switch (geometry) {
+      case 'box':
+        return <boxGeometry args={[1, 1, 1]} />;
+      case 'sphere':
+        return <sphereGeometry args={[0.7, 64, 64]} />;
+      case 'torus':
+        return <torusGeometry args={[0.7, 0.3, 64, 128]} />;
+      case 'icosahedron':
+        return <icosahedronGeometry args={[0.8, 1]} />;
+      case 'octahedron':
+        return <octahedronGeometry args={[0.8, 2]} />;
+      case 'dodecahedron':
+        return <dodecahedronGeometry args={[0.8, 1]} />;
+      default:
+        return <boxGeometry args={[1, 1, 1]} />;
+    }
+  };
+  return (
+    <mesh ref={meshRef} scale={scale} castShadow receiveShadow>
+      {getGeometry()}
+      <meshPhysicalMaterial
+        ref={matRef}
+        color={color}
+        wireframe={!textured}
+        roughness={textured ? 0.5 : 0}
+        metalness={textured ? 0.9 : 0}
+        clearcoat={textured ? 0.5 : 0}
+        clearcoatRoughness={textured ? 0.2 : 0}
+        normalMap={textured ? normalMap : null}
+        normalScale={new THREE.Vector2(1.0, 1.0)}
+        envMapIntensity={2.5}
+        transmission={textured ? 0 : 0}
+        thickness={0}
+      />
+    </mesh>
+  );
+}
+function SceneContent(props: ShapeProps) {
+  return (
+    <>
+      <color attach="background" args={['#000000']} />
+      <fog attach="fog" args={['#000000', 5, 15]} />
+      <ambientLight intensity={0.4} />
+      <pointLight position={[10, 10, 10]} intensity={1} castShadow />
+      <spotLight
+        position={[-10, -10, -10]}
+        angle={0.3}
+        penumbra={1}
+        intensity={2}
+        castShadow
+      />
+      <Suspense fallback={null}>
+        <Shape {...props} />
+        <Environment preset="sunset" />
+        <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
+      </Suspense>
+      {props.effects && (
+        <EffectComposer>
+          <Bloom
+            intensity={1.5}
+            luminanceThreshold={0.8}
+            luminanceSmoothing={0.5}
+            height={200}
+          />
+          <ChromaticAberration offset={[0.001, 0.001]} />
+        </EffectComposer>
+      )}
+      <OrbitControls makeDefault />
+    </>
+  );
+}
+export function Scene() {
+  const [settings, setSettings] = useState({
+    geometry: 'box' as const,
+    color: '#ff6b6b',
+    textured: false,
+    speed: 1,
+    scale: 1,
+    effects: true,
+  });
+  const geometryOptions = [
+    { value: 'box', label: 'Cube', icon: Box },
+    { value: 'sphere', label: 'Sphere', icon: Disc },
+    { value: 'torus', label: 'Torus', icon: Hexagon },
+    { value: 'icosahedron', label: 'Icosahedron', icon: Pentagon },
+    { value: 'octahedron', label: 'Octahedron', icon: Octagon },
+    { value: 'dodecahedron', label: 'Dodecahedron', icon: Star },
+  ];
+  return (
+    <div className="w-full h-screen flex bg-black">
+      <div className="w-3/4 h-full">
+        <Canvas
+          camera={{ position: [3, 3, 3], fov: 50 }}
+          shadows
+          gl={{ antialias: true }}
+          dpr={[1, 2]}
+          className="w-full h-full"
+        >
+          <SceneContent {...settings} />
+        </Canvas>
+      </div>
+      <div className="w-1/4 bg-gray-900 p-8 overflow-y-auto border-l border-gray-800">
+        <h2 className="text-2xl font-bold mb-8 text-white flex items-center">
+          <Palette className="w-6 h-6 mr-2" /> Scene Settings
+        </h2>
+        <div className="space-y-8">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-4 flex items-center">
+              <Box className="w-4 h-4 mr-2" /> Geometry
+            </label>
+            <div className="grid grid-cols-2 gap-4">
+              {geometryOptions.map((option) => {
+                const Icon = option.icon;
+                return (
+                  <button
+                    key={option.value}
+                    onClick={() => setSettings({ ...settings, geometry: option.value as ShapeProps['geometry'] })}
+                    className={`flex flex-col items-center justify-center p-4 rounded-lg transition-all ${
+                      settings.geometry === option.value
+                        ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30'
+                        : 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200'
+                    }`}
+                  >
+                    <Icon className="w-8 h-8 mb-2" strokeWidth={1.5} />
+                    <span className="text-sm font-medium">{option.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-3 flex items-center">
+              <Palette className="w-4 h-4 mr-2" /> Color
+            </label>
+            <input
+              type="color"
+              value={settings.color}
+              onChange={(e) => setSettings({ ...settings, color: e.target.value })}
+              className="w-full h-12 rounded-lg cursor-pointer bg-gray-800 border-2 border-gray-700"
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <label className="text-sm font-medium text-gray-300 flex items-center">
+                <Zap className="w-4 h-4 mr-2" /> Effects
+              </label>
+              <button
+                onClick={() => setSettings({ ...settings, effects: !settings.effects })}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  settings.effects ? 'bg-blue-600' : 'bg-gray-700'
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    settings.effects ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              </button>
+            </div>
+            <div className="flex items-center space-x-3">
+              <label className="text-sm font-medium text-gray-300 flex items-center">
+                Metallic
+              </label>
+              <button
+                onClick={() => setSettings({ ...settings, textured: !settings.textured })}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  settings.textured ? 'bg-blue-600' : 'bg-gray-700'
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    settings.textured ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              </button>
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-3 flex items-center">
+              <Zap className="w-4 h-4 mr-2" /> Rotation Speed: {settings.speed.toFixed(1)}
+            </label>
+            <input
+              type="range"
+              min="0"
+              max="5"
+              step="0.1"
+              value={settings.speed}
+              onChange={(e) => setSettings({ ...settings, speed: parseFloat(e.target.value) })}
+              className="w-full accent-blue-600 bg-gray-700 h-2 rounded-lg appearance-none cursor-pointer"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-3 flex items-center">
+              <Maximize className="w-4 h-4 mr-2" /> Scale: {settings.scale.toFixed(1)}
+            </label>
+            <input
+              type="range"
+              min="0.1"
+              max="3"
+              step="0.1"
+              value={settings.scale}
+              onChange={(e) => setSettings({ ...settings, scale: parseFloat(e.target.value) })}
+              className="w-full accent-blue-600 bg-gray-700 h-2 rounded-lg appearance-none cursor-pointer"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/index.css ADDED Viewed

	@@ -0,0 +1,3 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,8 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});