Shader Reveal Luma Transition

Shaders 11

About

A WebGL shader transition wrapper that reveals swapped content with a luminance-driven displacement effect, useful for animating between images or views on a key change.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shader Reveal Luma Transition to your project and fits it to your theme.

Code

How Shader Reveal Luma Transition is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import ShaderRevealLumaTransition from "@/components/ui/shader-reveal-luma-transition";
import { useState } from "react";

const SLIDES = [
  {
    key: 0,
    from: "#f97316",
    to: "#ec4899",
    label: "One",
  },
  {
    key: 1,
    from: "#06b6d4",
    to: "#6366f1",
    label: "Two",
  },
  {
    key: 2,
    from: "#22c55e",
    to: "#eab308",
    label: "Three",
  },
];

export default function ShaderRevealLumaTransitionDemo() {
  const [index, setIndex] = useState(0);
  const slide = SLIDES[index % SLIDES.length];

  return (
    <div className="flex w-full h-screen items-center justify-center">
      <div className="flex flex-col items-center gap-4">
        <ShaderRevealLumaTransition
          className="h-72 w-72"
          transitionKey={slide.key}
        >
          <div
            className="flex h-72 w-72 items-center justify-center text-4xl font-semibold text-white"
            style={{
              background: `linear-gradient(135deg, ${slide.from}, ${slide.to})`,
            }}
          >
            {slide.label}
          </div>
        </ShaderRevealLumaTransition>
        <button
          className="rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
          onClick={() => setIndex((current) => current + 1)}
          type="button"
        >
          Next
        </button>
      </div>
    </div>
  );
}