padhle - post migration

2026-09-15 04:08:55 -04:00
parent 534b51b41b
commit b2d8109019
509 changed files with 147378 additions and 303 deletions
@@ -0,0 +1,106 @@
+---
+name: light-leaks
+description: Light leak overlay effects for Remotion using lightLeak() from @remotion/effects.
+metadata:
+  tags: light-leaks, overlays, effects, transitions
+---
+
+## Light Leaks
+
+This only works from Remotion 4.0.500 and up. Use `npx remotion versions` to check your Remotion version and `npx remotion upgrade` to upgrade your Remotion version.
+
+Apply `lightLeak()` from `@remotion/effects/light-leak` to a canvas-based component such as `<Solid>`. Animate `progress` from `0` to `1`; the light leak reveals during the first half and retracts during the second half.
+
+Typically use it inside a `<TransitionSeries.Overlay>` to play over the cut point between two scenes. See the **transitions** rule for `<TransitionSeries>` and overlay usage.
+
+## Prerequisites
+
+```bash
+npx remotion add @remotion/effects
+```
+
+## Light leak overlay component
+
+Keep the `progress` calculation inline so it is editable in Remotion Studio:
+
+```tsx
+import {lightLeak} from '@remotion/effects/light-leak';
+import {interpolate, Solid, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const LightLeakOverlay: React.FC<{
+  seed?: number;
+  hueShift?: number;
+}> = ({seed = 0, hueShift = 0}) => {
+  const frame = useCurrentFrame();
+  const {durationInFrames, height, width} = useVideoConfig();
+
+  return (
+    <Solid
+      width={width}
+      height={height}
+      effects={[
+        lightLeak({
+          seed,
+          hueShift,
+          progress: interpolate(frame, [0, durationInFrames - 1], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          }),
+        }),
+      ]}
+    />
+  );
+};
+```
+
+## Basic usage with TransitionSeries
+
+```tsx
+import {TransitionSeries} from '@remotion/transitions';
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneA />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Overlay durationInFrames={30}>
+    <LightLeakOverlay />
+  </TransitionSeries.Overlay>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneB />
+  </TransitionSeries.Sequence>
+</TransitionSeries>;
+```
+
+## Options
+
+- `progress?` — controls the evolve/retract phase from `0` to `1`. Effects do not animate on their own, so drive it with `useCurrentFrame()` and `interpolate()`. Default: `0.5`.
+- `seed?` — determines the shape of the light leak pattern. Different seeds produce different patterns. Default: `0`.
+- `hueShift?` — rotates the hue in degrees (`0`–`360`). Default: `0` (yellow-to-orange). `120` = green, `240` = blue.
+- `disabled?` — skips the effect when `true`. Default: `false`.
+
+## Customizing the look
+
+```tsx
+// Blue-tinted light leak with a different pattern
+<LightLeakOverlay seed={5} hueShift={240} />;
+
+// Green-tinted light leak
+<LightLeakOverlay seed={2} hueShift={120} />;
+```
+
+## Standalone usage
+
+The overlay component can also be used outside of `<TransitionSeries>` as a decorative layer in any composition:
+
+```tsx
+import {AbsoluteFill} from 'remotion';
+
+const MyComp: React.FC = () => (
+  <AbsoluteFill>
+    <MyContent />
+    <LightLeakOverlay seed={3} />
+  </AbsoluteFill>
+);
+```
+
+`lightLeak()` uses WebGL2. Enable WebGL during rendering with `Config.setChromiumOpenGlRenderer("angle")`.