Logo
function closeMenu() { document.getElementById("menu-toggle").checked = false; }

3D MOTION
DESIGNER

(function () { const wrap = document.getElementById("wkButtonWrap"); const button = document.getElementById("wkYoutubeButton"); const magneticStrength = 0.25; const magneticRadius = 100; let currentX = 0; let currentY = 0; function resetButton() { button.style.transform = "translate(0px, 0px)"; } wrap.addEventListener("mousemove", function (e) { const rect = wrap.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const mouseX = e.clientX; const mouseY = e.clientY; const distanceX = mouseX - centerX; const distanceY = mouseY - centerY; const distance = Math.sqrt( distanceX * distanceX + distanceY * distanceY ); if (distance < magneticRadius) { currentX = distanceX * magneticStrength; currentY = distanceY * magneticStrength; button.style.transform = "translate(" + currentX + "px, " + currentY + "px)"; } else { resetButton(); } }); wrap.addEventListener("mouseleave", function () { resetButton(); }); })();

VISUAL
GENERALIST

3D MOTION

ALBUM ARTS

Kavindu Kaushalya aka, @whitekraw on the internet. A creative with a vision for the intersection of music and visuals.I help brands grow their online and live audience by producing engaging visual content through design, motion graphics and 3d animation that generates thousands of views/sales. I’m always eager to discuss potential collaborations and explore the creative possibilities that lie within your music.My tools of choice are Maxon Cinema 4D, OTOY Octane Render, Adobe Suit, and Davinci Resolve.

Send Me a Message

Follow Me!

Final Render
Wireframe
Wireframe
Final Render
(function () { const container = document.getElementById("wkReveal"); const wireframe = document.getElementById("wkWireframe"); const divider = document.getElementById("wkDivider"); const handle = document.getElementById("wkHandle"); let dragging = false; function moveSlider(clientX) { const rect = container.getBoundingClientRect(); let position = ((clientX - rect.left) / rect.width) * 100; position = Math.max(0, Math.min(100, position)); wireframe.style.width = position + "%"; divider.style.left = position + "%"; handle.style.left = position + "%"; } /* Start dragging */ container.addEventListener("pointerdown", function (e) { dragging = true; container.setPointerCapture(e.pointerId); moveSlider(e.clientX); }); /* Drag */ container.addEventListener("pointermove", function (e) { if (!dragging) return; moveSlider(e.clientX); }); /* Stop dragging */ container.addEventListener("pointerup", function (e) { dragging = false; try { container.releasePointerCapture(e.pointerId); } catch (err) {} }); container.addEventListener("pointercancel", function () { dragging = false; }); /* Also allow simple hover movement */ container.addEventListener("pointermove", function (e) { if (!dragging) { moveSlider(e.clientX); } }); })();

Thanks for reaching out to me!I'll get back to you ASAP.@whitekraw