cursify

얼마전 awwwward에서 정말 멋진 웹사이트를 보게되었다.

커서 디자인이 아래와 같은 물결인데 투명한 홀로그램을 물결처럼 구현하는게 여간 복잡한 일이 아니다.

출처 : https://lusion.co/

어떻게 하신거에요~!! 하며 유사 물결을 만들고 폐기하고를 반복하며 고뇌의 시간을 보냄

hologram cursor javascript같은 구글링을 열심히 한지 2주째, 드디어 추천 트윗이 나에게 "cursify"의 존재를 알려주었다.

이미 다 아시는데 나만 뒷북친걸수도

https://cursify.vercel.app/components/fluid-cursor

---

cursify는 React , TypeScript , Tailwind CSS , Framer Motion을 사용하여 구축된 오픈 소스 애니메이션 커서 구성 요소이다.

get start 문서를 참고해 프로젝트에 적용해보자!

react, js 환경 기준으로 작성함

1. 패키지 인스톨

npm yarn pnpm bun

npm install framer-motion clsx tailwind-merge

2. 유틸 추가

/util.js

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

3. 훅 추가

1) hooks 폴더 생성, useFluidCursor.js를 만들고 복사한 코드를 붙여넣는다.

https://cursify.vercel.app/components/fluid-cursor

4. 커서 컴포넌트 생성

import { useEffect } from 'react';
import fluidCursor from '@/hooks/use-FluidCursor';
const FluidCursor = () => {
  useEffect(() => {
    fluidCursor();
  }, []);
  return (
    <div className="fixed top-0 left-0 z-2">
      <canvas id="fluid" className="w-screen h-screen" />
    </div>
  );
};
export default FluidCursor;

5. 에러 해결

실행하면 에러가 발생한다.

1271~86 라인이 스위치문인데 할당 표현식을 바꿔줘야한다.

위 내용을 아래처럼 바꾸면 동작함

case 0:
      r = v;
      g = t;
      b = p;

그리고 난 종속성 패키지를 설치하지 않았음에도 동작이 되길래 App.scss에 필요한 스타일만 추가했다.

.body{
	...
    cursor: none;
}

.fluid-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    pointer-events: none;

    #fluid {
        width: 100%;
        height: 100%;
    }
}

---

실행

Canvas Cursor Effect와 Fluid Cursor Effect를 사용해보았다.

현재 Fluid Cursor를 grayscale로 사용중! 아주 멋진 오픈소스다!!