dsh-remotion 0.2.0 → 0.3.1

package/skills/remotion-best-practices/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: remotion-best-practices
+description: Router for all Remotion skills
+version: 4.0.519
+---
+
+## Preserve user changes
+
+Users may make edits in the code outside of the conversation.
+
+If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.
+
+## Creating a video
+
+If the user asks to make, create, or build a new video or composition, load [Create a new Remotion video](./remotion-create/SKILL.md), whether or not a Remotion project already exists.
+
+## New project setup
+
+If no Remotion project currently exists, load [Create a new Remotion project](./remotion-create/SKILL.md)
+
+## React Markup Best Practices
+
+If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/SKILL.md)
+
+## Maps
+
+For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/SKILL.md).
+
+## Multimedia
+
+For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/SKILL.md)
+
+## Improving Interactivity
+
+By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: [Interactivity Best Practices](./remotion-interactivity/SKILL.md)
+
+## Rendering
+
+For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/SKILL.md)
+
+## Opening Remotion Studio
+
+To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/SKILL.md).
+
+## Captions
+
+When working with Captions, load [Remotion Captions](./remotion-captions/SKILL.md).
+
+## Creating a SaaS, automation or application
+
+Use the [Remotion SaaS skill](./remotion-saas/SKILL.md) for knowledge about Remotion-powered SaaS apps, such as `<Player>`, rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.
+
+## Looking up Remotion APIs and documentation
+
+To find and read current Remotion documentation, load [Remotion Docs](./remotion-docs/SKILL.md).
+
+## Upgrading
+
+To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/SKILL.md).

package/skills/remotion-best-practices/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-best-practices'
+  short_description: 'Route Remotion tasks to the right workflow'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-best-practices: Make a promo video for my product'

package/skills/remotion-best-practices/remotion-captions/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: remotion-captions
+description: Transcribing, displaying and animating captions
+version: 4.0.519
+---
+
+All captions must be processed in JSON. The captions must use the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) 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;
+  pageBreakAfter?: boolean;
+};
+```
+
+## 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/skills/remotion-best-practices/remotion-captions/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-captions'
+  short_description: 'Transcribe, display, and animate captions'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-captions: Transcribe my video and display captions'

package/skills/{remotion/rules → remotion-best-practices/remotion-captions}/display-captions.md

@@ -54,7 +54,11 @@ export const MyComponent: React.FC = () => {
     return null;
   }
 
-  return <AbsoluteFill>{/* Render captions here */}</AbsoluteFill>;
+  return (
+    <AbsoluteFill>
+      {/* Render captions here */}
+    </AbsoluteFill>
+  );
 };
 ```
 
@@ -80,6 +84,8 @@ const { pages } = useMemo(() => {
 }, [captions]);
 ```
 
+If a caption has `pageBreakAfter: true`, the current page ends after that caption and the next caption starts a new page.
+
 ## Rendering with Sequences
 
 Map over the pages and render each one in a `<Sequence>`. Calculate the start frame and duration from the page timing:
@@ -152,13 +158,13 @@ const CaptionPage: React.FC<{ page: TikTokPage }> = ({ page }) => {
   return (
     <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
       <div style={{ fontSize: 80, fontWeight: "bold", whiteSpace: "pre" }}>
-        {page.tokens.map((token) => {
+        {page.tokens.map((token, tokenIndex) => {
           const isActive =
             token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
 
           return (
             <span
-              key={token.fromMs}
+              key={`${token.fromMs}-${tokenIndex}`}
               style={{ color: isActive ? HIGHLIGHT_COLOR : "white" }}
             >
               {token.text}

package/skills/{remotion/rules → remotion-best-practices/remotion-captions}/import-srt-captions.md

@@ -58,7 +58,11 @@ export const MyComponent: React.FC = () => {
     return null;
   }
 
-  return <AbsoluteFill>{/* Use captions here */}</AbsoluteFill>;
+  return (
+    <AbsoluteFill>
+      {/* Use captions here */}
+    </AbsoluteFill>
+  );
 };
 ```
 

package/skills/remotion-best-practices/remotion-create/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: remotion-create
+description: Create a new Remotion video
+version: 4.0.519
+---
+
+These are instructions for making a new Remotion project and composition.  
+If this is not the next task, see [Remotion Best Practices](../remotion-best-practices/SKILL.md)
+
+## Scaffold a project
+
+If a project already exists, skip this.
+Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.
+
+Scaffold one using:
+
+```bash
+npx create-video@latest --yes --blank --no-tailwind my-video
+cd my-video
+npm i
+```
+
+Replace `my-video` with a suitable project name.
+
+## Designing a video
+
+Keep the scaffold and add React Markup.
+Follow [Remotion React Markup Best Practices](../remotion-markup/SKILL.md) and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.
+
+## Is this a multi-scene video?
+
+If this is a video with multiple subsequence videos, follow guidance at [Multi-scene videos](../remotion-markup/multi-scene-video.md).
+
+## Interactivity Best Practices
+
+By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md), you allow the user to make edits in the Studio which write back to code.
+
+## TailwindCSS
+
+If Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.
+
+## Open the preview
+
+Start the preview server after building the composition:
+
+```bash
+npx remotion studio --no-open
+```
+
+This will start a long-running process and print the server URL for the preview.  
+If the server is already started, it will print the URL.
+If an in-harness browser is available, open it there.
+You can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`.
+
+## Render the video
+
+Only render if the user explicitly asks for it.
+
+```
+npx remotion render
+```
+
+For more options, see [Rendering](../remotion-render/SKILL.md).
+
+## Follow-up
+
+The video creation process has finished.
+For follow-up prompts, use [Remotion Best Practices](../remotion-best-practices/SKILL.md)

package/skills/remotion-best-practices/remotion-create/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-create'
+  short_description: 'Create a new Remotion video project'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-create: Create a Remotion video and make a promo for my product'

package/skills/{remotion/rules → remotion-best-practices/remotion-create}/tailwind.md

@@ -8,4 +8,4 @@ You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in t
 
 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.
+Tailwind must be installed and enabled first in a Remotion project - see https://www.remotion.dev/docs/tailwind.

package/skills/remotion-best-practices/remotion-create/video-layout.md

@@ -0,0 +1,9 @@
+You are designing a video, not a webpage.
+
+- Decide what the viewer should notice first in each scene. Build the frame around that one thing.
+- Keep important content inside a generous safe area. For 1080px-wide videos, keep key text at least 80px from the sides and 100px from the top and bottom.
+- Do not add redundant elements.
+- For 1080px-wide compositions, use these rough minimums:
+  - Main headline: 84px
+  - Important supporting text: 44px
+- Scale those values with the composition width.

package/skills/remotion-best-practices/remotion-docs/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: remotion-docs
+description: Search Remotion documentation
+version: 4.0.519
+---
+
+This skill teaches you how to discover and read current Remotion documentation.
+If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) instead.
+
+## Searching the docs
+
+Use the Algolia search API to find relevant documentation pages:
+
+```
+POST https://plsduol1ca-dsn.algolia.net/1/indexes/*/queries?x-algolia-api-key=3e42dbd4f895fe93ff5cf40d860c4a85&x-algolia-application-id=PLSDUOL1CA
+Content-Type: application/x-www-form-urlencoded
+
+{
+  "requests": [
+    {
+      "query": "<your search query>",
+      "indexName": "remotion",
+      "params": "attributesToRetrieve=[\"hierarchy.lvl0\",\"hierarchy.lvl1\",\"hierarchy.lvl2\",\"url\"]&hitsPerPage=10"
+    }
+  ]
+}
+```
+
+Each hit contains a `url` field pointing to the documentation page.
+
+## Fetching a page as Markdown
+
+Append `.md` to any Remotion docs URL to retrieve its Markdown source (saves tokens):
+
+```
+https://www.remotion.dev/docs/use-video-config.md
+https://www.remotion.dev/docs/sequence.md
+https://www.remotion.dev/docs/lambda/rendermediaonlambda.md
+```
+
+## Workflow
+
+1. Search Algolia for the concept or API you need.
+2. Pick the most relevant URL(s) from the results.
+3. Fetch each URL with the `.md` suffix.
+4. Implement using the current documentation rather than memorized API knowledge.

package/skills/remotion-best-practices/remotion-docs/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-docs'
+  short_description: 'Search current Remotion documentation'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-docs: What server-side rendering options does Remotion have?'

package/skills/remotion-best-practices/remotion-interactivity/SKILL.md

@@ -0,0 +1,247 @@
+---
+name: remotion-interactivity
+description: Structure Remotion markup for interactivity
+version: 4.0.519
+---
+
+By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:
+
+- Allowing items to be selected by clicking on them
+- Allowing drag+drop, resizing and rotation
+- Editing the CSS styles
+- Making keyframes and easing values editable
+
+If the markup is too complex for the Studio to make it interactive, then the values become grayed out.
+
+## Make an HTML element interactive using `Interactive`
+
+Every HTML and SVG element (except `<Img>`, it already is interactive) such as `<div>` can be turned interactive using `Interactive`:
+
+```tsx title="Interactive elements"
+<Interactive.Div
+  name="Greeting card"
+  style={{fontSize: 80, padding: 24}}
+>
+  Hello
+</Interactive.Div>
+```
+
+This allows styles and keyframes to be set in the Studio. Be sensible, if a component has many elements, the timeline might get messy.
+
+## Prefer inline text
+
+If text is fixed and only used once, write it directly inside the interactive element instead of extracting it into a constant.
+
+```tsx title="Inline text"
+// 👍 Fixed copy stays editable
+<Interactive.Div name="Title">
+  Remotion Best Practices
+</Interactive.Div>
+```
+
+Use a prop or variable only when the text is dynamic or reused.
+
+## Give interactive elements a descriptive name
+
+Add a `name` prop to elements to make them easily identifyable.
+Avoid computed names, hardcode them.
+
+```tsx title="Interactive names"
+<>
+  <Interactive.Div name="Hero title" style={{fontSize: 80}}>
+    Launch day
+  </Interactive.Div>
+  <Img name="Avatar" src="https://remotion.media/image.jpeg" />
+  <Video name="Background" src="https://remotion.media/video.mp4" />
+  <Sequence name="Title">
+    Launch day
+  </Sequence>
+</>
+```
+
+## Keep all CSS styles inline
+
+The best way is to just pass a plain object to `style` - no referring to constants, no object spreading, no math.
+
+```tsx title="Interactive example"
+<Interactive.Div
+  style={{
+    fontSize: 80,
+    color: 'red',
+  }}
+>
+  Hello World!
+</Interactive.Div>
+```
+
+```tsx title="❌ Bad for interactivity"
+const baseStyle = useMemo(() => {
+  return {
+    fontSize: 12 // ❌ Non-inline styles are not supported
+  }
+}, []);
+
+<Interactive.Div
+  style={{
+    ...baseStyle, // ❌ Spreading is not supported
+    color: RED, // ❌ Referring to constants is not supported
+    scale: frame * 10 // ❌ Math is not supported
+  }}
+>
+  Hello World!
+</Interactive.Div>
+```
+
+## Animate using `interpolate()`
+
+Write animations as inline `interpolate()` calls on the property that changes.  
+The output range, easing, extrapolation and `output` property should use hardcoded values.
+
+The input range may additionally use `durationInFrames`, `fps`, `width` and `height` destructured directly from `useVideoConfig()`. Bare identifiers such as `durationInFrames`, multiplication with a number such as `2 * fps` or `fps * 2`, and subtraction of a number such as `durationInFrames - 1` are supported.
+
+```tsx title="Inline values"
+const {fps, durationInFrames} = useVideoConfig();
+
+// 👍 Inline values can be standardized and keyframed
+<Interactive.Div
+  name="Product card"
+  style={{
+    color: 'white',
+    fontSize: 80,
+    scale: interpolate(frame, [0, fps], [0, 1], {
+      easing: Easing.spring({damping: 200}),
+      output: 'perceptual-scale',
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp'
+    }),
+    rotate: interpolate(frame, [0, 1 * fps], ['0deg', '20deg'], {
+      easing: Easing.spring({damping: 200}),
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp'
+    }),
+    translate: interpolate(
+      frame,
+      [durationInFrames - 30, durationInFrames],
+      ['0px 0px', '0px 120px'],
+      {
+        easing: Easing.spring({damping: 200}),
+        output: 'perceptual-scale',
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp'
+      }
+    ),
+  }}
+/>
+```
+
+```tsx title="❌ Bad interactivity"
+const translateY = interpolate(frame, [0, 30], [0, 120]); // ❌ Math should be directly in the markup
+
+<Interactive.Div
+  name="Product card"
+  style={{
+    translate: translateY, // ❌ Only inline interpolate() calls are supported,
+    rotate: interpolate(frame, [start, start + 10], [0, Math.PI]), // ❌ Cannot use math with arbitrary variables, cannot use constants
+    scale: interpolate(anyVariable, [0, 30], [0, 1]) // ❌ Can only interpret the `frame` variable.
+  }}
+/>
+```
+
+## Use `scale`, `translate`, `rotate` CSS properties
+
+Avoid the `transform` CSS property.  
+If possible, use `scale`, `rotate` and `translate` instead because only they are interactively editable.
+
+## Keep composition metadata inline
+
+When scaffolding a composition, keep `width`, `height`, `fps`, `durationInFrames` and `defaultProps` inline and make no type assertions.
+
+The Props editor can save visual edits back to your code when `defaultProps` is an inline object literal on `<Composition>` or `<Still>`.
+
+```tsx
+// 👍 Static values are in <Composition>, dynamic values are in calculateMetadata()
+const calculateMetadata = useMemo(async () => {
+  const dimensions = await getDimensions(); // just an example
+  return {width: dimensions.width, height: dimensions.height};
+});
+
+<Composition
+  id="my-video"
+  component={MyComponent}
+  durationInFrames={150}
+  fps={30}
+  calculateMetadata={calculateMetadata}
+  defaultProps={{title: 'Hello', color: '#0b84ff'}}
+/>
+```
+
+```tsx title="Negative examples"
+const defaultProps = {title: 'Hello', color: '#0b84ff'}; // ❌ Don't extract defaultProps, must be inline
+const calculateMetadata = useMemo(() => {
+  // ❌ Unnecessary because no calculation is being done,
+  return {durationInFrames: 150, fps: 30, width: 1920, height: 1080};
+});
+
+<Composition
+  id="my-video"
+  component={MyComponent}
+  calculateMetadata={calculateMetadata}
+  defaultProps={{
+    title: 'Hello',
+  } as Props} // ❌ Don't have type assertions, instead type MyComponent correctly
+/>
+```
+
+Use only `calculateMetadata()` for the part of the metadata that is dynamic.
+
+## Effects should be inline too
+
+The effects array should not be computed.  
+The same rules for setting keyframes as `interpolate()` apply too here: All values should also be hardcoded: Input range, output range, easing, extrapolation, `output` property.
+
+```tsx title="Effects"
+// 👍 Parameters are inline and the array shape is stable
+<CanvasImage
+  src={src}
+  width={1280}
+  height={720}
+  effects={[
+    radialProgressiveBlur({
+      center: [0.5, 0.5],
+      width: 1.2,
+      height: 0.8,
+      start: 0.2,
+      disabled: true,
+      rotation: interpolate(frame, [0, 120], [0, 180]),
+    }),
+  ]}
+/>
+
+const center = [0.5, 0.5] as const;
+const rotation = frame * 1.5;
+
+<CanvasImage
+  src={src}
+  width={1280}
+  height={720}
+  // ❌ Conditional effect is not animateable
+  effects={enabled ? [
+    radialProgressiveBlur({
+      // ❌ Not inline
+      center,
+      rotation,
+    }),
+  ] : []}
+/>
+```
+
+Render separate elements if one version should have effects and another should not.
+
+## Making your own component interactive
+
+To make a custom userland component interactive, use:
+[Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)
+
+## Video editing
+
+If a Remotion component mainly consists of video and audio clips, see [Video editing](../remotion-markup/video-editing.md) for best practices on how to structure Remotion markup so the clips are interactively editable in the timeline.

package/skills/remotion-best-practices/remotion-interactivity/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-interactivity'
+  short_description: 'Make compositions editable in Remotion Studio'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-interactivity: Make the markup in MyComp.tsx interactive'

package/skills/remotion-best-practices/remotion-maps/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: remotion-maps
+description: Remotion Map animation knowledge
+version: 4.0.519
+---
+
+# Remotion Maps
+
+Choose exactly one technique from the intended shot, then load only that technique's `TECHNIQUE.md`.
+Every technique directory is self-contained and may be removed without breaking the others.
+
+## [Static map](techniques/static-map/TECHNIQUE.md)
+
+- Requires you grab a satellite image and mount it in a `<Img>` tag, and animate on top
+
+## [Mapbox](techniques/mapbox/TECHNIQUE.md)
+
+- Requires a Mapbox key
+- Nicer styles by default
+- Map can display a round globe when zoomed out
+- Includes nice 3D buildings such as the Eiffel tower
+
+## [MapLibre](techniques/maplibre/TECHNIQUE.md)
+
+- Requires no API key, fully free
+- Does not include 3D building
+
+## [MapTiler](techniques/maptiler/TECHNIQUE.md)
+
+- Uses MapTiler
+- Annotations can be drawn on top of geographic features: borders, rivers, labels
+
+## [CesiumJS](techniques/cesium/TECHNIQUE.md)
+
+- Flythroughs through terrain and mountains
+- "Flight simulator" perspective

package/skills/remotion-best-practices/remotion-maps/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-maps'
+  short_description: 'Create animated maps in Remotion videos'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-maps: Animate a dot from Zurich to New York.'