CursorRippleShader (react/cursor-ripple-shader.tsx)

React component rendering a cursor ripple shader effect over an image.

// Source: https://github.com/MengTo/Skills | License: MIT | Copyright 2026 Meng To
// Provided via justclaw.it.com; keep this notice with the code.
"use client";

import { CursorRipples, ImageTexture, Shader } from "shaders/react";

type CursorRippleShaderProps = {
  imageUrl: string;
  ready: boolean;
  onReady: () => void;
  className?: string;
};

export default function CursorRippleShader({
  imageUrl,
  ready,
  onReady,
  className = "cursor-ripple-shader",
}: CursorRippleShaderProps) {
  return (
    <Shader
      className={`${className}${ready ? " is-ready" : ""}`}
      toneMapping="aces"
      disableTelemetry
      onReady={onReady}
      data-cursor-ripple-shader
      aria-hidden="true"
    >
      <ImageTexture url={imageUrl} objectFit="cover" />
      <CursorRipples decay=

... (truncated -- full source via MCP)