Chroma Blur Transition

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useReducedMotion } from "motion/react";
5import { type ReactNode, useEffect, useRef, useState } from "react";
6 
7export interface ChromaBlurTransitionProps {
8  children: ReactNode;
9  className?: string;
10  duration?: number;
11  onRest?: () => void;
12  transitionKey: string | number;
13}
14 
15const DEFAULT_DURATION_MS = 1040;
16const MIDPOINT = 0.5;
17const MAX_DPR = 2;
18const VERTEX_SHADER =
19  "attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }";
20const FRAGMENT_SHADER = `
21precision mediump float;
22uniform vec2 uRes;
23uniform float uTime;
24uniform float uProgress;
25uniform float uAlpha;
26#define PI 3.14159265359
27 
28float hash(vec2 p){ return fract(sin(dot(p, vec2(41.0, 289.0))) * 45758.5453); }
29float noise(vec2 p){
30  vec2 i = floor(p);
31  vec2 f = fract(p);
32  float a = hash(i);
33  float b = hash(i + vec2(1.0, 0.0));
34  float c = hash(i + vec2(0.0, 1.0));
35  float d = hash(i + vec2(1.0, 1.0));
36  vec2 u = f * f * (3.0 - 2.0 * f);
37  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
38}
39 
40void main(){
41  vec2 uv = gl_FragCoord.xy / uRes;
42  float p = smoothstep(0.0, 1.0, uProgress);
43  float field = uv.x * 0.62 + uv.y * 0.38;
44  float n = noise(uv * 10.0 + vec2(uTime * 0.28, -uTime * 0.18));
45  float wave = sin((uv.y + n * 0.12) * 28.0 + uTime * 2.2) * 0.018;
46  float front = p * 1.42 - 0.2;
47  float d = field + wave - front;
48 
49  float curtain = exp(-d * d * 34.0);
50  float softGrain = noise(uv * 34.0 + uTime * 0.18) * 0.055;
51  float chroma = exp(-(d + 0.045) * (d + 0.045) * 52.0) + exp(-(d - 0.045) * (d - 0.045) * 52.0);
52  float exitFade = smoothstep(1.0, 0.74, p);
53  float entryFade = smoothstep(0.0, 0.16, p);
54 
55  vec3 brandPink = vec3(1.0, 0.32, 0.64);
56  vec3 champagne = vec3(1.0, 0.82, 0.56);
57  vec3 seafoam = vec3(0.52, 0.90, 0.78);
58  vec3 porcelain = vec3(1.0, 0.97, 0.90);
59  vec3 color = mix(brandPink, champagne, smoothstep(-0.18, 0.18, sin((uv.y + n) * PI * 2.0)));
60  color = mix(color, seafoam, smoothstep(0.2, 1.0, chroma) * 0.34);
61  color = mix(color, porcelain, 0.16);
62 
63  float alpha = (curtain * 0.72 + chroma * 0.18 + softGrain * curtain) * entryFade * exitFade * uAlpha;
64  gl_FragColor = vec4(color * alpha, clamp(alpha, 0.0, 0.86));
65}
66`;
67const STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
68 
69interface Playback {
70  cancel: () => void;
71}
72interface Controller {
73  destroy: () => void;
74  setAlpha: (alpha: number) => void;
75  setProgress: (progress: number) => void;
76}
77 
78// … truncated