Unicode random composition

index.html

<!-- Inspired by Baku89's VJ work -->
<!-- https://twitter.com/_baku89/status/1736420979583451474 -->
<h1 id="char">?</h1>
<div id="cursor"></div>
<span id="info">\u0000</div>

script.js

const el = document.getElementById('char');
const cursor = document.getElementById('cursor');

const speed = 0.03;

const clamp = (x, min, max) => Math.min(Math.max(x, min), max); 
const toRange = (x, min, max) => clamp(
    Math.round(x * (max - min) + min), min, max);
const mix = (a, b, t) => a * (1 - t) + b * t;

let x = 0.5, y = 0.5;
let tx = 0.5, ty = 0.5;

document.body.addEventListener('mousemove', (e) => {
  tx = e.clientX / window.innerWidth;
  ty = e.clientY / window.innerHeight;    
});

let skip = 0;
function loop() { 
  requestAnimationFrame(loop);
  
  x = mix(x, tx, speed);
  y = mix(y, ty, speed);
  cursor.style.left = `${x * window.innerWidth - 40}px`;
  cursor.style.top = `${y * window.innerHeight - 40}px`;  
  
  if (skip++ % 5 != 0) {
    return;
  }   

  // Switch unicode range mapping
  const cx = y < 0.25 ? toRange(x, 0x2E80, 0x2FD5) 
    : y < 0.5 ? toRange(x, 0x3400, 0x4DBF)
    : y < 0.75 ? toRange(x, 0x4E00, 0x9FFF)
    : toRange(x, 0xF900, 0xFA6A);
  
  try {
    el.innerText = String.fromCodePoint(cx);
    el.title = String.fromCodePoint(cx);
    info.innerText = `x: ${x.toFixed(2)}, y: ${y.toFixed(2)} -> U+${cx.toString(16).toUpperCase()}`;
  } catch {}   
}
loop();

style.css

* {  
  margin: 0;   
  background: black; 
  color: white;
  user-select: none;
  font-family: serif;
}

body {
  position: absolute;  
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
}

#char {
  font-size: 50vh;
  margin-top: -5vh;
}

#cursor {
  position: absolute;
  left: 50%;
  height: 50%;  
  width: 80px;
  height: 80px;  
  background: white;
  border-radius: 50%;
  mix-blend-mode: difference;
}

#info {
  position: absolute;
  top: 8px;
  left: 8px;  
  font-family: sans-serif;
}

unicode-random-composition.markdown

Unicode random composition

A Pen by Amagi on CodePen.

License.