Intent Through Motion
Mouse patterns reveal focus. Scroll depth shows commitment. Navigation adapts invisibly.
// Micro-interactions accumulate intent
document.addEventListener('mousemove', (e) => {
const target = document.elementFromPoint(e.clientX, e.clientY);
const content = target.textContent?.toLowerCase() || '';
// Weight by interaction type
if (content.includes('react')) interests.programming += 0.02;
if (content.includes('design')) interests.visual += 0.02;
trackGazeTime(target, Date.now());
});
Behavioral Accumulation
Small signals aggregate. Hover duration matters more than clicks. Scroll patterns reveal interest depth.
// Threshold-based revelation
function revealRelevantLinks() {
const peak = Math.max(...Object.values(interests));
if (peak > 0.5) {
materializeMenu(getDominantInterest());
}
}
function getDominantInterest() {
return Object.entries(interests)
.sort(([,a], [,b]) => b - a)[0][0];
}
Appearance Mechanics
Links emerge organically. Bounce suggests responsiveness. Glow implies intelligence.
// Physics-based entrance
const link = createElement('a');
link.style.cssText = `
opacity: 0;
transform: translateY(-20px) scale(0.8);
transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
backdrop-filter: blur(10px);
`;
setTimeout(() => {
link.style.opacity = '1';
link.style.transform = 'translateY(0) scale(1)';
}, 200);
Why It Works
Users assume coincidence. Feel understood without feeling watched. Permission-free personalization.
Built for my portfolio. Demonstrates behavioral intelligence without surveillance aesthetics.