51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T24db,"use client"; import { cn } from "@/lib/utils"; import { useReducedMotion } from "motion/react"; import { type ReactNode, useEffect, useRef, useState } from "react"; export interface ApertureBlurTransitionProps { children: ReactNode; className?: string; duration?: number; onRest?: () => void; transitionKey: string | number; } const DEFAULT_DURATION_MS = 760; const MIDPOINT = 0.48; const MAX_DPR = 2; const VERTEX_SHADER = "attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }"; const FRAGMENT_SHADER = ` precision mediump float; uniform vec2 uRes; uniform float uTime; uniform float uProgress; uniform float uAlpha; #define PI 3.14159265359 float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } void main(){ vec2 uv = gl_FragCoord.xy / uRes; vec2 aspect = vec2(uRes.x / uRes.y, 1.0); vec2 p = (uv - 0.5) * aspect; float r = length(p); float a = atan(p.y, p.x); float progress = smoothstep(0.0, 1.0, uProgress); float radius = mix(0.05, 0.82, progress); float apertureNoise = sin(a * 8.0 + uTime * 0.9) * 0.018 + sin(a * 17.0 - uTime * 0.6) * 0.006; float d = r - radius - apertureNoise; float exitFade = smoothstep(0.94, 0.58, progress); float ring = exp(-d * d * 210.0) * exitFade; float innerGlow = smoothstep(radius + 0.18, radius - 0.02, r) * smoothstep(0.0, 0.34, progress) * exitFade; float outerFeather = smoothstep(radius + 0.22, radius - 0.04, r) * exitFade * 0.55; float grain = hash(floor(uv * uRes / 3.0) + floor(uTime * 18.0)) * 0.045; vec3 champagne = vec3(1.0, 0.82, 0.56); vec3 rose = vec3(1.0, 0.34, 0.62); vec3 cyan = vec3(0.62, 0.92, 1.0); vec3 color = mix(champagne, rose, smoothstep(-0.4, 0.4, sin(a * 2.0 + uTime * 0.7))); color = mix(color, cyan, ring * 0.38 + smoothstep(0.74, 1.0, progress) * 0.18); float highlight = ring * (0.82 + grain) + innerGlow * 0.18 + outerFeather * 0.08; float alpha = clamp(highlight * uAlpha, 0.0, 0.88); gl_FragColor = vec4(color * alpha + vec3(1.0) * ring * 0.22 * uAlpha, alpha); } `; const STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]); interface Playback { cancel: () => void; } interface Controller { destroy: () => void; getProgress: () => number; setAlpha: (alpha: number) => void; setProgress: (progress: number) => void; } const clamp01 = (value: number) => Math.max(0, Math.min(1, value)); const easeOutCubic = (value: number) => 1 - (1 - value) ** 3; const easeInOutCubic = (value: number) => value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2; const compile = (gl: WebGLRenderingContext, type: number, source: string) => { const shader = gl.createShader(type); if (!shader) { return null; } gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { gl.deleteShader(shader); return null; } return shader; }; const resize = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => { const rect = canvas.getBoundingClientRect(); const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR); const width = Math.max(1, Math.round(rect.width * dpr)); const height = Math.max(1, Math.round(rect.height * dpr)); if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; } gl.viewport(0, 0, width, height); }; const createController = (canvas: HTMLCanvasElement): Controller | null => { const gl = canvas.getContext("webgl", { alpha: true, antialias: false, premultipliedAlpha: true, }); if (!gl) { return null; } const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER); const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER); const program = gl.createProgram(); if (!(vertex && fragment && program)) { return null; } gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program); gl.deleteShader(vertex); gl.deleteShader(fragment); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { gl.deleteProgram(program); return null; } // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook. gl.useProgram(program); const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, STRIP, gl.STATIC_DRAW); const position = gl.getAttribLocation(program, "a"); gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0); gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); const uRes = gl.getUniformLocation(program, "uRes"); const uTime = gl.getUniformLocation(program, "uTime"); const uProgress = gl.getUniformLocation(program, "uProgress"); const uAlpha = gl.getUniformLocation(program, "uAlpha"); const startedAt = performance.now(); let progress = 0; let alpha = 0; let frame = 0; let destroyed = false; const tick = () => { if (destroyed) { return; } resize(canvas, gl); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.uniform2f(uRes, canvas.width, canvas.height); gl.uniform1f(uTime, (performance.now() - startedAt) / 1000); gl.uniform1f(uProgress, progress); gl.uniform1f(uAlpha, alpha); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return { destroy: () => { destroyed = true; cancelAnimationFrame(frame); gl.clear(gl.COLOR_BUFFER_BIT); if (buffer) { gl.deleteBuffer(buffer); } gl.deleteProgram(program); }, getProgress: () => progress, setAlpha: (nextAlpha: number) => { alpha = clamp01(nextAlpha); }, setProgress: (nextProgress: number) => { progress = clamp01(nextProgress); }, }; }; const play = ( controller: Controller, duration: number, onMidpoint: () => void, onComplete: () => void ): Playback => { let frame = 0; let cancelled = false; let didSwap = false; const startedAt = performance.now(); controller.setAlpha(1); const advance = () => { if (cancelled) { return; } const raw = clamp01((performance.now() - startedAt) / duration); const progress = easeOutCubic(raw); controller.setProgress(progress); if (!(didSwap || progress < MIDPOINT)) { didSwap = true; onMidpoint(); } if (raw < 1) { frame = requestAnimationFrame(advance); return; } if (!didSwap) { onMidpoint(); } const fadeStartedAt = performance.now(); const fade = () => { if (cancelled) { return; } const fadeRaw = clamp01((performance.now() - fadeStartedAt) / 70); controller.setAlpha(1 - easeInOutCubic(fadeRaw)); if (fadeRaw < 1) { frame = requestAnimationFrame(fade); return; } controller.setAlpha(0); controller.setProgress(0); onComplete(); }; frame = requestAnimationFrame(fade); }; frame = requestAnimationFrame(advance); return { cancel: () => { cancelled = true; cancelAnimationFrame(frame); }, }; }; const ApertureBlurTransition = ({ children, className, duration = DEFAULT_DURATION_MS, onRest, transitionKey, }: ApertureBlurTransitionProps) => { const shouldReduceMotion = useReducedMotion(); const canvasRef = useRef(null); const controllerRef = useRef(null); const playbackRef = useRef(null); const previousKey = useRef(transitionKey); const [renderedChildren, setRenderedChildren] = useState(children); const [isActive, setIsActive] = useState(false); useEffect(() => { const canvas = canvasRef.current; if (!canvas) { return; } const controller = createController(canvas); controllerRef.current = controller; return () => { playbackRef.current?.cancel(); controller?.destroy(); controllerRef.current = null; }; }, []); useEffect(() => { if (previousKey.current === transitionKey) { setRenderedChildren(children); return; } previousKey.current = transitionKey; playbackRef.current?.cancel(); if (shouldReduceMotion) { setRenderedChildren(children); setIsActive(false); onRest?.(); return; } const controller = controllerRef.current; if (!controller) { setRenderedChildren(children); onRest?.(); return; } setIsActive(true); playbackRef.current = play( controller, duration, () => setRenderedChildren(children), () => { setIsActive(false); playbackRef.current = null; onRest?.(); } ); }, [children, duration, onRest, shouldReduceMotion, transitionKey]); return (

{renderedChildren}

); }; export default ApertureBlurTransition; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://smoothui.dev/r/aperture-blur-transition.json","proxyUrl":"https://shadcnregistry.com/r/smoothui/aperture-blur-transition","itemId":"@smoothui/aperture-blur-transition"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"index.tsx","content":"$54","type":"registry:ui","target":"components/smoothui/aperture-blur-transition/index.tsx"}]}]]}],"$L55"]}]

Aperture Blur Transition

Installation

Files

components

Styles