dsh-remotion 0.2.0 → 0.3.0

package/skills/remotion/rules/maps.md

@@ -1,412 +0,0 @@
----
-name: maps
-description: Make map animations with Mapbox
-metadata:
-  tags: map, map animation, mapbox
----
-
-Maps can be added to a Remotion video with Mapbox.  
-The [Mapbox documentation](https://docs.mapbox.com/mapbox-gl-js/api/) has the API reference.
-
-## Prerequisites
-
-Mapbox and `@turf/turf` need to be installed.
-
-Search the project for lockfiles and run the correct command depending on the package manager:
-
-If `package-lock.json` is found, use the following command:
-
-```bash
-npm i mapbox-gl @turf/turf @types/mapbox-gl
-```
-
-If `bun.lock` is found, use the following command:
-
-```bash
-bun i mapbox-gl @turf/turf @types/mapbox-gl
-```
-
-If `yarn.lock` is found, use the following command:
-
-```bash
-yarn add mapbox-gl @turf/turf @types/mapbox-gl
-```
-
-If `pnpm-lock.yaml` is found, use the following command:
-
-```bash
-pnpm i mapbox-gl @turf/turf @types/mapbox-gl
-```
-
-The user needs to create a free Mapbox account and create an access token by visiting https://console.mapbox.com/account/access-tokens/.
-
-The mapbox token needs to be added to the `.env` file:
-
-```txt title=".env"
-REMOTION_MAPBOX_TOKEN==pk.your-mapbox-access-token
-```
-
-## Adding a map
-
-Here is a basic example of a map in Remotion.
-
-```tsx
-import { useEffect, useMemo, useRef, useState } from "react";
-import { AbsoluteFill, useDelayRender, useVideoConfig } from "remotion";
-import mapboxgl, { Map } from "mapbox-gl";
-
-export const lineCoordinates = [
-  [6.56158447265625, 46.059891147620725],
-  [6.5691375732421875, 46.05679376154153],
-  [6.5842437744140625, 46.05059898938315],
-  [6.594886779785156, 46.04702502069337],
-  [6.601066589355469, 46.0460718554722],
-  [6.6089630126953125, 46.0365370783104],
-  [6.6185760498046875, 46.018420689207964],
-];
-
-mapboxgl.accessToken = process.env.REMOTION_MAPBOX_TOKEN as string;
-
-export const MyComposition = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const { delayRender, continueRender } = useDelayRender();
-
-  const { width, height } = useVideoConfig();
-  const [handle] = useState(() => delayRender("Loading map..."));
-  const [map, setMap] = useState<Map | null>(null);
-
-  useEffect(() => {
-    const _map = new Map({
-      container: ref.current!,
-      zoom: 11.53,
-      center: [6.5615, 46.0598],
-      pitch: 65,
-      bearing: 0,
-      style: "⁠mapbox://styles/mapbox/standard",
-      interactive: false,
-      fadeDuration: 0,
-    });
-
-    _map.on("style.load", () => {
-      // Hide all features from the Mapbox Standard style
-      const hideFeatures = [
-        "showRoadsAndTransit",
-        "showRoads",
-        "showTransit",
-        "showPedestrianRoads",
-        "showRoadLabels",
-        "showTransitLabels",
-        "showPlaceLabels",
-        "showPointOfInterestLabels",
-        "showPointsOfInterest",
-        "showAdminBoundaries",
-        "showLandmarkIcons",
-        "showLandmarkIconLabels",
-        "show3dObjects",
-        "show3dBuildings",
-        "show3dTrees",
-        "show3dLandmarks",
-        "show3dFacades",
-      ];
-      for (const feature of hideFeatures) {
-        _map.setConfigProperty("basemap", feature, false);
-      }
-
-      _map.setConfigProperty("basemap", "colorTrunks", "rgba(0, 0, 0, 0)");
-
-      _map.addSource("trace", {
-        type: "geojson",
-        data: {
-          type: "Feature",
-          properties: {},
-          geometry: {
-            type: "LineString",
-            coordinates: lineCoordinates,
-          },
-        },
-      });
-      _map.addLayer({
-        type: "line",
-        source: "trace",
-        id: "line",
-        paint: {
-          "line-color": "black",
-          "line-width": 5,
-        },
-        layout: {
-          "line-cap": "round",
-          "line-join": "round",
-        },
-      });
-    });
-
-    _map.on("load", () => {
-      continueRender(handle);
-      setMap(_map);
-    });
-  }, [handle, lineCoordinates]);
-
-  const style: React.CSSProperties = useMemo(
-    () => ({ width, height, position: "absolute" }),
-    [width, height],
-  );
-
-  return <AbsoluteFill ref={ref} style={style} />;
-};
-```
-
-The following is important in Remotion:
-
-- Animations must be driven by `useCurrentFrame()` and animations that Mapbox brings itself should be disabled. For example, the `fadeDuration` prop should be set to `0`, `interactive` should be set to `false`, etc.
-- Loading the map should be delayed using `useDelayRender()` and the map should be set to `null` until it is loaded.
-- The element containing the ref MUST have an explicit width and height and `position: "absolute"`.
-- Do not add a `_map.remove();` cleanup function.
-
-## Drawing lines
-
-Unless I request it, do not add a glow effect to the lines.
-Unless I request it, do not add additional points to the lines.
-
-## Map style
-
-By default, use the `mapbox://styles/mapbox/standard` style.  
-Hide the labels from the base map style.
-
-Unless I request otherwise, remove all features from the Mapbox Standard style.
-
-```tsx
-// Hide all features from the Mapbox Standard style
-const hideFeatures = [
-  "showRoadsAndTransit",
-  "showRoads",
-  "showTransit",
-  "showPedestrianRoads",
-  "showRoadLabels",
-  "showTransitLabels",
-  "showPlaceLabels",
-  "showPointOfInterestLabels",
-  "showPointsOfInterest",
-  "showAdminBoundaries",
-  "showLandmarkIcons",
-  "showLandmarkIconLabels",
-  "show3dObjects",
-  "show3dBuildings",
-  "show3dTrees",
-  "show3dLandmarks",
-  "show3dFacades",
-];
-for (const feature of hideFeatures) {
-  _map.setConfigProperty("basemap", feature, false);
-}
-
-_map.setConfigProperty("basemap", "colorMotorways", "transparent");
-_map.setConfigProperty("basemap", "colorRoads", "transparent");
-_map.setConfigProperty("basemap", "colorTrunks", "transparent");
-```
-
-## Animating the camera
-
-You can animate the camera along the line by adding a `useEffect` hook that updates the camera position based on the current frame.
-
-Unless I ask for it, do not jump between camera angles.
-
-```tsx
-import * as turf from "@turf/turf";
-import { interpolate } from "remotion";
-import { Easing } from "remotion";
-import { useCurrentFrame, useVideoConfig, useDelayRender } from "remotion";
-
-const animationDuration = 20;
-const cameraAltitude = 4000;
-```
-
-```tsx
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-const { delayRender, continueRender } = useDelayRender();
-
-useEffect(() => {
-  if (!map) {
-    return;
-  }
-  const handle = delayRender("Moving point...");
-
-  const routeDistance = turf.length(turf.lineString(lineCoordinates));
-
-  const progress = interpolate(
-    frame / fps,
-    [0.00001, animationDuration],
-    [0, 1],
-    {
-      easing: Easing.inOut(Easing.sin),
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-    },
-  );
-
-  const camera = map.getFreeCameraOptions();
-
-  const alongRoute = turf.along(
-    turf.lineString(lineCoordinates),
-    routeDistance * progress,
-  ).geometry.coordinates;
-
-  camera.lookAtPoint({
-    lng: alongRoute[0],
-    lat: alongRoute[1],
-  });
-
-  map.setFreeCameraOptions(camera);
-  map.once("idle", () => continueRender(handle));
-}, [lineCoordinates, fps, frame, handle, map]);
-```
-
-Notes:
-
-IMPORTANT: Keep the camera by default so north is up.
-IMPORTANT: For multi-step animations, set all properties at all stages (zoom, position, line progress) to prevent jumps. Override initial values.
-
-- The progress is clamped to a minimum value to avoid the line being empty, which can lead to turf errors
-- See [Timing](./timing.md) for more options for timing.
-- Consider the dimensions of the composition and make the lines thick enough and the label font size large enough to be legible for when the composition is scaled down.
-
-## Animating lines
-
-### Straight lines (linear interpolation)
-
-To animate a line that appears straight on the map, use linear interpolation between coordinates. Do NOT use turf's `lineSliceAlong` or `along` functions, as they use geodesic (great circle) calculations which appear curved on a Mercator projection.
-
-```tsx
-const frame = useCurrentFrame();
-const { durationInFrames } = useVideoConfig();
-
-useEffect(() => {
-  if (!map) return;
-
-  const animationHandle = delayRender("Animating line...");
-
-  const progress = interpolate(frame, [0, durationInFrames - 1], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  });
-
-  // Linear interpolation for a straight line on the map
-  const start = lineCoordinates[0];
-  const end = lineCoordinates[1];
-  const currentLng = start[0] + (end[0] - start[0]) * progress;
-  const currentLat = start[1] + (end[1] - start[1]) * progress;
-
-  const lineData: GeoJSON.Feature<GeoJSON.LineString> = {
-    type: "Feature",
-    properties: {},
-    geometry: {
-      type: "LineString",
-      coordinates: [start, [currentLng, currentLat]],
-    },
-  };
-
-  const source = map.getSource("trace") as mapboxgl.GeoJSONSource;
-  if (source) {
-    source.setData(lineData);
-  }
-
-  map.once("idle", () => continueRender(animationHandle));
-}, [frame, map, durationInFrames]);
-```
-
-### Curved lines (geodesic/great circle)
-
-To animate a line that follows the geodesic (great circle) path between two points, use turf's `lineSliceAlong`. This is useful for showing flight paths or the actual shortest distance on Earth.
-
-```tsx
-import * as turf from "@turf/turf";
-
-const routeLine = turf.lineString(lineCoordinates);
-const routeDistance = turf.length(routeLine);
-
-const currentDistance = Math.max(0.001, routeDistance * progress);
-const slicedLine = turf.lineSliceAlong(routeLine, 0, currentDistance);
-
-const source = map.getSource("route") as mapboxgl.GeoJSONSource;
-if (source) {
-  source.setData(slicedLine);
-}
-```
-
-## Markers
-
-Add labels, and markers where appropriate.
-
-```tsx
-_map.addSource("markers", {
-  type: "geojson",
-  data: {
-    type: "FeatureCollection",
-    features: [
-      {
-        type: "Feature",
-        properties: { name: "Point 1" },
-        geometry: { type: "Point", coordinates: [-118.2437, 34.0522] },
-      },
-    ],
-  },
-});
-
-_map.addLayer({
-  id: "city-markers",
-  type: "circle",
-  source: "markers",
-  paint: {
-    "circle-radius": 40,
-    "circle-color": "#FF4444",
-    "circle-stroke-width": 4,
-    "circle-stroke-color": "#FFFFFF",
-  },
-});
-
-_map.addLayer({
-  id: "labels",
-  type: "symbol",
-  source: "markers",
-  layout: {
-    "text-field": ["get", "name"],
-    "text-font": ["DIN Pro Bold", "Arial Unicode MS Bold"],
-    "text-size": 50,
-    "text-offset": [0, 0.5],
-    "text-anchor": "top",
-  },
-  paint: {
-    "text-color": "#FFFFFF",
-    "text-halo-color": "#000000",
-    "text-halo-width": 2,
-  },
-});
-```
-
-Make sure they are big enough. Check the composition dimensions and scale the labels accordingly.
-For a composition size of 1920x1080, the label font size should be at least 40px.
-
-IMPORTANT: Keep the `text-offset` small enough so it is close to the marker. Consider the marker circle radius. For a circle radius of 40, this is a good offset:
-
-```tsx
-"text-offset": [0, 0.5],
-```
-
-## 3D buildings
-
-To enable 3D buildings, use the following code:
-
-```tsx
-_map.setConfigProperty("basemap", "show3dObjects", true);
-_map.setConfigProperty("basemap", "show3dLandmarks", true);
-_map.setConfigProperty("basemap", "show3dBuildings", true);
-```
-
-## Rendering
-
-When rendering a map animation, make sure to render with the following flags:
-
-```
-npx remotion render --gl=angle --concurrency=1
-```

package/skills/remotion/rules/sfx.md

@@ -1,30 +0,0 @@
----
-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/skills/remotion/rules/subtitles.md

@@ -1,36 +0,0 @@
----
-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/skills/remotion/rules/text-animations.md

@@ -1,20 +0,0 @@
----
-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/skills/remotion/rules/timing.md

@@ -1,136 +0,0 @@
----
-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/skills/remotion/rules/trimming.md

@@ -1,51 +0,0 @@
----
-name: trimming
-description: Trimming patterns for Remotion - cut the beginning or end of animations
-metadata:
-  tags: sequence, trim, clip, cut, offset
----
-
-Use `<Sequence>` with a negative `from` value to trim the start of an animation.
-
-## Trim the Beginning
-
-A negative `from` value shifts time backwards, making the animation start partway through:
-
-```tsx
-import { Sequence, useVideoConfig } from "remotion";
-
-const fps = useVideoConfig();
-
-<Sequence from={-0.5 * fps}>
-  <MyAnimation />
-</Sequence>;
-```
-
-The animation appears 15 frames into its progress - the first 15 frames are trimmed off.
-Inside `<MyAnimation>`, `useCurrentFrame()` starts at 15 instead of 0.
-
-## Trim the End
-
-Use `durationInFrames` to unmount content after a specified duration:
-
-```tsx
-<Sequence durationInFrames={1.5 * fps}>
-  <MyAnimation />
-</Sequence>
-```
-
-The animation plays for 45 frames, then the component unmounts.
-
-## Trim and Delay
-
-Nest sequences to both trim the beginning and delay when it appears:
-
-```tsx
-<Sequence from={30}>
-  <Sequence from={-15}>
-    <MyAnimation />
-  </Sequence>
-</Sequence>
-```
-
-The inner sequence trims 15 frames from the start, and the outer sequence delays the result by 30 frames.