Aperture Blur Transition

Renders a WebGL shader transition with cinematic blur effects. Behaves by animating a progress value to create a smooth aperture blur. Use when needing a visually rich, animated content transition.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/aperture-blur-transition

npx layro-cli add @educlopez/aperture-blur-transition

npx layro-cli add @educlopez/aperture-blur-transition

bunx layro-cli add @educlopez/aperture-blur-transition

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"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;
}