Ember Burn

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 EmberBurnProps = {
15  patches?: number;
16  edgeSoftness?: number;
17  contentBias?: number;
18  heat?: number;
19  glowColor?: string;
20  emberAmount?: number;
21};
22 
23const DEFAULTS = {
24  patches: 5,
25  edgeSoftness: 0.07,
26  contentBias: 0.6,
27  heat: 0.5,
28  glowColor: "#ff7a2f",
29  emberAmount: 0.5,
30};
31 
32function hexToRgb(hex: string): [number, number, number] {
33  const value = hex.replace("#", "");
34  const full =
35    value.length === 3
36      ? value
37          .split("")
38          .map((c) => c + c)
39          .join("")
40      : value;
41  const int = Number.parseInt(full, 16);
42  if (Number.isNaN(int)) {
43    return [1, 0.48, 0.18];
44  }
45  return [
46    ((int >> 16) & 255) / 255,
47    ((int >> 8) & 255) / 255,
48    (int & 255) / 255,
49  ];
50}
51 
52const FRAGMENT_SHADER = `#version 300 es
53precision highp float;
54 
55uniform sampler2D u_from;
56uniform sampler2D u_to;
57uniform float u_progress;
58uniform float u_aspect;
59uniform float u_patches;
60uniform float u_softness;
61uniform float u_content;
62uniform float u_heat;
63uniform vec3 u_glow;
64uniform float u_embers;
65 
66in vec2 v_uv;
67out vec4 outColor;
68 
69const float EMBER_GRID = 110.0;
70 
71float hash(vec2 p) {
72  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
73}
74 
75float noise(vec2 p) {
76  vec2 i = floor(p);
77  vec2 f = fract(p);
78  vec2 u = f * f * (3.0 - 2.0 * f);
79  return mix(
80    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
81    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
82    u.y
83  );
84}
85 
86float fbm(vec2 p) {
87  float sum = 0.0;
88  float amp = 0.5;
89  for (int i = 0; i < 5; i++) {
90    sum += noise(p) * amp;
91    p *= 2.03;
92    amp *= 0.5;
93  }
94  return sum * 1.032;
95}
96 
97float luma(vec3 c) {
98  return dot(c, vec3(0.2126, 0.7152, 0.0722));
99}
100 
101void main() {
102  vec2 skewed = vec2(v_uv.x * u_aspect, v_uv.y);
103  float alive =
104    smoothstep(0.0, 0.06, u_progress) * smoothstep(1.0, 0.94, u_progress);
105 
106  float brightness = luma(texture(u_from, v_uv).rgb);
107  float field = clamp(
108    clamp(fbm(skewed * u_patches), 0.0, 1.0) *
109      (1.0 - u_content * brightness * 0.9),
110    0.0,
111    1.0
112  );
113 
114  float soft = max(u_softness, 0.004);
115  float margin = soft * 3.0 + 0.02;
116  float front = mix(-margin, 1.0 + margin, pow(u_progress, 1.2));
117// … truncated