Aperture 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 ApertureBlurTransitionProps {
8  children: ReactNode;
9  className?: string;
10  duration?: number;
11  onRest?: () => void;
12  transitionKey: string | number;
13}
14 
15const DEFAULT_DURATION_MS = 760;
16const MIDPOINT = 0.48;
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(127.1, 311.7))) * 43758.5453); }
29 
30void main(){
31  vec2 uv = gl_FragCoord.xy / uRes;
32  vec2 aspect = vec2(uRes.x / uRes.y, 1.0);
33  vec2 p = (uv - 0.5) * aspect;
34  float r = length(p);
35  float a = atan(p.y, p.x);
36 
37  float progress = smoothstep(0.0, 1.0, uProgress);
38  float radius = mix(0.05, 0.82, progress);
39  float apertureNoise = sin(a * 8.0 + uTime * 0.9) * 0.018 + sin(a * 17.0 - uTime * 0.6) * 0.006;
40  float d = r - radius - apertureNoise;
41 
42  float exitFade = smoothstep(0.94, 0.58, progress);
43  float ring = exp(-d * d * 210.0) * exitFade;
44  float innerGlow = smoothstep(radius + 0.18, radius - 0.02, r) * smoothstep(0.0, 0.34, progress) * exitFade;
45  float outerFeather = smoothstep(radius + 0.22, radius - 0.04, r) * exitFade * 0.55;
46  float grain = hash(floor(uv * uRes / 3.0) + floor(uTime * 18.0)) * 0.045;
47 
48  vec3 champagne = vec3(1.0, 0.82, 0.56);
49  vec3 rose = vec3(1.0, 0.34, 0.62);
50  vec3 cyan = vec3(0.62, 0.92, 1.0);
51  vec3 color = mix(champagne, rose, smoothstep(-0.4, 0.4, sin(a * 2.0 + uTime * 0.7)));
52  color = mix(color, cyan, ring * 0.38 + smoothstep(0.74, 1.0, progress) * 0.18);
53 
54  float highlight = ring * (0.82 + grain) + innerGlow * 0.18 + outerFeather * 0.08;
55  float alpha = clamp(highlight * uAlpha, 0.0, 0.88);
56  gl_FragColor = vec4(color * alpha + vec3(1.0) * ring * 0.22 * uAlpha, alpha);
57}
58`;
59const STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
60 
61interface Playback {
62  cancel: () => void;
63}
64 
65interface Controller {
66  destroy: () => void;
67  getProgress: () => number;
68  setAlpha: (alpha: number) => void;
69  setProgress: (progress: number) => void;
70}
71 
72const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
73const easeOutCubic = (value: number) => 1 - (1 - value) ** 3;
74const easeInOutCubic = (value: number) =>
75// … truncated