Prism Sweep Transition

Renders a WebGL prism sweep effect for route transitions. It animates a colored light field across the screen based on direction and tone settings. Use it to create smooth visual transitions between views.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/prism-sweep-transition

npx layro-cli add @educlopez/prism-sweep-transition

npx layro-cli add @educlopez/prism-sweep-transition

bunx layro-cli add @educlopez/prism-sweep-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,
  type RefObject,
  useEffect,
  useRef,
  useState,
} from "react";

export type PrismSweepDirection = "left" | "right" | "up" | "down";
export type PrismSweepTone = "prism" | "chroma" | "aperture" | "beam";