mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-04-07 17:53:32 +08:00

Files

Affaan Mustafa df76bdfb51 feat: port remotion-video-creation skill (29 rules), restore missing files

New skill:
- remotion-video-creation: 29 domain-specific Remotion rules covering 3D/Three.js,
  animations, audio, captions, charts, compositions, fonts, GIFs, Lottie,
  measuring, sequencing, tailwind, text animations, timing, transitions,
  trimming, and video embedding. Ported from personal skills.

Restored:
- autonomous-agent-harness/SKILL.md (was in commit but missing from worktree)
- lead-intelligence/ (full directory restored from branch commit)

Updated:
- manifests/install-modules.json: added remotion-video-creation to media-generation
- README.md + AGENTS.md: synced counts to 139 skills

Catalog validates: 30 agents, 60 commands, 139 skills.

2026-03-31 01:56:50 -07:00

1.6 KiB

Raw Blame History

name, description, metadata

name

description

metadata

assets

Importing images, videos, audio, and fonts into Remotion

tags
assets, staticFile, images, fonts, public

Importing assets in Remotion

The public folder

Place assets in the public/ folder at your project root.

Using staticFile()

You MUST use staticFile() to reference files from the public/ folder:

import {Img, staticFile} from 'remotion';

export const MyComposition = () => {
  return <Img src={staticFile('logo.png')} />;
};

The function returns an encoded URL that works correctly when deploying to subdirectories.

Using with components

Images:

import {Img, staticFile} from 'remotion';

<Img src={staticFile('photo.png')} />;

Videos:

import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

<Video src={staticFile('clip.mp4')} />;

Audio:

import {Audio} from '@remotion/media';
import {staticFile} from 'remotion';

<Audio src={staticFile('music.mp3')} />;

Fonts:

import {staticFile} from 'remotion';

const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
await fontFamily.load();
document.fonts.add(fontFamily);

Remote URLs

Remote URLs can be used directly without staticFile():

<Img src="https://example.com/image.png" />
<Video src="https://remotion.media/video.mp4" />

Important notes

Remotion components (<Img>, <Video>, <Audio>) ensure assets are fully loaded before rendering
Special characters in filenames (#, ?, &) are automatically encoded

1.6 KiB Raw Blame History