Ripple Transition

1"use client";
2 
3import {
4  WebGLErrorBoundary,
5  WebGLFallback,
6} from "./webgl-error-boundary";
7import { cn } from "@/lib/utils";
8import {
9  animate,
10  type AnimationPlaybackControls,
11  type Easing,
12} from "framer-motion";
13import * as React from "react";
14 
15export interface RippleTransitionProps extends Omit<
16  React.HTMLAttributes<HTMLDivElement>,
17  "children" | "onClick"
18> {
19  images?: readonly string[];
20  duration?: number;
21  ease?: Easing;
22  autoPlay?: boolean;
23  autoPlayInterval?: number;
24  autoPlayOrigin?: "center" | "random";
25  waveSpeed?: number;
26  sigma?: number;
27  waveFreq?: number;
28  pushAmt?: number;
29  caStrength?: number;
30  glow?: number;
31  noiseWarp?: number;
32  pinch?: boolean;
33  borderRadius?: number;
34  background?: string;
35  label?: string;
36}
37 
38const sampleImages = [
39  "https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&q=85&w=1800",
40  "https://images.unsplash.com/photo-1473773508845-188df298d2d1?auto=format&fit=crop&q=85&w=1800",
41  "https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&q=85&w=1800",
42] as const;
43 
44type RippleSettings = {
45  waveSpeed: number;
46  sigma: number;
47  waveFreq: number;
48  pushAmt: number;
49  caStrength: number;
50  glow: number;
51  noiseWarp: number;
52  pinch: boolean;
53};
54 
55type Picture = { element: HTMLImageElement; width: number; height: number };
56 
57const vertexSource = `
58attribute vec2 position;
59varying vec2 uv;
60void main() {
61  uv = vec2(position.x * .5 + .5, .5 - position.y * .5);
62  gl_Position = vec4(position, 0., 1.);
63}`;
64 
65const fragmentSource = `
66precision highp float;
67varying vec2 uv;
68uniform sampler2D fromImage;
69uniform sampler2D toImage;
70uniform vec2 viewport;
71uniform vec2 fromSize;
72uniform vec2 toSize;
73uniform vec2 origin;
74uniform float phase;
75uniform float speed;
76uniform float thickness;
77uniform float frequency;
78uniform float displacement;
79uniform float chroma;
80uniform float highlight;
81uniform float roughness;
82uniform float pinchAmount;
83 
84float random2(vec2 p) {
85  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
86}
87 
88float smoothNoise(vec2 p) {
89  vec2 cell = floor(p);
90  vec2 local = fract(p);
91  local = local * local * (3. - 2. * local);
92  return mix(
93    mix(random2(cell), random2(cell + vec2(1., 0.)), local.x),
94    mix(random2(cell + vec2(0., 1.)), random2(cell + vec2(1.)), local.x),
95    local.y
96  );
97}
98 
99float layeredNoise(vec2 p) {
100  return smoothNoise(p) * .57 +
101    smoothNoise(p * 2.07 + 4.3) * .29 +
102    smoothNoise(p * 4.21 - 2.8) * .14;
103}
104 
105// … truncated