Sunder Sonic Journey
<title>Sunder Sonic Journey</title>
<style>
body {
margin: 0;
background: linear-gradient(to top, #111, #444);
color: white;
font-family: sans-serif;
overflow: hidden;
}
#intro {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
font-size: 1.5em;
animation: fadeOut 5s forwards;
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
canvas {
position: absolute;
top: 0; left: 0;
}
</style>
</head>
<body>
<div id="intro">🎧 Please wear headphones first. Let the sunder begin…</div>
<canvas id="visual"></canvas>
<audio id="player" controls autoplay loop>
<source src="Greatshiv.MP4" type="audio/mpeg"> 👈 Replease With Your Audio File
Your browser does not support the audio element.
</audio>
<script>
const canvas = document.getElementById('visual');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function drawSymbolicWave() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);
for (let x = 0; x < canvas.width; x++) {
ctx.lineTo(x, canvas.height / 2 + Math.sin(x * 0.01 + Date.now() * 0.002) * 50);
}
ctx.strokeStyle = '#f0f';
ctx.lineWidth = 2;
ctx.stroke();
requestAnimationFrame(drawSymbolicWave);
}
drawSymbolicWave();
</script>
</body>
</html>
