@rubix0270/arboris 1.0.2 → 1.0.3

package/prisma/skills/remotion-video-creation/rules/audio.md

@@ -1,172 +0,0 @@
----
-name: audio
-description: Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
-metadata:
-  tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx
----
-
-# Using audio in Remotion
-
-## Prerequisites
-
-First, the @remotion/media package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/media # If project uses npm
-bunx remotion add @remotion/media # If project uses bun
-yarn remotion add @remotion/media # If project uses yarn
-pnpm exec remotion add @remotion/media # If project uses pnpm
-```
-
-## Importing Audio
-
-Use `<Audio>` from `@remotion/media` to add audio to your composition.
-
-```tsx
-import { Audio } from "@remotion/media";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Audio src={staticFile("audio.mp3")} />;
-};
-```
-
-Remote URLs are also supported:
-
-```tsx
-<Audio src="https://remotion.media/audio.mp3" />
-```
-
-By default, audio plays from the start, at full volume and full length.
-Multiple audio tracks can be layered by adding multiple `<Audio>` components.
-
-## Trimming
-
-Use `trimBefore` and `trimAfter` to remove portions of the audio. Values are in frames.
-
-```tsx
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    trimBefore={2 * fps} // Skip the first 2 seconds
-    trimAfter={10 * fps} // End at the 10 second mark
-  />
-);
-```
-
-The audio still starts playing at the beginning of the composition - only the specified portion is played.
-
-## Delaying
-
-Wrap the audio in a `<Sequence>` to delay when it starts:
-
-```tsx
-import { Sequence, staticFile } from "remotion";
-import { Audio } from "@remotion/media";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Sequence from={1 * fps}>
-    <Audio src={staticFile("audio.mp3")} />
-  </Sequence>
-);
-```
-
-The audio will start playing after 1 second.
-
-## Volume
-
-Set a static volume (0 to 1):
-
-```tsx
-<Audio src={staticFile("audio.mp3")} volume={0.5} />
-```
-
-Or use a callback for dynamic volume based on the current frame:
-
-```tsx
-import { interpolate } from "remotion";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    volume={(f) =>
-      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
-    }
-  />
-);
-```
-
-The value of `f` starts at 0 when the audio begins to play, not the composition frame.
-
-## Muting
-
-Use `muted` to silence the audio. It can be set dynamically:
-
-```tsx
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    muted={frame >= 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s
-  />
-);
-```
-
-## Speed
-
-Use `playbackRate` to change the playback speed:
-
-```tsx
-<Audio src={staticFile("audio.mp3")} playbackRate={2} /> {/* 2x speed */}
-<Audio src={staticFile("audio.mp3")} playbackRate={0.5} /> {/* Half speed */}
-```
-
-Reverse playback is not supported.
-
-## Looping
-
-Use `loop` to loop the audio indefinitely:
-
-```tsx
-<Audio src={staticFile("audio.mp3")} loop />
-```
-
-Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
-
-- `"repeat"`: Frame count resets to 0 each loop (default)
-- `"extend"`: Frame count continues incrementing
-
-```tsx
-<Audio
-  src={staticFile("audio.mp3")}
-  loop
-  loopVolumeCurveBehavior="extend"
-  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
-/>
-```
-
-## Pitch
-
-Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
-
-```tsx
-<Audio
-  src={staticFile("audio.mp3")}
-  toneFrequency={1.5} // Higher pitch
-/>
-<Audio
-  src={staticFile("audio.mp3")}
-  toneFrequency={0.8} // Lower pitch
-/>
-```
-
-Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.

package/prisma/skills/remotion-video-creation/rules/calculate-metadata.md

@@ -1,104 +0,0 @@
----
-name: calculate-metadata
-description: Dynamically set composition duration, dimensions, and props
-metadata:
-  tags: calculateMetadata, duration, dimensions, props, dynamic
----
-
-# Using calculateMetadata
-
-Use `calculateMetadata` on a `<Composition>` to dynamically set duration, dimensions, and transform props before rendering.
-
-```tsx
-<Composition id="MyComp" component={MyComponent} durationInFrames={300} fps={30} width={1920} height={1080} defaultProps={{videoSrc: 'https://remotion.media/video.mp4'}} calculateMetadata={calculateMetadata} />
-```
-
-## Setting duration based on a video
-
-Use the `getMediaMetadata()` function from the mediabunny/metadata skill to get the video duration:
-
-```tsx
-import {CalculateMetadataFunction} from 'remotion';
-import {getMediaMetadata} from '../get-media-metadata';
-
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const {durationInSeconds} = await getMediaMetadata(props.videoSrc);
-
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-  };
-};
-```
-
-## Matching dimensions of a video
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const {durationInSeconds, dimensions} = await getMediaMetadata(props.videoSrc);
-
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-    width: dimensions?.width ?? 1920,
-    height: dimensions?.height ?? 1080,
-  };
-};
-```
-
-## Setting duration based on multiple videos
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const metadataPromises = props.videos.map((video) => getMediaMetadata(video.src));
-  const allMetadata = await Promise.all(metadataPromises);
-
-  const totalDuration = allMetadata.reduce((sum, meta) => sum + meta.durationInSeconds, 0);
-
-  return {
-    durationInFrames: Math.ceil(totalDuration * 30),
-  };
-};
-```
-
-## Setting a default outName
-
-Set the default output filename based on props:
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  return {
-    defaultOutName: `video-${props.id}.mp4`,
-  };
-};
-```
-
-## Transforming props
-
-Fetch data or transform props before rendering:
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props, abortSignal}) => {
-  const response = await fetch(props.dataUrl, {signal: abortSignal});
-  const data = await response.json();
-
-  return {
-    props: {
-      ...props,
-      fetchedData: data,
-    },
-  };
-};
-```
-
-The `abortSignal` cancels stale requests when props change in the Studio.
-
-## Return value
-
-All fields are optional. Returned values override the `<Composition>` props:
-
-- `durationInFrames`: Number of frames
-- `width`: Composition width in pixels
-- `height`: Composition height in pixels
-- `fps`: Frames per second
-- `props`: Transformed props passed to the component
-- `defaultOutName`: Default output filename
-- `defaultCodec`: Default codec for rendering

package/prisma/skills/remotion-video-creation/rules/can-decode.md

@@ -1,75 +0,0 @@
----
-name: can-decode
-description: Check if a video can be decoded by the browser using Mediabunny
-metadata:
-  tags: decode, validation, video, audio, compatibility, browser
----
-
-# Checking if a video can be decoded
-
-Use Mediabunny to check if a video can be decoded by the browser before attempting to play it.
-
-## The `canDecode()` function
-
-This function can be copy-pasted into any project.
-
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const canDecode = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  try {
-    await input.getFormat();
-  } catch {
-    return false;
-  }
-
-  const videoTrack = await input.getPrimaryVideoTrack();
-  if (videoTrack && !(await videoTrack.canDecode())) {
-    return false;
-  }
-
-  const audioTrack = await input.getPrimaryAudioTrack();
-  if (audioTrack && !(await audioTrack.canDecode())) {
-    return false;
-  }
-
-  return true;
-};
-```
-
-## Usage
-
-```tsx
-const src = "https://remotion.media/video.mp4";
-const isDecodable = await canDecode(src);
-
-if (isDecodable) {
-  console.log("Video can be decoded");
-} else {
-  console.log("Video cannot be decoded by this browser");
-}
-```
-
-## Using with Blob
-
-For file uploads or drag-and-drop, use `BlobSource`:
-
-```tsx
-import { Input, ALL_FORMATS, BlobSource } from "mediabunny";
-
-export const canDecodeBlob = async (blob: Blob) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new BlobSource(blob),
-  });
-
-  // Same validation logic as above
-};
-```

package/prisma/skills/remotion-video-creation/rules/charts.md

@@ -1,58 +0,0 @@
----
-name: charts
-description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, histograms, progress bars, or any data-driven animations.
-metadata:
-  tags: charts, data, visualization, bar-chart, pie-chart, graphs
----
-
-# Charts in Remotion
-
-You can create bar charts in Remotion by using regular React code - HTML and SVG is allowed, as well as D3.js.
-
-## No animations not powered by `useCurrentFrame()`
-
-Disable all animations by third party libraries.
-They will cause flickering during rendering.
-Instead, drive all animations from `useCurrentFrame()`.
-
-## Bar Chart Animations
-
-See [Bar Chart Example](assets/charts/bar-chart.tsx) for a basic example implmentation.
-
-### Staggered Bars
-
-You can animate the height of the bars and stagger them like this:
-
-```tsx
-const STAGGER_DELAY = 5;
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-
-const bars = data.map((item, i) => {
-  const delay = i * STAGGER_DELAY;
-  const height = spring({
-    frame,
-    fps,
-    delay,
-    config: {damping: 200},
-  });
-  return <div style={{height: height * item.value}} />;
-});
-```
-
-## Pie Chart Animation
-
-Animate segments using stroke-dashoffset, starting from 12 o'clock.
-
-```tsx
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-
-const progress = interpolate(frame, [0, 100], [0, 1]);
-
-const circumference = 2 * Math.PI * radius;
-const segmentLength = (value / total) * circumference;
-const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
-
-<circle r={radius} cx={center} cy={center} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={`${segmentLength} ${circumference}`} strokeDashoffset={offset} transform={`rotate(-90 ${center} ${center})`} />;
-```

package/prisma/skills/remotion-video-creation/rules/compositions.md

@@ -1,146 +0,0 @@
----
-name: compositions
-description: Defining compositions, stills, folders, default props and dynamic metadata
-metadata:
-  tags: composition, still, folder, props, metadata
----
-
-A `<Composition>` defines the component, width, height, fps and duration of a renderable video.
-
-It normally is placed in the `src/Root.tsx` file.
-
-```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}
-    />
-  );
-};
-```
-
-## Default Props
-
-Pass `defaultProps` to provide initial values for your component.
-Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
-
-```tsx
-import { Composition } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={{
-        title: "Hello World",
-        color: "#ff0000",
-      } satisfies MyCompositionProps}
-    />
-  );
-};
-```
-
-Use `type` declarations for props rather than `interface` to ensure `defaultProps` type safety.
-
-## Folders
-
-Use `<Folder>` to organize compositions in the sidebar.
-Folder names can only contain letters, numbers, and hyphens.
-
-```tsx
-import { Composition, Folder } from "remotion";
-
-export const RemotionRoot = () => {
-  return (
-    <>
-      <Folder name="Marketing">
-        <Composition id="Promo" /* ... */ />
-        <Composition id="Ad" /* ... */ />
-      </Folder>
-      <Folder name="Social">
-        <Folder name="Instagram">
-          <Composition id="Story" /* ... */ />
-          <Composition id="Reel" /* ... */ />
-        </Folder>
-      </Folder>
-    </>
-  );
-};
-```
-
-## Stills
-
-Use `<Still>` for single-frame images. It does not require `durationInFrames` or `fps`.
-
-```tsx
-import { Still } from "remotion";
-import { Thumbnail } from "./Thumbnail";
-
-export const RemotionRoot = () => {
-  return (
-    <Still
-      id="Thumbnail"
-      component={Thumbnail}
-      width={1280}
-      height={720}
-    />
-  );
-};
-```
-
-## Calculate Metadata
-
-Use `calculateMetadata` to make dimensions, duration, or props dynamic based on data.
-
-```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,
-    },
-  };
-};
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100} // Placeholder, will be overridden
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={{ videoId: "abc123" }}
-      calculateMetadata={calculateMetadata}
-    />
-  );
-};
-```
-
-The function can return `props`, `durationInFrames`, `width`, `height`, `fps`, and codec-related defaults. It runs once before rendering begins.

package/prisma/skills/remotion-video-creation/rules/display-captions.md

@@ -1,126 +0,0 @@
----
-name: display-captions
-description: Displaying captions in Remotion with TikTok-style pages and word highlighting
-metadata:
-  tags: captions, subtitles, display, tiktok, highlight
----
-
-# Displaying captions in Remotion
-
-This guide explains how to display captions in Remotion, assuming you already have captions in the `Caption` format.
-
-## Prerequisites
-
-First, the @remotion/captions package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/captions # If project uses npm
-bunx remotion add @remotion/captions # If project uses bun
-yarn remotion add @remotion/captions # If project uses yarn
-pnpm exec remotion add @remotion/captions # If project uses pnpm
-```
-
-## Creating pages
-
-Use `createTikTokStyleCaptions()` to group captions into pages. The `combineTokensWithinMilliseconds` option controls how many words appear at once:
-
-```tsx
-import {useMemo} from 'react';
-import {createTikTokStyleCaptions} from '@remotion/captions';
-import type {Caption} from '@remotion/captions';
-
-// How often captions should switch (in milliseconds)
-// Higher values = more words per page
-// Lower values = fewer words (more word-by-word)
-const SWITCH_CAPTIONS_EVERY_MS = 1200;
-
-const {pages} = useMemo(() => {
-  return createTikTokStyleCaptions({
-    captions,
-    combineTokensWithinMilliseconds: SWITCH_CAPTIONS_EVERY_MS,
-  });
-}, [captions]);
-```
-
-## Rendering with Sequences
-
-Map over the pages and render each one in a `<Sequence>`. Calculate the start frame and duration from the page timing:
-
-```tsx
-import {Sequence, useVideoConfig, AbsoluteFill} from 'remotion';
-import type {TikTokPage} from '@remotion/captions';
-
-const CaptionedContent: React.FC = () => {
-  const {fps} = useVideoConfig();
-
-  return (
-    <AbsoluteFill>
-      {pages.map((page, index) => {
-        const nextPage = pages[index + 1] ?? null;
-        const startFrame = (page.startMs / 1000) * fps;
-        const endFrame = Math.min(
-          nextPage ? (nextPage.startMs / 1000) * fps : Infinity,
-          startFrame + (SWITCH_CAPTIONS_EVERY_MS / 1000) * fps,
-        );
-        const durationInFrames = endFrame - startFrame;
-
-        if (durationInFrames <= 0) {
-          return null;
-        }
-
-        return (
-          <Sequence
-            key={index}
-            from={startFrame}
-            durationInFrames={durationInFrames}
-          >
-            <CaptionPage page={page} />
-          </Sequence>
-        );
-      })}
-    </AbsoluteFill>
-  );
-};
-```
-
-## Word highlighting
-
-A caption page contains `tokens` which you can use to highlight the currently spoken word:
-
-```tsx
-import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
-import type {TikTokPage} from '@remotion/captions';
-
-const HIGHLIGHT_COLOR = '#39E508';
-
-const CaptionPage: React.FC<{page: TikTokPage}> = ({page}) => {
-  const frame = useCurrentFrame();
-  const {fps} = useVideoConfig();
-
-  // Current time relative to the start of the sequence
-  const currentTimeMs = (frame / fps) * 1000;
-  // Convert to absolute time by adding the page start
-  const absoluteTimeMs = page.startMs + currentTimeMs;
-
-  return (
-    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
-      <div style={{fontSize: 80, fontWeight: 'bold', whiteSpace: 'pre'}}>
-        {page.tokens.map((token) => {
-          const isActive =
-            token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
-
-          return (
-            <span
-              key={token.fromMs}
-              style={{color: isActive ? HIGHLIGHT_COLOR : 'white'}}
-            >
-              {token.text}
-            </span>
-          );
-        })}
-      </div>
-    </AbsoluteFill>
-  );
-};
-```