Add cursor hiding effect for improved user experience
All checks were successful
Build and Deploy Blog / build-and-deploy-local (push) Successful in 43s
All checks were successful
Build and Deploy Blog / build-and-deploy-local (push) Successful in 43s
This commit is contained in:
@@ -59,3 +59,8 @@ body {
|
||||
.window-shadow {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hide-native-cursor,
|
||||
.hide-native-cursor * {
|
||||
cursor: none;
|
||||
}
|
||||
|
@@ -2,19 +2,39 @@
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
const HIDE_CURSOR_CLASS = "hide-native-cursor";
|
||||
const JANUARY = 0;
|
||||
const FEBRUARY = 1;
|
||||
const DECEMBER = 11;
|
||||
|
||||
export default function CursorEffect() {
|
||||
useEffect(() => {
|
||||
let cursor: any;
|
||||
let isMounted = true;
|
||||
|
||||
import("cursor-effects").then((mod) => {
|
||||
if (isMounted && mod?.trailingCursor) {
|
||||
const TrailingCursor = mod.trailingCursor as any;
|
||||
const currentMonth = new Date().getMonth();
|
||||
const isWinter =
|
||||
currentMonth === DECEMBER ||
|
||||
currentMonth === JANUARY ||
|
||||
currentMonth === FEBRUARY;
|
||||
|
||||
import("cursor-effects").then((effects) => {
|
||||
if (!isMounted) return;
|
||||
|
||||
if (!isWinter && effects?.trailingCursor) {
|
||||
document.body.classList.add(HIDE_CURSOR_CLASS);
|
||||
const TrailingCursor = effects.trailingCursor as any;
|
||||
cursor = new TrailingCursor();
|
||||
} else if (isWinter && effects?.snowflakeCursor) {
|
||||
document.body.classList.remove(HIDE_CURSOR_CLASS);
|
||||
const SnowflakeCursor = effects.snowflakeCursor as any;
|
||||
cursor = new SnowflakeCursor();
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
document.body.classList.remove(HIDE_CURSOR_CLASS);
|
||||
if (cursor && typeof cursor.destroy === "function") {
|
||||
cursor.destroy();
|
||||
}
|
||||
|
Reference in New Issue
Block a user