Decay card
An image card whose edges are torn by noise, melting under the pointer and pulling itself back together.
Cloud studyPlate no. 2 · move the pointer
The edge of the print is torn by noise, the surface carries grain, and the pointer melts the paper before it pulls itself back together.
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 type CSSProperties,7 type PointerEvent as ReactPointerEvent,8 type ReactNode,9} from "react";10 11export type DecayCardScope = "window" | "card";12 13export type DecayCardProps = {14 image?: string;15 width?: number;16 height?: number;17 intensity?: number;18 sensitivity?: number;19 hoverDecay?: number;20 recovery?: number;21 idle?: number;22 grain?: number;23 detail?: number;24 pattern?: number;25 flow?: number;26 chroma?: number;27 travel?: number;28 tilt?: number;