@oriro/orirocli 0.1.0

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

@@ -0,0 +1,345 @@
+---
+watermark: ORIRO
+disable-model-invocation: true
+name: remotion-best-practices
+provider: ORIRO.ai
+copyright: Copyright (c) 2026 ORIRO.ai
+description: Best practices for Remotion - Video creation in React
+metadata:
+  tags: remotion, video, react, animation, composition
+---
+
+## When to use
+
+Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
+
+## New project setup
+
+When in an empty folder or workspace with no existing Remotion project, scaffold one using:
+
+```bash
+npx create-video@latest --yes --blank --no-tailwind my-video
+```
+
+Replace `my-video` with a suitable project name.
+
+## Designing a video
+
+Animate properties using `useCurrentFrame()` and `interpolate()`. Use Easing to customize the timing of the animation.
+
+```tsx
+import { useCurrentFrame, Easing } from "remotion";
+
+export const FadeIn = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing.bezier(0.16, 1, 0.3, 1),
+  });
+
+  return <div style={{ opacity }}>Hello World!</div>;
+};
+```
+
+CSS transitions or animations are FORBIDDEN - they will not render correctly.  
+Tailwind animation class names are FORBIDDEN - they will not render correctly.
+
+Place assets in the `public/` folder at your project root.
+
+Use `staticFile()` to reference files from the `public/` folder.
+
+Add images using the `<Img>` component:
+
+```tsx
+import { Img, staticFile } from "remotion";
+
+export const MyComposition = () => {
+  return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
+};
+```
+
+Add videos using the `<Video>` component from `@remotion/media`:
+
+```tsx
+import { Video } from "@remotion/media";
+import { staticFile } from "remotion";
+
+export const MyComposition = () => {
+  return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
+};
+```
+
+Add audio using the `<Audio>` component from `@remotion/media`:
+
+```tsx
+import { Audio } from "@remotion/media";
+import { staticFile } from "remotion";
+
+export const MyComposition = () => {
+  return <Audio src={staticFile("audio.mp3")} />;
+};
+```
+
+Assets can be also referenced as remote URLs:
+
+```tsx
+import { Video } from "@remotion/media";
+
+export const MyComposition = () => {
+  return <Video src="https://remotion.media/video.mp4" />;
+};
+```
+
+To delay content wrap it in `<Sequence>` and use `from`.
+To limit the duration of an element, use `durationInFrames` of `<Sequence>`.
+`<Sequence>` by default is an absolute fill. For inline content, use `layout="none"`.
+
+```tsx
+import { Sequence } from "remotion";
+
+export const Title = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing.bezier(0.16, 1, 0.3, 1),
+  });
+
+  return <div style={{ opacity }}>Title</div>;
+};
+
+export const Subtitle = () => {
+  return <div>Subtitle</div>;
+};
+
+const Main = () => {
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill>
+      <Sequence>
+        <Background />
+      </Sequence>
+      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
+        <Title />
+      </Sequence>
+      <Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
+        <Subtitle />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};
+```
+
+The width, height, fps, and duration of a video is defined in `src/Root.tsx`:
+
+```tsx
+import { Composition } from "remotion";
+import { MyComposition } from "./MyComposition";
+
+export const RemotionRoot = () => {
+  return (
+    <Composition
+      id="MyComposition"
+      component={MyComposition}
+      durationInFrames={100}
+      fps={30}
+      width={1080}
+      height={1080}
+    />
+  );
+};
+```
+
+Metadata can also be calculated dynamically:
+
+```tsx
+import { Composition, CalculateMetadataFunction } from "remotion";
+import { MyComposition, MyCompositionProps } from "./MyComposition";
+
+const calculateMetadata: CalculateMetadataFunction<MyCompositionProps> = async ({
+  props,
+  abortSignal,
+}) => {
+  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
+    signal: abortSignal,
+  }).then((res) => res.json());
+
+  return {
+    durationInFrames: Math.ceil(data.duration * 30),
+    props: {
+      ...props,
+      videoUrl: data.url,
+    },
+    width: 1080,
+    height: 1080,
+  };
+};
+
+export const RemotionRoot = () => {
+  return (
+    <Composition
+      id="MyComposition"
+      component={MyComposition}
+      fps={30}
+      width={1080}
+      height={1080}
+      defaultProps={{ videoId: "abc123" }}
+      calculateMetadata={calculateMetadata}
+    />
+  );
+};
+```
+
+## Starting preview
+
+Start the Remotion Studio to preview a video:
+
+```bash
+npx remotion studio
+```
+
+## Optional: one-frame render check
+
+You can render a single frame with the CLI to sanity-check layout, colors, or timing.  
+Skip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.
+
+```bash
+npx remotion still [composition-id] --scale=0.25 --frame=30
+```
+
+At 30 fps, `--frame=30` is the one-second mark (`--frame` is zero-based).
+
+## Captions
+
+When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information.
+
+## Using FFmpeg
+
+For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information.
+
+## Silence detection
+
+When needing to detect and trim silent segments from video or audio files, load the [./rules/silence-detection.md](./rules/silence-detection.md) file.
+
+## Audio visualization
+
+When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.
+
+## Sound effects
+
+When needing to use sound effects, load the [./rules/sfx.md](./rules/sfx.md) file for more information.
+
+## 3D content
+
+See [rules/3d.md](rules/3d.md) for 3D content in Remotion using Three.js and React Three Fiber.
+
+## Advanced audio
+
+See [rules/audio.md](rules/audio.md) for advanced audio features like trimming, volume, speed, pitch.
+
+## Dynamic duration, dimensions and data
+
+See [rules/calculate-metadata.md](rules/calculate-metadata.md) for dynamically set composition duration, dimensions, and props.
+
+## Advanced compositions
+
+See [rules/compositions.md](rules/compositions.md) for how to define stills, folders, default props and for how to nest compositions.
+
+## Google Fonts
+
+Is the recommended way to load fonts in Remotion. See [rules/google-fonts.md](rules/google-fonts.md) for how to load Google Fonts.
+
+## Local fonts
+
+See [rules/local-fonts.md](rules/local-fonts.md) for how to load local fonts.
+
+## Getting audio duration
+
+See [rules/get-audio-duration.md](rules/get-audio-duration.md) for getting the duration of an audio file in seconds with Mediabunny.
+
+## Getting video dimensions
+
+See [rules/get-video-dimensions.md](rules/get-video-dimensions.md) for getting the width and height of a video file with Mediabunny.
+
+## Getting video duration
+
+See [rules/get-video-duration.md](rules/get-video-duration.md) for getting the duration of a video file in seconds with Mediabunny.
+
+## GIFs
+
+See [rules/gifs.md](rules/gifs.md) for how to display GIFs synchronized with Remotion's timeline.
+
+## Advanced Images
+
+See [rules/images.md](rules/images.md) for sizing and positioning images, dynamic image paths, and getting image dimensions.
+
+## Light leaks
+
+See [rules/light-leaks.md](rules/light-leaks.md) for light leak overlay effects using `@remotion/light-leaks`.
+
+## Lottie animations
+
+See [rules/lottie.md](rules/lottie.md) for embedding Lottie animations in Remotion.
+
+## HTML in canvas
+
+See [rules/html-in-canvas.md](rules/html-in-canvas.md) if you need to render HTML into a `<canvas>` to apply 2D or WebGL effects via `<HtmlInCanvas>`.
+
+## Measuring DOM nodes
+
+See [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) for measuring DOM element dimensions in Remotion.
+
+## Measuring text
+
+See [rules/measuring-text.md](rules/measuring-text.md) for measuring text dimensions, fitting text to containers, and checking overflow.
+
+## Advanced sequencing
+
+See [rules/sequencing.md](rules/sequencing.md) for more sequencing patterns - delay, trim, limit duration of items.
+
+## TailwindCSS
+
+See [rules/tailwind.md](rules/tailwind.md) for using TailwindCSS in Remotion.
+
+## Text animations
+
+See [rules/text-animations.md](rules/text-animations.md) for typography and text animation patterns.
+
+## Advanced timing
+
+See [rules/timing.md](rules/timing.md) for advanced timing with `interpolate` and Bézier easing, and springs.
+
+## Transitions
+
+See [rules/transitions.md](rules/transitions.md) for scene transition patterns.
+
+## Transparent videos
+
+See [rules/transparent-videos.md](rules/transparent-videos.md) for rendering out a video with transparency.
+
+## Trimming
+
+See [rules/trimming.md](rules/trimming.md) for trimming patterns - cutting the beginning or end of animations.
+
+## Advanced Videos
+
+See [rules/videos.md](rules/videos.md) for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.
+
+## Parameterized videos
+
+See [rules/parameters.md](rules/parameters.md) for making a composition parametrizable by adding a Zod schema.
+
+## Maps
+
+For simple maps with little flyovers, consider using static map images.
+For complex maps with animated routes or flyovers, load the maps rule: [rules/maplibre.md](rules/maplibre.md)
+
+## Voiceover
+
+See [rules/voiceover.md](rules/voiceover.md) for adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS.

package/skills/craft/remotion-best-practices/rules/3d.md

@@ -0,0 +1,86 @@
+---
+name: 3d
+description: 3D content in Remotion using Three.js and React Three Fiber.
+metadata:
+  tags: 3d, three, threejs
+---
+
+# Using Three.js and React Three Fiber in Remotion
+
+Follow React Three Fiber and Three.js best practices.  
+Only the following Remotion-specific rules need to be followed:
+
+## Prerequisites
+
+First, the `@remotion/three` package needs to be installed.  
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/three # If project uses npm
+bunx remotion add @remotion/three # If project uses bun
+yarn remotion add @remotion/three # If project uses yarn
+pnpm exec remotion add @remotion/three # If project uses pnpm
+```
+
+## Using ThreeCanvas
+
+You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.  
+`<ThreeCanvas>` MUST have a `width` and `height` prop.
+
+```tsx
+import { ThreeCanvas } from "@remotion/three";
+import { useVideoConfig } from "remotion";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <ambientLight intensity={0.4} />
+  <directionalLight position={[5, 5, 5]} intensity={0.8} />
+  <mesh>
+    <sphereGeometry args={[1, 32, 32]} />
+    <meshStandardMaterial color="red" />
+  </mesh>
+</ThreeCanvas>;
+```
+
+## No animations not driven by `useCurrentFrame()`
+
+Shaders, models etc MUST NOT animate by themselves.  
+No animations are allowed unless they are driven by `useCurrentFrame()`.  
+Otherwise, it will cause flickering during rendering.
+
+Using `useFrame()` from `@react-three/fiber` is forbidden.
+
+## Animate using `useCurrentFrame()`
+
+Use `useCurrentFrame()` to perform animations.
+
+```tsx
+const frame = useCurrentFrame();
+const rotationY = frame * 0.02;
+
+<mesh rotation={[0, rotationY, 0]}>
+  <boxGeometry args={[2, 2, 2]} />
+  <meshStandardMaterial color="#4a9eff" />
+</mesh>;
+```
+
+## Using `<Sequence>` inside `<ThreeCanvas>`
+
+The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
+
+```tsx
+import { Sequence } from "remotion";
+import { ThreeCanvas } from "@remotion/three";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <Sequence layout="none">
+    <mesh>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial color="#4a9eff" />
+    </mesh>
+  </Sequence>
+</ThreeCanvas>;
+```

package/skills/craft/remotion-best-practices/rules/assets/charts-bar-chart.tsx

@@ -0,0 +1,165 @@
+import { loadFont } from "@remotion/google-fonts/Inter";
+import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+const { fontFamily } = loadFont();
+
+const COLOR_BAR = "#D4AF37";
+const COLOR_TEXT = "#ffffff";
+const COLOR_MUTED = "#888888";
+const COLOR_BG = "#0a0a0a";
+const COLOR_AXIS = "#333333";
+
+// Ideal composition size: 1280x720
+
+const Title: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{ textAlign: "center", marginBottom: 40 }}>
+    <div style={{ color: COLOR_TEXT, fontSize: 48, fontWeight: 600 }}>{children}</div>
+  </div>
+);
+
+const YAxis: React.FC<{ steps: number[]; height: number }> = ({ steps, height }) => (
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      height,
+      paddingRight: 16,
+    }}
+  >
+    {steps
+      .slice()
+      .reverse()
+      .map((step) => (
+        <div
+          key={step}
+          style={{
+            color: COLOR_MUTED,
+            fontSize: 20,
+            textAlign: "right",
+          }}
+        >
+          {step.toLocaleString()}
+        </div>
+      ))}
+  </div>
+);
+
+const Bar: React.FC<{
+  height: number;
+  progress: number;
+}> = ({ height, progress }) => (
+  <div
+    style={{
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-end",
+    }}
+  >
+    <div
+      style={{
+        width: "100%",
+        height,
+        backgroundColor: COLOR_BAR,
+        borderRadius: "8px 8px 0 0",
+        opacity: progress,
+      }}
+    />
+  </div>
+);
+
+const XAxis: React.FC<{
+  children: React.ReactNode;
+  labels: string[];
+  height: number;
+}> = ({ children, labels, height }) => (
+  <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+    <div
+      style={{
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 16,
+        height,
+        borderLeft: `2px solid ${COLOR_AXIS}`,
+        borderBottom: `2px solid ${COLOR_AXIS}`,
+        paddingLeft: 16,
+      }}
+    >
+      {children}
+    </div>
+    <div
+      style={{
+        display: "flex",
+        gap: 16,
+        paddingLeft: 16,
+        marginTop: 12,
+      }}
+    >
+      {labels.map((label) => (
+        <div
+          key={label}
+          style={{
+            flex: 1,
+            textAlign: "center",
+            color: COLOR_MUTED,
+            fontSize: 20,
+          }}
+        >
+          {label}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const MyAnimation = () => {
+  const frame = useCurrentFrame();
+  const { fps, height } = useVideoConfig();
+
+  const data = [
+    { month: "Jan", price: 2039 },
+    { month: "Mar", price: 2160 },
+    { month: "May", price: 2327 },
+    { month: "Jul", price: 2426 },
+    { month: "Sep", price: 2634 },
+    { month: "Nov", price: 2672 },
+  ];
+
+  const minPrice = 2000;
+  const maxPrice = 2800;
+  const priceRange = maxPrice - minPrice;
+  const chartHeight = height - 280;
+  const yAxisSteps = [2000, 2400, 2800];
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: COLOR_BG,
+        padding: 60,
+        display: "flex",
+        flexDirection: "column",
+        fontFamily,
+      }}
+    >
+      <Title>Gold Price 2024</Title>
+
+      <div style={{ display: "flex", flex: 1 }}>
+        <YAxis steps={yAxisSteps} height={chartHeight} />
+        <XAxis height={chartHeight} labels={data.map((d) => d.month)}>
+          {data.map((item, i) => {
+            const progress = spring({
+              frame: frame - i * 5 - 10,
+              fps,
+              config: { damping: 18, stiffness: 80 },
+            });
+
+            const barHeight = ((item.price - minPrice) / priceRange) * chartHeight * progress;
+
+            return <Bar key={item.month} height={barHeight} progress={progress} />;
+          })}
+        </XAxis>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/craft/remotion-best-practices/rules/assets/text-animations-typewriter.tsx

@@ -0,0 +1,89 @@
+import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+
+const COLOR_BG = "#ffffff";
+const COLOR_TEXT = "#000000";
+const FULL_TEXT = "From prompt to motion graphics. This is Remotion.";
+const PAUSE_AFTER = "From prompt to motion graphics.";
+const FONT_SIZE = 72;
+const FONT_WEIGHT = 700;
+const CHAR_FRAMES = 2;
+const CURSOR_BLINK_FRAMES = 16;
+const PAUSE_SECONDS = 1;
+
+// Ideal composition size: 1280x720
+
+const getTypedText = ({
+  frame,
+  fullText,
+  pauseAfter,
+  charFrames,
+  pauseFrames,
+}: {
+  frame: number;
+  fullText: string;
+  pauseAfter: string;
+  charFrames: number;
+  pauseFrames: number;
+}): string => {
+  const pauseIndex = fullText.indexOf(pauseAfter);
+  const preLen = pauseIndex >= 0 ? pauseIndex + pauseAfter.length : fullText.length;
+
+  let typedChars = 0;
+  if (frame < preLen * charFrames) {
+    typedChars = Math.floor(frame / charFrames);
+  } else if (frame < preLen * charFrames + pauseFrames) {
+    typedChars = preLen;
+  } else {
+    const postPhase = frame - preLen * charFrames - pauseFrames;
+    typedChars = Math.min(fullText.length, preLen + Math.floor(postPhase / charFrames));
+  }
+  return fullText.slice(0, typedChars);
+};
+
+const Cursor: React.FC<{
+  frame: number;
+  blinkFrames: number;
+  symbol?: string;
+}> = ({ frame, blinkFrames, symbol = "\u258C" }) => {
+  const opacity = interpolate(frame % blinkFrames, [0, blinkFrames / 2, blinkFrames], [1, 0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return <span style={{ opacity }}>{symbol}</span>;
+};
+
+export const MyAnimation = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const pauseFrames = Math.round(fps * PAUSE_SECONDS);
+
+  const typedText = getTypedText({
+    frame,
+    fullText: FULL_TEXT,
+    pauseAfter: PAUSE_AFTER,
+    charFrames: CHAR_FRAMES,
+    pauseFrames,
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: COLOR_BG,
+      }}
+    >
+      <div
+        style={{
+          color: COLOR_TEXT,
+          fontSize: FONT_SIZE,
+          fontWeight: FONT_WEIGHT,
+          fontFamily: "sans-serif",
+        }}
+      >
+        <span>{typedText}</span>
+        <Cursor frame={frame} blinkFrames={CURSOR_BLINK_FRAMES} />
+      </div>
+    </AbsoluteFill>
+  );
+};