Meroar's picture
Create a simple homepage that displays rotating and translating cubes that warp into eachother based on mouse movement
1a62613 verified
raw
history blame contribute delete
911 Bytes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube Warp Homepage</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { margin: 0; padding: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body class="bg-black">
<div id="container"></div>
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none">
<div class="text-center text-white">
<h1 class="text-6xl font-bold mb-4">Cube Warp</h1>
<p class="text-xl opacity-80">Move your mouse to warp the cubes</p>
</div>
</div>
<script src="cube-warp.js"></script>
</body>
</html>