Thoughtful
Digital Experiences
I thrive on turning complex challenges into sleek, intuitive solutions.
I thrive on turning complex challenges into sleek, intuitive solutions.
Visualising LIFT: Hero Concept for a Web3 Agency
Product design
I transform ideas into digital products, focusing on user needs, functionality, and visual appeal.
Ui/ux
I create intuitive interfaces and seamless user experiences that are engaging and easy to navigate.
Branding
I craft unique brand identities that effectively convey your vision and resonate with your audience.
web development
I build responsive, dynamic websites in Webflow, enhancing your online presence and user experience.
I'm Driven by Creation
I’ve always had a natural drive to create and share ideas that resonate.
I Adapt to Change
I’m open-minded and eager to embrace tools that challenge and push my creative boundaries.
I’m Energised by Ideas
I’m looking for teams who value creativity, innovation, and fun as much as I do.
Back to Top
script>
const bg = document.querySelector('.bg-elements');
let targetX = 50;
let targetY = 50;
let currentX = 50;
let currentY = 50;
// Throttle the mousemove event handler
let lastMoveTime = 0;
const moveInterval = 50; // 16ms (about 60fps)
document.addEventListener('mousemove', (e) => {
const now = Date.now();
if (now - lastMoveTime > moveInterval) {
lastMoveTime = now;
targetX = (e.clientX / window.innerWidth) * 100;
targetY = (e.clientY / window.innerHeight) * 100;
}
});
// Variable to hold the animation frame ID (for scroll control)
let rafId;
// Pause animation during scroll
let isScrolling;
window.addEventListener('scroll', () => {
cancelAnimationFrame(rafId);
clearTimeout(isScrolling);
isScrolling = setTimeout(() => {
animate(); // Restart animation after a brief delay
}, 150); // Adjust delay to your preference
});
function animate() {
currentX += (targetX - currentX) * 0.3;
currentY += (targetY - currentY) * 0.3;
const mask = `radial-gradient(
circle at ${currentX}% ${currentY}%,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.8) 5%,
rgba(255, 255, 255, 0.5) 10%,
rgba(255, 255, 255, 0.2) 15%,
rgba(255, 255, 255, 0) 20%
)`;
bg.style.maskImage = mask;
bg.style.webkitMaskImage = mask;
rafId = requestAnimationFrame(animate); // Save the frame ID
}
animate(); // Start animation
