Shader Seam

$ pnpm dlx shadcn@latest add @remocn/shader-seam

Usage

shaderSeam() reveals a stationary shader across the frame, exchanges the scenes while it is fully opaque, then dissolves it along its own brightness and a soft organic texture. Dark areas disappear first; luminous folds linger briefly. The shader stays at its original position, rotation and scale throughout. The default material is the original @remocn OpenShaders shader, including its colored silk field and halftone dots.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { shaderSeam } from "@/components/remocn/shader-seam";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={108}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 60 })}
      presentation={shaderSeam({ softness: 0.18, detail: 0.65 })}
    />
    <TransitionSeries.Sequence durationInFrames={108}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

The shader and dissolve use WebGL2. The scenes remain ordinary React layers; they switch beneath the opaque material, so no HTML capture or experimental browser flag is needed. The shader is local and adds no network request or extra package. Give each scene its own background when you want an opaque cut. Transparent areas reveal the composition backdrop. WebGL2 is required; unavailable WebGL or invalid shader code produces an explicit render error.

Props

Use another OpenShaders material

Open a profile in Explore and select Copy code → React · WebGL. Copy the exported FIELD_SHADER string and, if present, RARITY_SHADER into a local module. Preserve the source attribution. The transition uses the GLSL strings directly; it does not run the exported component's animation loop.

import type { OpenShaderSource } from "@/components/remocn/shader-seam";
import { FIELD_SHADER, RARITY_SHADER } from "./my-openshader";
 
const material: OpenShaderSource = {
  field: FIELD_SHADER,
  postprocess: RARITY_SHADER, // Omit for a plain field.
};
 
const transition = shaderSeam({ shader: material, softness: 0.2 });

This adapter supports a self-contained WebGL2 field with OpenShaders' standard uniforms (iResolution, iTime, background colors and uLightMode) and an optional postprocessing pass reading tScene. It renders in dark mode with a neutral tilt. Exports needing extra textures, such as the ASCII glyph atlas, need an additional adapter and are rejected with a named error. WebGPU source and arbitrary profile URLs are not accepted as GLSL.

Use linearTiming to supply the transition clock. Appearance, opaque scene exchange and dissolution are built into the presentation. The dissolve texture is static and shader time comes from progress and duration, so seeking to the same frame reproduces the same result.