Displacement

1"use client";
2 
3import type {
4  TransitionPresentation,
5  TransitionPresentationComponentProps,
6} from "@remotion/transitions";
7import type React from "react";
8import { AbsoluteFill } from "remotion";
9import {
10  makeCanvasPresentation,
11  makeSceneShader,
12} from "@/lib/remocn/canvas-presentation";
13 
14export type DisplacementProps = {
15  grid?: number;
16  cellAspect?: number;
17  shift?: number;
18  aberration?: number;
19  grain?: number;
20  stagger?: number;
21};
22 
23const DEFAULTS = {
24  grid: 60,
25  cellAspect: 1,
26  shift: 1,
27  aberration: 1,
28  grain: 0.5,
29  stagger: 0.45,
30};
31 
32const FRAGMENT_SHADER = `#version 300 es
33precision highp float;
34 
35uniform sampler2D u_from;
36uniform sampler2D u_to;
37uniform float u_progress;
38uniform float u_aspect;
39uniform vec2 u_cells;
40uniform float u_shift;
41uniform float u_aberration;
42uniform float u_grain;
43uniform float u_stagger;
44 
45in vec2 v_uv;
46out vec4 outColor;
47 
48const float PI = 3.141592653589793;
49 
50float hash(vec2 p) {
51  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
52}
53 
54void main() {
55  vec2 cell = floor(v_uv * u_cells);
56  float h1 = hash(cell);
57  float h2 = hash(cell + 7.3);
58  float h3 = hash(cell + 13.1);
59 
60  float delay = h3 * u_stagger;
61  float phase =
62    clamp((u_progress - delay) / max(1.0 - u_stagger, 0.1), 0.0, 1.0);
63  float shear = sin(phase * PI);
64 
65  vec2 aim = vec2((h1 - 0.5) * 2.0, (h2 - 0.5) * 0.7);
66  vec2 dir = aim / max(length(aim), 0.0001);
67  vec2 slide = dir * shear * u_shift * 1.4;
68  vec2 off = slide / u_cells;
69  vec2 fringe = off * u_aberration * 0.35;
70 
71  float swap = smoothstep(0.34, 0.66, phase);
72 
73  vec4 mid = mix(
74    texture(u_from, v_uv - off),
75    texture(u_to, v_uv - off),
76    swap
77  );
78  float red = mix(
79    texture(u_from, v_uv - off - fringe).r,
80    texture(u_to, v_uv - off - fringe).r,
81    swap
82  );
83  float blue = mix(
84    texture(u_from, v_uv - off + fringe).b,
85    texture(u_to, v_uv - off + fringe).b,
86    swap
87  );
88 
89  vec4 col = vec4(red, mid.g, blue, mid.a);
90 
91  float tick = floor(u_progress * 30.0);
92  float speck =
93    hash(floor(v_uv * vec2(u_aspect, 1.0) * 460.0) + tick * 1.7) - 0.5;
94  col.rgb += vec3(speck * u_grain * shear * 0.5) * col.a;
95  col.rgb *= 1.0 - 0.12 * shear;
96 
97  outColor = col;
98}`;
99 
100const shader = makeSceneShader<DisplacementProps>(
101  FRAGMENT_SHADER,
102  ({ gl, uniform, width, height, passedProps }) => {
103    const {
104      grid = DEFAULTS.grid,
105      cellAspect = DEFAULTS.cellAspect,
106      shift = DEFAULTS.shift,
107      aberration = DEFAULTS.aberration,
108      grain = DEFAULTS.grain,
109// … truncated