super-embed:
<style>
body{
overflow-x: hidden;
}
.trail{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
min-height: 100vh;
width: 100vw;
z-index: -1000;
}
.star {
transform-style: preserve-3d;
width: 1px;
height: 1px;
position: absolute;
z-index: -9;
}
.star:before {
position: absolute;
content: "✦";
color: inherit;
inset: 0;
text-shadow: 0 0 0.8em #fff5;
}
</style>
<section class="trail"></section>
<script>
let xPosTrail=0, yPosTrail=0;
const trail = document.querySelector(".trail");
const sidebar = document.querySelector(".super-sidebar");
const vh = Math.max(document.documentElement.scrollHeight || 0, window.innerHeight || 0),
dist_to_draw = 50,
delay = 1000,
fsize = [
'1.1rem', '1.4rem', '.8rem', '1.7rem'
],
colors = [
'#39D0BA',
'#6B64F7',
'#D6FF62',
'#FF715B',
'#FFD9DA',
'#FFF275'
],
rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min,
selRand = (o) => o[rand(0, o.length -1)],
distanceTo = (xPosTrail, yPosTrail, x2, y2) =>
Math.sqrt((Math.pow(x2-xPosTrail,2))+(Math.pow(y2-yPosTrail,2))),
shouldDraw = (x, y) =>
(distanceTo(xPosTrail, yPosTrail, x, y) >= dist_to_draw),
addStr = (x, y) => {
const str = document.createElement("div");
str.innerHTML = '✦';
str.className = 'star';
str.style.top = `${y + rand(-20,20)}px`;
str.style.left = `${x-200}px`;
str.style.color = selRand(colors);
str.style.fontSize = selRand(fsize);
trail.appendChild(str);
const fs = 10 + 5 * parseFloat(getComputedStyle(str).fontSize);
str.animate({
translate: `0 ${(y+fs)>vh?vh-y:fs}px`,
opacity: 0,
transform: `rotateX(${rand(1, 500)}deg) rotateY(${rand(1, 500)}deg)`
}, {
duration: delay,
fill: 'forwards',
});
setTimeout(() => {
str.remove();
}, delay);
}
addEventListener("mousemove", (e) => {
const {clientX, pageY} = e;
if(shouldDraw(clientX, pageY)){
addStr(clientX, pageY);
xPosTrail = clientX;
yPosTrail = pageY;
}
});
</script>