<div id="container"></div>
<div class="vignette"></div>
<button id="infoBtn">
<span>Coded Constellations</span>
</button>
<div class="sidebar">
<input type="range" id="particleSlider" />
<input type="checkbox" id="audioCheckbox" />
</div>
body {
background: #000000;
overflow: hidden;
background-image: radial-gradient(#080808, #000);
}
.modal-content {
background: rgba(0,0,0,0.7);
backdrop-filter: blur(10px);
transition: transform 0.4s;
}
.logo-text {
font-family: 'Playfair Display';
background: linear-gradient(white, gray);
-webkit-background-clip: text;
}
function makeParticles(count) {
const geo = new THREE.BufferGeometry();
const vertexShader = `
uniform float time;
uniform float uAudio; // Input reattività audio
void main() {
// Movimento caotico + respiro
vec3 p = position;
p *= (1.0 + sin(time) * 0.1);
// ... calcoli noise ...
gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
}
`;
const mat = new THREE.ShaderMaterial({
uniforms: { time: { value: 0 }, uAudio: { value: 0 } },
vertexShader: vertexShader,
fragmentShader: fragmentShader
});
return new THREE.Points(geo, mat);
}
function animate() {
requestAnimationFrame(animate);
particles.material.uniforms.time.value = clock.getElapsedTime();
composer.render();
}