daemora 1.0.0-alpha.0

package/crew/video-editor/rules/sequencing.md

@@ -0,0 +1,118 @@
+---
+name: sequencing
+description: Sequencing patterns for Remotion - delay, trim, limit duration of items
+metadata:
+  tags: sequence, series, timing, delay, trim
+---
+
+Use `<Sequence>` to delay when an element appears in the timeline.
+
+```tsx
+import { Sequence } from "remotion";
+
+const {fps} = useVideoConfig();
+
+<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
+  <Title />
+</Sequence>
+<Sequence from={2 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
+  <Subtitle />
+</Sequence>
+```
+
+This will by default wrap the component in an absolute fill element.  
+If the items should not be wrapped, use the `layout` prop:
+
+```tsx
+<Sequence layout="none">
+  <Title />
+</Sequence>
+```
+
+## Premounting
+
+This loads the component in the timeline before it is actually played.  
+Always premount any `<Sequence>`!
+
+```tsx
+<Sequence premountFor={1 * fps}>
+  <Title />
+</Sequence>
+```
+
+## Series
+
+Use `<Series>` when elements should play one after another without overlap.
+
+```tsx
+import { Series } from "remotion";
+
+<Series>
+  <Series.Sequence durationInFrames={45}>
+    <Intro />
+  </Series.Sequence>
+  <Series.Sequence durationInFrames={60}>
+    <MainContent />
+  </Series.Sequence>
+  <Series.Sequence durationInFrames={30}>
+    <Outro />
+  </Series.Sequence>
+</Series>;
+```
+
+Same as with `<Sequence>`, the items will be wrapped in an absolute fill element by default when using `<Series.Sequence>`, unless the `layout` prop is set to `none`.
+
+### Series with overlaps
+
+Use negative offset for overlapping sequences:
+
+```tsx
+<Series>
+  <Series.Sequence durationInFrames={60}>
+    <SceneA />
+  </Series.Sequence>
+  <Series.Sequence offset={-15} durationInFrames={60}>
+    {/* Starts 15 frames before SceneA ends */}
+    <SceneB />
+  </Series.Sequence>
+</Series>
+```
+
+## Frame References Inside Sequences
+
+Inside a Sequence, `useCurrentFrame()` returns the local frame (starting from 0):
+
+```tsx
+<Sequence from={60} durationInFrames={30}>
+  <MyComponent />
+  {/* Inside MyComponent, useCurrentFrame() returns 0-29, not 60-89 */}
+</Sequence>
+```
+
+## Nested Sequences
+
+Sequences can be nested for complex timing:
+
+```tsx
+<Sequence from={0} durationInFrames={120}>
+  <Background />
+  <Sequence from={15} durationInFrames={90} layout="none">
+    <Title />
+  </Sequence>
+  <Sequence from={45} durationInFrames={60} layout="none">
+    <Subtitle />
+  </Sequence>
+</Sequence>
+```
+
+## Nesting compositions within another
+
+To add a composition within another composition, you can use the `<Sequence>` component with a `width` and `height` prop to specify the size of the composition.
+
+```tsx
+<AbsoluteFill>
+  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
+    <CompositionComponent />
+  </Sequence>
+</AbsoluteFill>
+```

package/crew/video-editor/rules/sfx.md

@@ -0,0 +1,30 @@
+---
+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`
+
+For more sound effects, search the internet. A good resource is https://github.com/kapishdima/soundcn/tree/main/assets.

package/crew/video-editor/rules/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/crew/video-editor/rules/subtitles.md

@@ -0,0 +1,36 @@
+---
+name: subtitles
+description: subtitles and caption rules
+metadata:
+  tags: subtitles, captions, remotion, json
+---
+
+All captions must be processed in JSON. The captions must use the `Caption` type which is the following:
+
+```ts
+import type { Caption } from "@remotion/captions";
+```
+
+This is the definition:
+
+```ts
+type Caption = {
+  text: string;
+  startMs: number;
+  endMs: number;
+  timestampMs: number | null;
+  confidence: number | null;
+};
+```
+
+## Generating captions
+
+To transcribe video and audio files to generate captions, load the [./transcribe-captions.md](./transcribe-captions.md) file for more instructions.
+
+## Displaying captions
+
+To display captions in your video, load the [./display-captions.md](./display-captions.md) file for more instructions.
+
+## Importing captions
+
+To import captions from a .srt file, load the [./import-srt-captions.md](./import-srt-captions.md) file for more instructions.

package/crew/video-editor/rules/tailwind.md

@@ -0,0 +1,11 @@
+---
+name: tailwind
+description: Using TailwindCSS in Remotion.
+metadata:
+---
+
+You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.
+
+Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
+
+Tailwind must be installed and enabled first in a Remotion project - fetch https://www.remotion.dev/docs/tailwind using WebFetch for instructions.

package/crew/video-editor/rules/text-animations.md

@@ -0,0 +1,20 @@
+---
+name: text-animations
+description: Typography and text animation patterns for Remotion.
+metadata:
+  tags: typography, text, typewriter, highlighter ken
+---
+
+## Text animations
+
+Based on `useCurrentFrame()`, reduce the string character by character to create a typewriter effect.
+
+## Typewriter Effect
+
+See [Typewriter](assets/text-animations-typewriter.tsx) for an advanced example with a blinking cursor and a pause after the first sentence.
+
+Always use string slicing for typewriter effects. Never use per-character opacity.
+
+## Word Highlighting
+
+See [Word Highlight](assets/text-animations-word-highlight.tsx) for an example for how a word highlight is animated, like with a highlighter pen.

package/crew/video-editor/rules/theme-switching.md

@@ -0,0 +1,103 @@
+---
+name: theme-switching
+description: Dark/light theme toggle animations with in-place cross-fade
+metadata:
+  tags: theme, dark-mode, light-mode, toggle, cross-fade, ui-demo
+---
+
+A theme toggle animation should look like a real app flipping its palette: same content, same positions, only colors change. The common mistake is to render two entirely different layouts and cross-fade between them — the content appears to morph, which never happens in a real app.
+
+## The rule
+
+**One component, parameterized by theme. Render it twice.** Do not write separate `<DarkDashboard />` and `<LightDashboard />`.
+
+## Palette helper
+
+Collect every theme-dependent color into a single object keyed by theme:
+
+```tsx
+type Theme = 'dark' | 'light';
+
+const getPalette = (theme: Theme) => {
+  const dark = theme === 'dark';
+  return {
+    bg:          dark ? '#05070f' : 'linear-gradient(180deg,#f6f7fb,#eef1f8)',
+    text:        dark ? '#ffffff' : '#0a0e1f',
+    textMid:     dark ? 'rgba(255,255,255,0.62)' : 'rgba(10,14,31,0.58)',
+    cardBg:      dark ? 'rgba(255,255,255,0.04)' : '#ffffff',
+    cardBorder:  dark ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(10,14,31,0.06)',
+    cardShadow:  dark ? 'inset 0 1px 0 rgba(255,255,255,0.04)' : '0 20px 50px rgba(10,14,31,0.08)',
+    innerBg:     dark ? 'rgba(255,255,255,0.05)' : '#f5f7fc',
+    innerBorder: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(10,14,31,0.05)',
+  };
+};
+```
+
+Put every color that differs between themes here. Anything you forget will flash wrong during the transition.
+
+## Parameterized component
+
+```tsx
+const Dashboard = ({ theme, frame, progress }: { theme: Theme; frame: number; progress: number }) => {
+  const p = getPalette(theme);
+  return (
+    <div style={{ background: p.bg, color: p.text /* ... */ }}>
+      <h1 style={{ color: p.text }}>Analytics</h1>
+      <div style={{ background: p.cardBg, border: p.cardBorder, boxShadow: p.cardShadow }}>
+        {/* ... */}
+      </div>
+    </div>
+  );
+};
+```
+
+Data values (`$128.4k`, `42%`) can also vary by theme if you want the numbers to update along with the palette — the dashboard feels "alive" instead of a static snapshot being recolored. Keep the *layout* identical regardless.
+
+## Cross-fade
+
+Render the component twice, with opposing opacities:
+
+```tsx
+const themeFlip = interpolate(frame, [FLIP_START, FLIP_END], [0, 1], {
+  easing: Easing.inOut(Easing.cubic),
+  extrapolateLeft: 'clamp',
+  extrapolateRight: 'clamp',
+});
+
+return (
+  <>
+    <div style={{ position: 'absolute', inset: 0, opacity: 1 - themeFlip }}>
+      <Dashboard theme="dark" frame={frame} progress={dashProgress} />
+    </div>
+    <div style={{ position: 'absolute', inset: 0, opacity: themeFlip }}>
+      <Dashboard theme="light" frame={frame} progress={dashProgress} />
+    </div>
+  </>
+);
+```
+
+`Easing.inOut(Easing.cubic)` gives a natural flip. Duration of 15–25 frames feels right — faster looks glitchy, slower looks like a slow dissolve. Do **not** slide, wipe, or circular-reveal between themes; those transitions draw attention away from the content.
+
+## Accent colors that work on both backgrounds
+
+Bar charts, progress tracks, and highlights often use gradients. If you use white in a gradient (`linear-gradient(180deg,#00d4ff,#ffffff)`), it disappears on a white background during the light theme. Pick accents that read on both:
+
+- **Purple** `#7c3aed`
+- **Cyan** `#00d4ff`
+- **Pink** `#ec4899`
+
+All three have enough saturation to stand out on both dark navy and off-white backgrounds. Avoid pure white and near-black as accent endpoints.
+
+## Toggle button placement
+
+If you're also animating a toggle UI (pill + thumb), render the toggle **outside** both cross-faded layers, so it doesn't fade with the theme — it stays put while the background flips underneath it. The toggle's own appearance (track color, thumb position) is driven by the same `themeFlip` value:
+
+```tsx
+<ToggleButton flip={themeFlip} /* ... */ />
+```
+
+Inside `ToggleButton`, stack two track backgrounds with opposing opacities, and interpolate the thumb's `left` position from `0` → `1`.
+
+## Verification
+
+After building, render a still at the midpoint of the flip (`frame = (FLIP_START + FLIP_END) / 2`). Both dashboards should be visible at 50% opacity and every piece of text, every card, every chart should be in the **exact same position**. If anything shifts, your layouts diverged — fix the component, don't tweak the cross-fade.

package/crew/video-editor/rules/timing.md

@@ -0,0 +1,136 @@
+---
+name: timing
+description: Interpolation and timing in Remotion—prefer interpolate with Bézier easing; springs as a specialized option
+metadata:
+  tags: easing, bezier, interpolation, spring, timing
+---
+
+Drive motion with `interpolate()` over explicit frame range. To customize timing, use **`Easing.bezier`**. The four parameters are the same as CSS `cubic-bezier(x1, y1, x2, y2)`.
+
+A simple linear interpolation is done using the `interpolate` function.
+
+```ts title="Going from 0 to 1 over 100 frames"
+import { interpolate } from "remotion";
+
+const opacity = interpolate(frame, [0, 100], [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 100 frames with extrapolation"
+const opacity = interpolate(frame, [0, 100], [0, 1], {
+  extrapolateRight: "clamp",
+  extrapolateLeft: "clamp",
+});
+```
+
+## Bézier easing
+
+Use `Easing.bezier(x1, y1, x2, y2)` inside the `interpolate` options object. The curve is identical in spirit to CSS animations and transitions, which helps when you are stealing timing from the web or from a designer’s spec.
+
+```ts
+import { interpolate, Easing } from "remotion";
+
+const opacity = interpolate(frame, [0, 60], [0, 1], {
+  easing: Easing.bezier(0.16, 1, 0.3, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+```
+
+### Examples (copy-paste curves)
+
+**1. Crisp UI entrance (strong ease-out, no overshoot)** — slows nicely into the rest value; similar to many system “deceleration” curves.
+
+```tsx
+const enter = interpolate(frame, [0, 45], [0, 1], {
+  easing: Easing.bezier(0.16, 1, 0.3, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+```
+
+**2. Editorial / slow fade (balanced ease-in-out)** — symmetric acceleration and deceleration over a hold-friendly move.
+
+```tsx
+const progress = interpolate(frame, [0, 90], [0, 1], {
+  easing: Easing.bezier(0.45, 0, 0.55, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+```
+
+**3. Playful overshoot (control point y > 1)** — a little past the target then settles; use sparingly for emphasis.
+
+```tsx
+const pop = interpolate(frame, [0, 30], [0, 1], {
+  easing: Easing.bezier(0.34, 1.56, 0.64, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+```
+
+## Preset easings (`Easing.in` / `Easing.out` / named curves)
+
+Easing can be added to the `interpolate` function without a custom cubic:
+
+```ts
+import { interpolate, Easing } from "remotion";
+
+const value1 = interpolate(frame, [0, 100], [0, 1], {
+  easing: Easing.inOut(Easing.cubic),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+```
+
+The default easing is `Easing.linear`.  
+Convexities:
+
+- `Easing.in` — starting slow and accelerating
+- `Easing.out` — starting fast and slowing down
+- `Easing.inOut`
+
+Named curves (from most linear to most curved):
+
+- `Easing.quad`
+- `Easing.cubic` (good default when you do not need a custom cubic)
+- `Easing.sin`
+- `Easing.exp`
+- `Easing.circle`
+
+### Easing direction for enter/exit animations
+
+Use `Easing.out` for enter animations (starts fast, decelerates into place) and `Easing.in` for exit animations (starts slow, accelerates away). This feels natural because elements arrive with momentum and leave with gravity. When you need a specific curve from design, prefer a single `Easing.bezier(...)` instead of stacking presets.
+
+## Composing interpolations
+
+When multiple properties share the same timing (e.g. a slide-in panel and a video shift), avoid duplicating the full interpolation for each property. Instead, create a single normalized progress value (0 to 1) and derive each property from it:
+
+```tsx
+const slideIn = interpolate(
+  frame,
+  [slideInStart, slideInStart + slideInDuration],
+  [0, 1],
+  {
+    easing: Easing.bezier(0.22, 1, 0.36, 1),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  },
+);
+const slideOut = interpolate(
+  frame,
+  [slideOutStart, slideOutStart + slideOutDuration],
+  [0, 1],
+  { easing: Easing.in(Easing.cubic), extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+);
+const progress = slideIn - slideOut;
+
+// Derive multiple properties from the same progress
+const overlayX = interpolate(progress, [0, 1], [100, 0]);
+const videoX = interpolate(progress, [0, 1], [0, -20]);
+const opacity = interpolate(progress, [0, 1], [0, 1]);
+```
+
+The key idea: separate **timing** (when and how fast) from **mapping** (what values to animate between).

package/crew/video-editor/rules/transcribe-captions.md

@@ -0,0 +1,70 @@
+---
+name: transcribe-captions
+description: Transcribing audio to generate captions in Remotion
+metadata:
+  tags: captions, transcribe, whisper, audio, speech-to-text
+---
+
+# Transcribing audio
+
+To transcribe audio to generate captions in Remotion, you can use the [`transcribe()`](https://www.remotion.dev/docs/install-whisper-cpp/transcribe) function from the [`@remotion/install-whisper-cpp`](https://www.remotion.dev/docs/install-whisper-cpp) package.
+
+## Prerequisites
+
+First, the @remotion/install-whisper-cpp package needs to be installed.
+If it is not installed, use the following command:
+
+```bash
+npx remotion add @remotion/install-whisper-cpp
+```
+
+## Transcribing
+
+Make a Node.js script to download Whisper.cpp and a model, and transcribe the audio.
+
+```ts
+import path from "path";
+import {
+  downloadWhisperModel,
+  installWhisperCpp,
+  transcribe,
+  toCaptions,
+} from "@remotion/install-whisper-cpp";
+import fs from "fs";
+
+const to = path.join(process.cwd(), "whisper.cpp");
+
+await installWhisperCpp({
+  to,
+  version: "1.5.5",
+});
+
+await downloadWhisperModel({
+  model: "medium.en",
+  folder: to,
+});
+
+// Convert the audio to a 16KHz wav file first if needed:
+// import {execSync} from 'child_process';
+// execSync('ffmpeg -i /path/to/audio.mp4 -ar 16000 /path/to/audio.wav -y');
+
+const whisperCppOutput = await transcribe({
+  model: "medium.en",
+  whisperPath: to,
+  whisperCppVersion: "1.5.5",
+  inputPath: "/path/to/audio123.wav",
+  tokenLevelTimestamps: true,
+});
+
+// Optional: Apply our recommended postprocessing
+const { captions } = toCaptions({
+  whisperCppOutput,
+});
+
+// Write it to the public/ folder so it can be fetched from Remotion
+fs.writeFileSync("captions123.json", JSON.stringify(captions, null, 2));
+```
+
+Transcribe each clip individually and create multiple JSON files.
+
+See [Displaying captions](display-captions.md) for how to display the captions in Remotion.