:root { --bg:#02050c; --text:#edf4ff; --muted:#c2d0e7; --accent:#8fe8ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Avenir Next","Segoe UI",sans-serif; }
#scene { position:fixed; inset:0; }
.topbar { position:fixed; inset:0 0 auto 0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; background:rgba(0,0,0,.3); backdrop-filter: blur(8px); }
.topbar a { color:var(--accent); text-decoration:none; font-weight:700; }
button { border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.45rem .8rem; background:rgba(255,255,255,.07); color:var(--text); cursor:pointer; }
.overlay { position:relative; z-index:10; min-height:100vh; width:min(900px,92%); margin:0 auto; display:grid; align-content:center; text-align:center; gap:.7rem; }
.label { margin:0; color:var(--accent); letter-spacing:.1em; text-transform:uppercase; }
h1,p { margin:0; }
h1 { font-size: clamp(2rem, 7vw, 4rem); }
p { color:var(--muted); }
if (!window.MotionPreference) {
const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
const __listeners = new Set();
const MotionPreference = {
prefersReducedMotion() {
return __mql.matches;
},
setOverride(value) {
const reduced = Boolean(value);
document.documentElement.classList.toggle("reduced-motion", reduced);
window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
for (const listener of __listeners) {
try {
listener({ reduced, override: reduced, systemReduced: __mql.matches });
} catch {}
}
},
onChange(listener) {
__listeners.add(listener);
try {
listener({
reduced: __mql.matches,
override: null,
systemReduced: __mql.matches,
});
} catch {}
return () => __listeners.delete(listener);
},
getState() {
return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
},
};
window.MotionPreference = MotionPreference;
}
import * as THREE from "three";
const host = document.getElementById("scene");
const toggle = document.getElementById("toggleMotion");
let motionEnabled = !window.MotionPreference.prefersReducedMotion();
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x02040a);
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 9;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
host.appendChild(renderer.domElement);
const count = 3800;
const from = new Float32Array(count * 3);
const to = new Float32Array(count * 3);
const current = new Float32Array(count * 3);
for (let i = 0; i < count; i += 1) {
const i3 = i * 3;
from[i3] = (Math.random() - 0.5) * 5.5;
from[i3 + 1] = (Math.random() - 0.5) * 5.5;
from[i3 + 2] = (Math.random() - 0.5) * 5.5;
const u = Math.random() * 2 - 1;
const a = Math.random() * Math.PI * 2;
const r = 2.9;
const s = Math.sqrt(1 - u * u);
to[i3] = r * s * Math.cos(a);
to[i3 + 1] = r * u;
to[i3 + 2] = r * s * Math.sin(a);
current[i3] = from[i3];
current[i3 + 1] = from[i3 + 1];
current[i3 + 2] = from[i3 + 2];
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(current, 3));
const material = new THREE.PointsMaterial({ size: 0.06, color: 0x9adfff, transparent: true, opacity: 0.95, blending: THREE.AdditiveBlending, depthWrite: false });
const cloud = new THREE.Points(geometry, material);
scene.add(cloud);
scene.add(new THREE.AmbientLight(0xa2bfff, 0.42));
function setLabel() {
toggle.textContent = motionEnabled ? "Disable motion" : "Enable motion";
}
function animate(time) {
requestAnimationFrame(animate);
const t = motionEnabled ? (Math.sin(time * 0.0007) * 0.5 + 0.5) : 0;
const pos = geometry.attributes.position.array;
for (let i = 0; i < pos.length; i += 1) pos[i] = from[i] + (to[i] - from[i]) * t;
geometry.attributes.position.needsUpdate = true;
if (motionEnabled) {
cloud.rotation.y += 0.0025;
cloud.rotation.x += 0.0012;
}
renderer.render(scene, camera);
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
toggle.addEventListener("click", () => {
motionEnabled = !motionEnabled;
setLabel();
});
window.addEventListener("resize", onResize);
setLabel();
animate(0);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo 14 - Morphing Geometry</title>
<link rel="stylesheet" href="style.css" />
<script type="importmap">{"imports":{"gsap":"/vendor/gsap/index.js","gsap/ScrollTrigger":"/vendor/gsap/ScrollTrigger.js","gsap/SplitText":"/vendor/gsap/SplitText.js","gsap/Flip":"/vendor/gsap/Flip.js","gsap/ScrambleTextPlugin":"/vendor/gsap/ScrambleTextPlugin.js","gsap/TextPlugin":"/vendor/gsap/TextPlugin.js","gsap/all":"/vendor/gsap/all.js","gsap/":"/vendor/gsap/","lenis":"/vendor/lenis/dist/lenis.mjs","three":"/vendor/three/build/three.module.js","three/addons/":"/vendor/three/examples/jsm/"}}</script>
</head>
<body>
<header class="topbar">
<a href="../">Back to demos</a>
<button id="toggleMotion"></button>
</header>
<div id="scene"></div>
<section class="overlay">
<p class="label">Demo 14</p>
<h1>Morphing Geometry</h1>
<p>Point-cloud transition between cube and sphere volumes.</p>
</section>
<script type="module" src="script.js"></script>
</body>
</html>