Cursor Image Trail
Images spawn along the cursor and fade out, classic awwwards hero.
MOVE
your cursor
How to use it
- Paste the HTML where the hero styles should appear. Include the script tags at the top once per page.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Cursor Image Trail · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<div class="jouw-container">
<div class="cit-wrap"><h2 class="cit-title">MOVE<br><span>your cursor</span></h2></div>
</div>/* Cursor Image Trail · NedDev · eigen werk. */
.cit-stage{position:relative;width:100%;height:100%;background:#fff;overflow:hidden;cursor:none}
.cit-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cit-title{margin:0;font:800 clamp(34px,9vw,84px)/.92 'Boldonse','Switzer',sans-serif;letter-spacing:-.03em;color:#0a0a0a;text-align:center}
.cit-title span{color:#F5480F;font-weight:400;font-size:.42em;letter-spacing:0}
.cit-img{position:absolute;width:130px;height:90px;border-radius:8px;will-change:transform,opacity;pointer-events:none;background-size:cover;opacity:0;transform:translate(-50%,-50%) scale(.5)}
.cit-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#F5480F;mix-blend-mode:difference;transform:translate(-50%,-50%);pointer-events:none;z-index:5}// Cursor Image Trail · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root.classList.add('cit-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var hues=[18,200,140,330,48,270];
var imgs=hues.map(function(h){return 'data:image/svg+xml,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="130" height="90"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl('+h+',70%,55%)"/><stop offset="1" stop-color="hsl('+((h+40)%360)+',75%,40%)"/></linearGradient></defs><rect width="130" height="90" fill="url(#g)"/></svg>');});
var dot=document.createElement('div');dot.className='cit-dot';root.appendChild(dot);var i=0,last=0,lx=0,ly=0;
root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();var x=e.clientX-r.left,y=e.clientY-r.top;dot.style.left=x+'px';dot.style.top=y+'px';if(reduce)return;var dist=Math.hypot(x-lx,y-ly);var now=performance.now();if(dist<48||now-last<60)return;last=now;lx=x;ly=y;var el=document.createElement('div');el.className='cit-img';el.style.backgroundImage='url("'+imgs[i++%imgs.length]+'")';el.style.left=x+'px';el.style.top=y+'px';var rot=(Math.random()*16-8);root.appendChild(el);
if(window.gsap){gsap.timeline({onComplete:function(){el.remove();}}).to(el,{opacity:1,scale:1,rotation:rot,duration:.35,ease:'power3.out'}).to(el,{opacity:0,scale:.85,y:'+=22',duration:.6,ease:'power2.in'},'+=0.25');}else{var an=el.animate([{opacity:0,transform:'translate(-50%,-50%) scale(.5)'},{opacity:1,transform:'translate(-50%,-50%) scale(1) rotate('+rot+'deg)',offset:.3},{opacity:0,transform:'translate(-50%,-40%) scale(.85)'}],{duration:1100,easing:'ease-out'});an.onfinish=function(){el.remove();};}});
root.addEventListener('pointerleave',function(){dot.style.opacity='0';});root.addEventListener('pointerenter',function(){dot.style.opacity='1';});
}
init(document.querySelector('.jouw-container'));More hero styles
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →