Ok men nu ska det funka på riktigt det ska vara en enkel men profisonel 3d animerings studio
c9538a9 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelMotion Studio - Professional 3D Animation</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#EF4444', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .vanta-canvas { | |
| position: absolute ; | |
| z-index: 0 ; | |
| } | |
| .content-wrapper { | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .animation-canvas { | |
| border-radius: 12px; | |
| box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div id="vanta-bg"></div> | |
| <div class="content-wrapper container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="film" class="text-primary-500 w-8 h-8"></i> | |
| <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-pink-500">PixelMotion</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-primary-500 transition">Home</a> | |
| <a href="#" class="hover:text-primary-500 transition">Projects</a> | |
| <a href="#" class="hover:text-primary-500 transition">Assets</a> | |
| <a href="#" class="hover:text-primary-500 transition">Render Farm</a> | |
| <a href="#" class="hover:text-primary-500 transition">Team</a> | |
| </nav> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="mb-16 text-center"> | |
| <h2 class="text-5xl font-bold mb-6">Professional <span class="text-primary-500">3D Animation</span> Made Simple</h2> | |
| <p class="text-xl text-gray-400 max-w-2xl mx-auto mb-8"> | |
| Studio-quality animation tools in your browser. Focus on creativity while we handle the technical details. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition flex items-center"> | |
| <i data-feather="play" class="mr-2"></i> Start Animating | |
| </button> | |
| <button class="border border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white px-6 py-3 rounded-lg font-medium transition flex items-center"> | |
| <i data-feather="book-open" class="mr-2"></i> Learn More | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Animation Canvas --> | |
| <section class="mb-16"> | |
| <div class="bg-gray-800 p-1 rounded-xl mb-4"> | |
| <div class="animation-canvas bg-gray-900 w-full h-96 relative overflow-hidden"> | |
| <div id="animation-viewport" class="w-full h-full"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-4 rounded-lg font-bold text-lg transition flex items-center shadow-lg"> | |
| <i data-feather="terminal" class="mr-3"></i> Open Studio Workspace | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg transition tooltip"> | |
| <i data-feather="plus"></i> | |
| <span class="tooltip-text absolute bg-gray-800 text-white px-3 py-2 rounded-lg text-sm mt-2 opacity-0 invisible transition"> | |
| Add Model | |
| </span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg transition tooltip"> | |
| <i data-feather="keyframe"></i> | |
| <span class="tooltip-text absolute bg-gray-800 text-white px-3 py-2 rounded-lg text-sm mt-2 opacity-0 invisible transition"> | |
| Add Keyframe | |
| </span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg transition tooltip"> | |
| <i data-feather="camera"></i> | |
| <span class="tooltip-text absolute bg-gray-800 text-white px-3 py-2 rounded-lg text-sm mt-2 opacity-0 invisible transition"> | |
| Render Scene | |
| </span> | |
| </button> | |
| </div> | |
| <div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition flex items-center"> | |
| <i data-feather="code" class="mr-2"></i> Script Editor | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Powerful Animation Features</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition"> | |
| <div class="bg-primary-500 bg-opacity-20 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="cpu" class="text-primary-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Real-time Rendering</h3> | |
| <p class="text-gray-400">See changes instantly with our powerful WebGL renderer.</p> | |
| </div> | |
| <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition"> | |
| <div class="bg-primary-500 bg-opacity-20 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="layers" class="text-primary-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Scene Management</h3> | |
| <p class="text-gray-400">Organize complex projects with our hierarchical scene system.</p> | |
| </div> | |
| <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition"> | |
| <div class="bg-primary-500 bg-opacity-20 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="cloud" class="text-primary-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Cloud Collaboration</h3> | |
| <p class="text-gray-400">Work with team members in real-time from anywhere.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="pt-8 border-t border-gray-800"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i data-feather="film" class="text-primary-500 w-6 h-6"></i> | |
| <span class="text-lg font-bold">Animato</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-primary-500 transition"><i data-feather="github"></i></a> | |
| <a href="#" class="hover:text-primary-500 transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="hover:text-primary-500 transition"><i data-feather="instagram"></i></a> | |
| <a href="#" class="hover:text-primary-500 transition"><i data-feather="youtube"></i></a> | |
| </div> | |
| </div> | |
| <p class="text-center text-gray-500 mt-8 text-sm"> | |
| © 2023 PixelMotion Studio - Professional 3D Animation. All rights reserved. | |
| </p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: "#EF4444", | |
| backgroundColor: "#111827" | |
| }); | |
| // Initialize Three.js for animation preview | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Basic Three.js setup (placeholder for actual animation editor) | |
| const container = document.getElementById('animation-viewport'); | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| renderer.setSize(container.clientWidth, container.clientHeight); | |
| container.appendChild(renderer.domElement); | |
| // Add a simple cube for demonstration | |
| const geometry = new THREE.BoxGeometry(); | |
| const material = new THREE.MeshBasicMaterial({ color: 0xEF4444 }); | |
| const cube = new THREE.Mesh(geometry, material); | |
| scene.add(cube); | |
| camera.position.z = 3; | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| cube.rotation.x += 0.01; | |
| cube.rotation.y += 0.01; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resize | |
| window.addEventListener('resize', function() { | |
| camera.aspect = container.clientWidth / container.clientHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(container.clientWidth, container.clientHeight); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |