mdrROEK

index.html

<i class="cursor"></i>

<div class="container">
	<h1>My Cursor</h1>
	<p>Move your mouse — See article</p>

	<div class="gallery">
		<a href="https://siamak.me" class="gallery--item">
			<img class="gallery--img link" src="https://source.unsplash.com/q99oeAG46BY/400x288/" />
		</a>
		<a href="https://siamak.me" class="gallery--item">
			<img class="gallery--img link" src="https://source.unsplash.com/CuEvrPd3NYc/402x600/" />
		</a>
		<a href="https://siamak.me" class="gallery--item">
			<img class="gallery--img link" src="https://source.unsplash.com/ruJm3dBXCqw/403x600/" />
		</a>
		<a href="https://siamak.me" class="gallery--item">
			<img class="gallery--img link" src="https://source.unsplash.com/75EFpyXu3Wg/405x600/" />
		</a>
		<a href="https://siamak.me" class="gallery--item">
			<img class="gallery--img link" src="https://source.unsplash.com/-HxIhfS_dUk/406x600/" />
		</a>
		<a href="https://siamak.me" class="gallery--item">
			<img class="gallery--img link" src="https://source.unsplash.com/iNrBHgUBDSg/401x288/" />
		</a>
	</div>
</div>

<div class="socials">
	<a href="https://www.instagram.com/onlysiamak/">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram">
			<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
			<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
			<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
		</svg></a>
	<a href="https://dribbble.com/siamak">

		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dribbble">
			<circle cx="12" cy="12" r="10"></circle>
			<path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"></path>
		</svg>
	</a>
</div>

mdrroek.markdown

mdrROEK

A Pen by Siamak on CodePen.

License.

script.babel

import animejs from "https://cdn.skypack.dev/[email protected]";

function move({ clientX: x, clientY: y, target }) {
	let scale = 1;

	if (target && target.classList && target.classList.contains("link")) {
		scale = 1.75;
	}

	const cursorElement = animejs({
		targets: ".cursor",
		translateX: Math.floor(x),
		translateY: Math.floor(y),
		rotate: x / -8 + 135,
		scale,
		easing: "easeOutElastic(1, 1)"
	});
}

window.addEventListener("mousemove", move);

window.onload = () =>
	animejs({
		targets: ".cursor",
		opacity: 1
	});

style.scss

* {
	cursor: none;
}
.cursor {
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	background-color: #fff;
	pointer-events: none;
	border-radius: 50% 100% 100% 100%;
	z-index: 9999999;
	mix-blend-mode: difference;
	opacity: 0;
}

// DEMO
html,
body {
	padding: 0;
	margin: 2.5vh 0;
	color: #28282e;
	min-height: 100vh;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
		Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	background: #fff;
}

* {
	box-sizing: border-box;
}

h1 {
	font-size: 4vh;
	margin-bottom: 0;
}

p {
	margin-bottom: 3vh;
	opacity: 0.7;
	text-transform: uppercase;
}

.container {
	width: 60rem;
	margin: 0 auto;
	max-width: 100%;
	padding: 0 1rem;
}
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-gap: 1rem;
}

.gallery--item {
	display: block;
	
	&:first-of-type {
		grid-column: span 2;
	}
	
	&:last-of-type {
		grid-column: span 2;
	}
}

.gallery--img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 33vh;
	max-height: 300px;
	border-radius: 10px;
	object-fit: cover;
	background: #292935;
	transition: 0.4s ease-in-out 0.1s;
	box-shadow: 0 0px 12px rgba(0, 0, 0, 0);
	&:hover {
		transform: translateY(-4px);
		box-shadow: 0 2px 48px -2px rgba(0, 0, 0, 0.3);
	}
}

.socials {
	position: fixed;
	left: 16px;
	bottom: 8px;
	z-index: 1;
	
	a {
		&[href*=dribbble] {
			color: #EA4C89;
		}
		&[href*=instagram] {
			color: #282b2b;
		}
	}
	
	svg {
		width: 2rem;
		height: 2rem;
		margin-right: 0.5rem;
	}
}

styles

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;900&amp;display=swap" rel="stylesheet" />

not working

idk why