dsh-remotion 0.2.0 → 0.3.0

package/skills/remotion-markup/sfx.md

@@ -0,0 +1,51 @@
+---
+name: sfx
+description: Including sound effects
+metadata:
+  tags: sfx, sound, effect, audio
+---
+
+To include a sound effect, use the `<Audio>` tag:
+
+```tsx
+import { Audio } from "@remotion/sfx";
+
+<Audio src={"https://remotion.media/whoosh.wav"} />;
+```
+
+The following sound effects are available:
+
+- `https://remotion.media/whoosh.wav`
+- `https://remotion.media/whip.wav`
+- `https://remotion.media/page-turn.wav`
+- `https://remotion.media/switch.wav`
+- `https://remotion.media/mouse-click.wav`
+- `https://remotion.media/shutter-modern.wav`
+- `https://remotion.media/shutter-old.wav`
+- `https://remotion.media/ding.wav`
+- `https://remotion.media/bruh.wav`
+- `https://remotion.media/vine-boom.wav`
+- `https://remotion.media/windows-xp-error.wav`
+- `https://remotion.media/fah.wav`
+- `https://remotion.media/spongebob-fail.wav`
+- `https://remotion.media/omg-hell-nah.wav`
+- `https://remotion.media/price-is-right-fail.wav`
+- `https://remotion.media/romance-meme.wav`
+- `https://remotion.media/bone-crack.wav`
+- `https://remotion.media/anime-wow.wav`
+- `https://remotion.media/yippee.wav`
+- `https://remotion.media/loading-lag.wav`
+- `https://remotion.media/wilhelm-scream.wav`
+- `https://remotion.media/mac-quack.wav`
+- `https://remotion.media/skedaddle.wav`
+- `https://remotion.media/snapchat-notification.wav`
+- `https://remotion.media/nelly-ahh.wav`
+- `https://remotion.media/sanctuary-guardian-what.wav`
+- `https://remotion.media/minecraft-hurt.wav`
+- `https://remotion.media/oh-my-god-vine.wav`
+- `https://remotion.media/illuminati-confirmed.wav`
+- `https://remotion.media/dramatic-boomer.wav`
+- `https://remotion.media/triggered.wav`
+- `https://remotion.media/record-scratch.wav`
+
+For more sound effects, search the internet. A good resource is https://github.com/kapishdima/soundcn/tree/main/assets.

package/skills/remotion-markup/silence-detection.md

@@ -0,0 +1,71 @@
+---
+name: silence-detection
+description: Adaptive silence detection for video/audio files using FFmpeg loudnorm and silencedetect
+metadata:
+  tags: silence, detection, trimming, ffmpeg, loudnorm, audio
+---
+
+# Adaptive Silence Detection
+
+Detect silent segments in video or audio files.
+
+Requires FFmpeg — see [ffmpeg.md](./ffmpeg.md) for how to invoke it in Remotion projects.
+
+## Step 1: Measure loudness with `loudnorm`
+
+Use the `loudnorm` filter in JSON mode to get the EBU R128 integrated loudness and gating threshold for each file:
+
+```bash
+npx remotion ffmpeg -i public/video.mov -map 0:a -af loudnorm=print_format=json -f null /dev/null
+```
+
+As output you will get:
+- `input_i`: Integrated loudness (dB) — the overall perceived volume
+- `input_thresh`: EBU R128 gating threshold (dB) — the level below which audio is considered too quiet to count toward loudness measurement
+
+## Step 2: Detect silences using adaptive threshold
+
+Pass the `input_thresh` value from step 1 as the `noise` parameter to `silencedetect`:
+
+```bash
+npx remotion ffmpeg -i public/video.mov -map 0:a -af "silencedetect=noise=${THRESH}dB:d=0.5" -f null /dev/null
+```
+
+Parameters:
+- `noise`: The threshold below which audio is considered silent. Use `input_thresh` from step 1.
+- `d`: Minimum silence duration in seconds. `0.5` is a good default.
+
+## Interpreting the output
+
+The filter outputs pairs of `silence_start` and `silence_end` timestamps:
+
+```
+[silencedetect] silence_start: 0
+[silencedetect] silence_end: 2.241021 | silence_duration: 2.241021
+[silencedetect] silence_start: 38.77425
+[silencedetect] silence_end: 39.619604 | silence_duration: 0.845354
+```
+
+## Identifying leading and trailing silence
+
+- **Leading silence**: Consecutive silence segments starting at or near 0. If the first `silence_start` is > 0.5s, there is no leading silence.
+- **Trailing silence**: The last silence segment that extends to (or near) the end of the file. Compare the last `silence_end` with the file's total duration.
+
+When multiple silences are nearly contiguous at the start or end (gap < 0.2s), treat them as a single leading/trailing silence block.
+
+## Using with Remotion's `<Video>` component
+
+Apply the detected trim points using `trimBefore` and `trimAfter` (values are in frames):
+
+```tsx
+import { Video } from "@remotion/media";
+import { staticFile, useVideoConfig } from "remotion";
+
+const { fps } = useVideoConfig();
+
+<Video
+  src={staticFile("video.mov")}
+  trimBefore={Math.floor(leadingEnd * fps)}
+  trimAfter={Math.ceil(trailingStart * fps)}
+/>
+```

package/skills/remotion-markup/text-highlights.md

@@ -0,0 +1,56 @@
+---
+name: text-highlights
+description: Animated text highlights and hand-drawn annotations using @remotion/rough-notation.
+metadata:
+  tags: text, highlights, annotations, circles, rough-notation
+---
+
+# Text highlights
+
+Use `@remotion/rough-notation` to draw animated annotations around or behind text. It supports highlights, circles, underlines, strike-throughs, crossed-off text, boxes, and brackets.
+
+Docs: https://www.remotion.dev/docs/text-highlights
+
+Install the package using the same Remotion version as the project:
+
+```bash
+bunx remotion add @remotion/rough-notation
+```
+
+Choose the component that describes the annotation: `<Highlight>`, `<Circle>`, `<Underline>`, `<StrikeThrough>`, `<CrossedOff>`, `<Box>`, or `<Bracket>`. The component determines both the annotation style and whether it renders behind or on top of the text.
+
+Drive `progress` from `useCurrentFrame()` so the annotation is deterministic and synchronized with the video:
+
+```tsx
+import {Circle, Highlight} from '@remotion/rough-notation';
+import {interpolate, useCurrentFrame} from 'remotion';
+
+export const TextAnnotations: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  return (
+    <div style={{fontSize: 80}}>
+      This is{' '}
+      <Highlight
+        color="rgba(255, 236, 79, 0.62)"
+        progress={interpolate(frame, [15, 40], [0, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+        })}
+      >
+        important
+      </Highlight>
+      , and this is{' '}
+      <Circle color="#2563eb" progress={interpolate(frame, [15, 40], [0, 1], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      })}>
+        connected
+      </Circle>
+      .
+    </div>
+  );
+};
+```
+
+Keep `progress` inline, hardcoded and use `interpolate` for maximum [Studio interactivity](../remotion-interactivity/SKILL.md).

package/skills/remotion-markup/timing.md

@@ -0,0 +1,111 @@
+Drive motion with `interpolate()` over an explicit frame range. 
+To customize timing, use **`Easing.bezier`** or `Easing.spring`.
+
+A simple linear interpolation is done using the `interpolate` function.
+
+```ts title="Going from 0 to 1 over 0.3 seconds"
+import { interpolate } from "remotion";
+
+const opacity = interpolate(frame, [0, 0.3 * fps], [0, 1]);
+```
+
+By default, the values are not clamped, so the value can go outside the range [0, 1].  
+Here is how they can be clamped:
+
+```ts title="Going from 0 to 1 over 0.3 seconds with extrapolation"
+const opacity = interpolate(frame, [0, 0.3 * fps], [0, 1], {
+  extrapolateRight: "clamp",
+  extrapolateLeft: "clamp",
+});
+```
+
+## Studio-editable animation patterns
+
+When an animation should be editable in Remotion Studio, keep the `interpolate()` call directly in the `style` prop and prefer individual CSS transform properties:
+
+```tsx
+// 👍 Inline editable keyframes and transform shorthands
+style={{
+  scale: interpolate(frame, [0, 100], [0, 1]),
+  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
+  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
+}}
+
+// 👎 Hidden values and transform strings become computed in Studio
+const translateY = interpolate(frame, [0, 100], [0, 120]);
+const rotation = interpolate(frame, [0, 100], [0, 20]);
+
+style={{
+  transform: `translateY(${translateY}px) rotate(${rotation}deg)`,
+}}
+```
+
+Use `transform` strings only when individual CSS transform properties do not cover the effect, such as `skew()`, `perspective()`, or order-sensitive multi-transform chains.
+
+## Spring easing
+
+A nice push movement with no bounce:
+
+```ts
+import { interpolate, Easing } from "remotion";
+
+const opacity = interpolate(frame, [0, 0.3 * fps], [0, 1], {
+  easing: Easing.spring({damping: 200}),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+```
+
+## Bézier easing
+
+Pass values like you would to a CSS cubic-bezier function.
+
+```ts
+import { interpolate, Easing } from "remotion";
+
+const opacity = interpolate(frame, [0, 0.3 * fps], [0, 1], {
+  easing: Easing.bezier(0.16, 1, 0.3, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+```
+
+## Animating scale
+
+When animating scale, if the output is linear, the perceived scale would be smaller the larger the scale gets.  
+Use this option to compensate:
+
+```ts
+const scale = interpolate(frame, [0, 0.3 * fps], [0, 1], {
+  easing: Easing.bezier(0.16, 1, 0.3, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+  output: 'perceptual-scale' // <- Add this to scale animations
+});
+```
+
+## Multiple keyframes
+
+Add as many keyframes as you want. For multiple easings, pass an array with `n - 1` items:
+
+```ts
+const scale = interpolate(frame, [0, 1 * fps, 9 * fps, 10 * fps], [0, 1, 1, 0], {
+  easing: [Easing.bezier(0.16, 1, 0.3, 1), Easing.linear, Easing.spring({damping: 200})],
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+  output: 'perceptual-scale' // <- Add this to scale animations
+});
+```
+
+## Posterization
+
+You can intentionally reduce the frame rate for artistic reason. Use if it makes sense.
+
+```ts
+const scale = interpolate(frame, [0, 1 * fps], [0, 1], {
+  easing: Easing.bezier(0.16, 1, 0.3, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+  posterize: 3 // Only every 3rd frame is sampled
+});
+```

package/skills/remotion-markup/transitions.md

@@ -0,0 +1,239 @@
+---
+name: transitions
+description: Scene transitions and overlays for Remotion using TransitionSeries.
+metadata:
+  tags: transitions, overlays, fade, slide, wipe, scenes
+---
+
+## TransitionSeries
+
+`<TransitionSeries>` arranges scenes and supports two ways to enhance the cut point between them:
+
+- **Transitions** (`<TransitionSeries.Transition>`) — crossfade, slide, wipe, etc. between two scenes. Shortens the timeline because both scenes play simultaneously during the transition.
+- **Overlays** (`<TransitionSeries.Overlay>`) — render an effect (e.g. a light leak) on top of the cut point without shortening the timeline.
+
+Children are absolutely positioned.
+
+## Prerequisites
+
+```bash
+npx remotion add @remotion/transitions
+```
+
+## Transition example
+
+```tsx
+import { TransitionSeries, linearTiming } from "@remotion/transitions";
+import { fade } from "@remotion/transitions/fade";
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneA />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Transition
+    presentation={fade()}
+    timing={linearTiming({ durationInFrames: 15 })}
+  />
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneB />
+  </TransitionSeries.Sequence>
+</TransitionSeries>;
+```
+
+## Overlay example
+
+Any React component can be used as an overlay. For a ready-made effect, see the **light-leaks** rule.
+
+```tsx
+import {lightLeak} from '@remotion/effects/light-leak';
+import {TransitionSeries} from '@remotion/transitions';
+import {interpolate, Solid, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const LightLeakOverlay: React.FC = () => {
+  const frame = useCurrentFrame();
+  const {durationInFrames, height, width} = useVideoConfig();
+
+  return (
+    <Solid
+      width={width}
+      height={height}
+      effects={[
+        lightLeak({
+          progress: interpolate(frame, [0, durationInFrames - 1], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          }),
+        }),
+      ]}
+    />
+  );
+};
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneA />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Overlay durationInFrames={20}>
+    <LightLeakOverlay />
+  </TransitionSeries.Overlay>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneB />
+  </TransitionSeries.Sequence>
+</TransitionSeries>;
+```
+
+## Mixing transitions and overlays
+
+Transitions and overlays can coexist in the same `<TransitionSeries>`, but an overlay cannot be adjacent to a transition or another overlay.
+
+```tsx
+import {lightLeak} from '@remotion/effects/light-leak';
+import {TransitionSeries, linearTiming} from '@remotion/transitions';
+import {fade} from '@remotion/transitions/fade';
+import {interpolate, Solid, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const LightLeakOverlay: React.FC = () => {
+  const frame = useCurrentFrame();
+  const {durationInFrames, height, width} = useVideoConfig();
+
+  return (
+    <Solid
+      width={width}
+      height={height}
+      effects={[
+        lightLeak({
+          progress: interpolate(frame, [0, durationInFrames - 1], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          }),
+        }),
+      ]}
+    />
+  );
+};
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneA />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Overlay durationInFrames={30}>
+    <LightLeakOverlay />
+  </TransitionSeries.Overlay>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneB />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Transition
+    presentation={fade()}
+    timing={linearTiming({ durationInFrames: 15 })}
+  />
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneC />
+  </TransitionSeries.Sequence>
+</TransitionSeries>;
+```
+
+## Transition props
+
+`<TransitionSeries.Transition>` requires:
+
+- `presentation` — the visual effect (e.g. `fade()`, `slide()`, `wipe()`).
+- `timing` — controls speed and easing (e.g. `linearTiming()`, `springTiming()`).
+
+## Overlay props
+
+`<TransitionSeries.Overlay>` accepts:
+
+- `durationInFrames` — how long the overlay is visible (positive integer).
+- `offset?` — shifts the overlay relative to the cut point center. Positive = later, negative = earlier. Default: `0`.
+
+## Available transition types
+
+Import transitions from their respective modules:
+
+```tsx
+import { fade } from "@remotion/transitions/fade";
+import { slide } from "@remotion/transitions/slide";
+import { wipe } from "@remotion/transitions/wipe";
+import { flip } from "@remotion/transitions/flip";
+import { clockWipe } from "@remotion/transitions/clock-wipe";
+```
+
+## Slide transition with direction
+
+```tsx
+import { slide } from "@remotion/transitions/slide";
+
+<TransitionSeries.Transition
+  presentation={slide({ direction: "from-left" })}
+  timing={linearTiming({ durationInFrames: 20 })}
+/>;
+```
+
+Directions: `"from-left"`, `"from-right"`, `"from-top"`, `"from-bottom"`
+
+## Timing options
+
+```tsx
+import { linearTiming, springTiming } from "@remotion/transitions";
+
+// Linear timing - constant speed
+linearTiming({ durationInFrames: 20 });
+
+// Spring timing - organic motion
+springTiming({ config: { damping: 200 }, durationInFrames: 25 });
+```
+
+## Duration calculation
+
+Transitions overlap adjacent scenes, so the total composition length is **shorter** than the sum of all sequence durations. Overlays do **not** affect the total duration.
+
+For example, with two 60-frame sequences and a 15-frame transition:
+
+- Without transitions: `60 + 60 = 120` frames
+- With transition: `60 + 60 - 15 = 105` frames
+
+Adding an overlay between two other sequences does not change the total.
+
+### Getting the duration of a transition
+
+Use the `getDurationInFrames()` method on the timing object:
+
+```tsx
+import { linearTiming, springTiming } from "@remotion/transitions";
+
+const linearDuration = linearTiming({
+  durationInFrames: 20,
+}).getDurationInFrames({ fps: 30 });
+// Returns 20
+
+const springDuration = springTiming({
+  config: { damping: 200 },
+}).getDurationInFrames({ fps: 30 });
+// Returns calculated duration based on spring physics
+```
+
+For `springTiming` without an explicit `durationInFrames`, the duration depends on `fps` because it calculates when the spring animation settles.
+
+### Calculating total composition duration
+
+```tsx
+import { linearTiming } from "@remotion/transitions";
+
+const scene1Duration = 60;
+const scene2Duration = 60;
+const scene3Duration = 60;
+
+const timing1 = linearTiming({ durationInFrames: 15 });
+const timing2 = linearTiming({ durationInFrames: 20 });
+
+const transition1Duration = timing1.getDurationInFrames({ fps: 30 });
+const transition2Duration = timing2.getDurationInFrames({ fps: 30 });
+
+const totalDuration =
+  scene1Duration +
+  scene2Duration +
+  scene3Duration -
+  transition1Duration -
+  transition2Duration;
+// 60 + 60 + 60 - 15 - 20 = 145 frames
+```

package/skills/remotion-markup/video-editing.md

@@ -0,0 +1,90 @@
+Remotion can be used for bare-bones video editing in the Studio. Choose the source structure based on the editing behavior you want:
+
+- Use independently positioned clips when moving or resizing one clip should not affect any other clip.
+- Use ripple editing when changing one clip's duration should reposition every clip after it.
+
+Keep every editable clip as its own authored JSX node. Do not generate editable clips with `.map()` or another programmatic loop.
+
+## Independently positioned clips
+
+Place every `<Video>` directly in the composition and hardcode its timing props. `from={0}` may be omitted:
+
+```tsx
+<Video
+  src="https://remotion.media/video.mp4"
+  trimBefore={0}
+  durationInFrames={78}
+/>
+<Video
+  src="https://remotion.media/video.webm"
+  trimBefore={12}
+  from={78}
+  durationInFrames={66}
+/>
+<Video
+  src="https://remotion.media/video.mp4"
+  trimBefore={72}
+  from={144}
+  durationInFrames={90}
+/>
+<Video
+  src="https://remotion.media/video.webm"
+  trimBefore={58}
+  from={234}
+  durationInFrames={72}
+/>
+<Video
+  src="https://remotion.media/video.mp4"
+  trimBefore={180}
+  from={306}
+  durationInFrames={60}
+/>
+```
+
+- `from` is the clip's absolute start frame in its parent timeline.
+- `durationInFrames` is how many frames the clip remains visible.
+- `trimBefore` is how many source frames are skipped before playback begins.
+- Each `<Video>` must be a separate JSX node. Add a descriptive `name` when useful in the Studio timeline.
+- `from`, `durationInFrames`, and `trimBefore` must be hardcoded frame values. Do not compute them.
+- Import `<Video>` from `@remotion/media`.
+
+Moving or resizing one of these clips does not reposition later clips. Gaps and overlaps are therefore allowed.
+
+## Ripple editing with `TransitionSeries`
+
+“Ripple editing” is the standard video-editing term for changing one clip and automatically shifting everything after it.
+In Remotion, a `<TransitionSeries>` provides this sequential, cascading timing model while also allowing transitions between clips.
+
+Read [transitions.md](transitions.md) for transition types, timing options, installation instructions, and composition-duration calculation.
+
+Keep the markup like this:
+
+```tsx
+<TransitionSeries name="Video timeline">
+  <TransitionSeries.Sequence name="Clip 1" durationInFrames={39}>
+    <Video
+      src="https://remotion.media/video.mp4"
+      trimBefore={0}
+    />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Sequence name="Clip 2" durationInFrames={45}>
+    <Video
+      src="https://remotion.media/video.webm"
+      trimBefore={8}
+    />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Sequence name="Clip 3" durationInFrames={43}>
+    <Video
+      src="https://remotion.media/video.mp4"
+      trimBefore={60}
+    />
+  </TransitionSeries.Sequence>
+</TransitionSeries>
+```
+
+- The `<TransitionSeries.Sequence>` is the editable clip row in the Studio timeline.
+- Dragging its right edge changes `durationInFrames` and repositions every later sequence.
+- Do not set `from` on `<TransitionSeries.Sequence>`; the series calculates each start frame.
+- Hardcode all numeric values.
+- Do not programmatically create multiple `<TransitionSeries.Sequence>` (no `.map`). Each instance must be hard-coded.
+- Import `<Video>` from `@remotion/media`. Import `<TransitionSeries>` from `@remotion/transitions`. If needing to install: `npx remotion add @remotion/media @remotion/transitions`