El problema del cursor per defecte
El cursor del navegador és el primer element interactiu que veu l'usuari. En una web de disseny premium, deixar el cursor per defecte és com posar mobiliari d'IKEA en un apartament de disseny.
L'enfocament: icosaedre mòrfic
Usem un `IcosahedronGeometry` amb `detail=4` (1280 cares) i apliquem una funció de soroll multi-octava als vèrtexs per obtenir un efecte orgànic.
const geo = new THREE.IcosahedronGeometry(1, 4);
useFrame(() => {
const pos = geo.attributes.position;
for (let i = 0; i < pos.count; i++) {
const x = orig[i*3], y = orig[i*3+1], z = orig[i*3+2];
const noise = Math.sin(x*2.2 + t) * Math.cos(y*1.8 + t*0.7);
pos.setXYZ(i, x*(1+noise*0.3), y*(1+noise*0.3), z*(1+noise*0.3));
}
pos.needsUpdate = true;
});Tracking del ratolí sense setState
La clau és usar `useRef` per al tracking, mai `useState`. El re-render per cada moviment del ratolí arruïna el rendiment.
const mouseRef = useRef({ x: 0, y: 0 });
document.addEventListener('mousemove', e => {
mouseRef.current = {
x: (e.clientX / window.innerWidth) * 2 - 1,
y: -((e.clientY / window.innerHeight) * 2 - 1)
};
});El resultat
Un cursor que respira, reacciona i acompanya l'usuari per tota la web sense impacte perceptible en el rendiment.