CRT Screen

1"use client";
2 
3import type React from "react";
4import { AbsoluteFill } from "remotion";
5import {
6  type CanvasFilterProps,
7  makeCanvasFilter,
8  makeFilterShader,
9} from "@/lib/remocn/canvas-presentation";
10 
11export type CrtScreenProps = {
12  curvature?: number;
13  scanlines?: number;
14  maskScale?: number;
15  vignette?: number;
16};
17 
18const DEFAULTS = {
19  curvature: 1,
20  scanlines: 1,
21  maskScale: 2,
22  vignette: 1,
23};
24 
25const FRAGMENT_SHADER = `#version 300 es
26precision highp float;
27 
28uniform sampler2D u_scene;
29uniform float u_frame;
30uniform float u_curvature;
31uniform float u_scanlines;
32uniform float u_mask_scale;
33uniform float u_vignette;
34 
35in vec2 v_uv;
36out vec4 outColor;
37 
38const float PI = 3.141592653589793;
39const float SCAN_LINES = 240.0;
40 
41vec2 warpTube(vec2 uv, float k) {
42  vec2 p = uv * 2.0 - 1.0;
43  float x2 = p.x * p.x;
44  float y2 = p.y * p.y;
45  p.x *= 1.0 + k * 0.11 * y2;
46  p.y *= 1.0 + k * 0.17 * x2;
47  p /= 1.0 + k * 0.045;
48  return p * 0.5 + 0.5;
49}
50 
51vec3 phosphorMask(float x, float scale) {
52  float sub = mod(floor(x / max(scale, 1.0)), 3.0);
53  vec3 lit = vec3(
54    step(sub, 0.5),
55    step(0.5, sub) * step(sub, 1.5),
56    step(1.5, sub)
57  );
58  return mix(vec3(0.34), vec3(1.0), lit);
59}
60 
61void main() {
62  vec2 uv = warpTube(v_uv, u_curvature);
63 
64  vec2 edge =
65    smoothstep(vec2(0.0), vec2(0.005), uv) *
66    smoothstep(vec2(0.0), vec2(0.005), 1.0 - uv);
67  float inside = edge.x * edge.y;
68 
69  vec4 base = texture(u_scene, uv);
70 
71  vec3 spread = vec3(0.0);
72  for (int i = -2; i <= 2; i++) {
73    spread += texture(u_scene, uv + vec2(float(i) * 0.0018, 0.0)).rgb;
74  }
75  spread /= 5.0;
76  vec3 bloom = max(spread - 0.5, vec3(0.0));
77 
78  vec3 color = base.rgb;
79  color *= phosphorMask(gl_FragCoord.x, u_mask_scale);
80  color += bloom * 0.75;
81 
82  float scan = mix(1.0, 0.5 + 0.5 * cos(uv.y * SCAN_LINES * PI * 2.0), 0.55);
83  color *= mix(1.0, scan, clamp(u_scanlines, 0.0, 1.5));
84 
85  vec2 vc = uv * 2.0 - 1.0;
86  float radius = length(vc * vec2(0.86, 1.0));
87  color *= mix(1.0, smoothstep(1.6, 0.35, radius), clamp(u_vignette, 0.0, 1.5));
88 
89  color *= 1.0 + 0.012 * sin(u_frame * PI / 30.0);
90  color *= inside;
91 
92  outColor = vec4(clamp(color, 0.0, 1.0), max(base.a, 1.0 - inside));
93}`;
94 
95const shader = makeFilterShader<CrtScreenProps>(
96  FRAGMENT_SHADER,
97  ({ gl, uniform, passedProps }) => {
98    const {
99      curvature = DEFAULTS.curvature,
100      scanlines = DEFAULTS.scanlines,
101      maskScale = DEFAULTS.maskScale,
102      vignette = DEFAULTS.vignette,
103    } = passedProps;
104// … truncated