커서 트레일 (빛 잔상)

제작 과정

한 줄 요약

포인터를 따라 발광 잔상이 부드럽게 따라오는 효과 입자를 뿌려 페이드하는 방식과 구슬이 앞을 lerp로 따라가는 스네이크 방식을 토글합니다.

이럴 때 필요해요

다크 히어로이벤트 페이지에 인터랙티브한 분위기를 더하고 싶을 때.

어떻게 동작하나

pointer/touch move마다 목표 좌표를 갱신한다.
RAF 루프에서 입자를 방출페이드하거나 체인을 lerp로 이동시킨다.
canvas는 DPR 보정 + lighter 합성으로 발광을 낸다.
설정은 ref에 미러링해 리렌더 0으로 읽는다.

놓치기 쉬운 것

입자 배열은 상한을 두어 무한 증가를 막는다.
좌표는 캔버스 rect 기준으로 매핑한다.
prefers-reduced-motion이면 정적 점으로 대체한다.

이런 곳에 써요

다크 테마 히어로/랜딩
이벤트프로모션 페이지

import type { Metadata } from "next"; import { CursorTrailDemo } from "./-components/CursorTrailDemo"; export const metadata: Metadata = { title: "커서 트레일 (데모)", description: "포인터를 따라 잔상이 부드럽게 따라오는 커서 트레일. canvas 파티클 페이드와 lerp 체인 두 가지 방식, DPR 보정 + requestAnimationFrame 구현.", robots: { index: false, follow: false }, }; export default function Page() { return <CursorTrailDemo />; }