누른 좌표에서 잉크가 번지는 리플 — 다중 동시 발생과 자동 정리.
한 줄 요약
버튼리스트카드를 누르면 누른 바로 그 좌표에서 원이 퍼졌다 사라지는 Material 잉크 리플입니다.
탭/클릭에 위치감 있는 피드백을 주고 싶을 때 버튼, 리스트 항목, 큰 타일 등 누를 수 있는 표면.
pointerdown 좌표에 리플 원을 생성한다.
표면을 덮도록 반지름을 계산해 scale+fade한다.
여러 리플을 동시에 쌓고 animationend에서 제거한다.
표면은 position:relative + overflow:hidden로 감싼다.
빠른 연타로 리플이 쌓일 때 정리를 빠뜨리지 않는다.
리플 지름은 클릭점에서 가장 먼 모서리까지로 계산한다.
prefers-reduced-motion이면 생성을 건너뛴다.
버튼리스트카드 탭 피드백
모바일 터치 영역
import type { Metadata } from "next";
import { RippleEffectDemo } from "./-components/RippleEffectDemo";
export const metadata: Metadata = {
title: "리플 이펙트 (데모)",
description:
"누른 좌표에서 잉크가 번지는 Material 스타일 클릭 리플. Pointer 이벤트로 마우스·터치 모두 지원하고 다중 리플이 동시에 터집니다.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<RippleEffectDemo />
</main>
);
}