ZacharyZhang-NY
e74dafcd36
Three independently ugly bugs that all fed the same log flood:
* Electron's `WebFrameMain.send` writes every "Render frame was disposed"
to stderr via `console.error`. When the worker fans a second
agent-event past a reloading renderer, we produced thousands of
identical lines and stalled the main loop on stderr I/O. Added a
`mainFrame.detached` guard so the send is short-circuited before
Electron's own catch block fires, and installed a targeted filter in
`suppress-warnings.ts` (now actually imported from the entry point)
so the specific `console.error("Error sending from webFrameMain:"…)`
noise never reaches the terminal. Any other payload still surfaces.
* `dispatchAgentMessage` accepted the human-reader sentinel as a wake
target when an agent replied to `__board__` — `wakeAgentIfPossible`
then called `db.getAgent("__board__")`, threw, and the dispatcher
kept repeating on every send. Strip `HUMAN_SENDER_ID` at
`resolveMessageWakeTargets`, and keep a defense-in-depth guard in the
heartbeat so a stray caller (future automation fan-out) cannot
reintroduce the crash.
* Pi's skills loader rejects any SKILL.md whose frontmatter `name`
diverges from its parent directory. The four bundled `my-writing-style`
copies declared `name: writing-style-skill`, so every install emitted
a warning and dropped the skill. They also lived as orphan gitlinks
(mode 160000 without .gitmodules), and the global `*.md` gitignore
hid every other SKILL.md from version control. Fixed the frontmatter
to match the dir, converted the dangling submodules to plain trees,
and allowlisted `builtin-skills/**/*.md` so a fresh clone carries the
catalogue instead of silently losing it.
142 lines
3.6 KiB
Markdown
142 lines
3.6 KiB
Markdown
---
|
|
name: gif
|
|
description: Displaying GIFs, APNG, AVIF and WebP in Remotion
|
|
metadata:
|
|
tags: gif, animation, images, animated, apng, avif, webp
|
|
---
|
|
|
|
# Using Animated images in Remotion
|
|
|
|
## Basic usage
|
|
|
|
Use `<AnimatedImage>` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:
|
|
|
|
```tsx
|
|
import { AnimatedImage, staticFile } from "remotion";
|
|
|
|
export const MyComposition = () => {
|
|
return (
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} />
|
|
);
|
|
};
|
|
```
|
|
|
|
Remote URLs are also supported (must have CORS enabled):
|
|
|
|
```tsx
|
|
<AnimatedImage
|
|
src="https://example.com/animation.gif"
|
|
width={500}
|
|
height={500}
|
|
/>
|
|
```
|
|
|
|
## Sizing and fit
|
|
|
|
Control how the image fills its container with the `fit` prop:
|
|
|
|
```tsx
|
|
// Stretch to fill (default)
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="fill" />
|
|
|
|
// Maintain aspect ratio, fit inside container
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="contain" />
|
|
|
|
// Fill container, crop if needed
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="cover" />
|
|
```
|
|
|
|
## Playback speed
|
|
|
|
Use `playbackRate` to control the animation speed:
|
|
|
|
```tsx
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={2} /> {/* 2x speed */}
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={0.5} /> {/* Half speed */}
|
|
```
|
|
|
|
## Looping behavior
|
|
|
|
Control what happens when the animation finishes:
|
|
|
|
```tsx
|
|
// Loop indefinitely (default)
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="loop" />
|
|
|
|
// Play once, show final frame
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="pause-after-finish" />
|
|
|
|
// Play once, then clear canvas
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="clear-after-finish" />
|
|
```
|
|
|
|
## Styling
|
|
|
|
Use the `style` prop for additional CSS (use `width` and `height` props for sizing):
|
|
|
|
```tsx
|
|
<AnimatedImage
|
|
src={staticFile("animation.gif")}
|
|
width={500}
|
|
height={500}
|
|
style={{
|
|
borderRadius: 20,
|
|
position: "absolute",
|
|
top: 100,
|
|
left: 50,
|
|
}}
|
|
/>
|
|
```
|
|
|
|
## Getting GIF duration
|
|
|
|
Use `getGifDurationInSeconds()` from `@remotion/gif` to get the duration of a GIF.
|
|
|
|
```bash
|
|
npx remotion add @remotion/gif
|
|
```
|
|
|
|
```tsx
|
|
import { getGifDurationInSeconds } from "@remotion/gif";
|
|
import { staticFile } from "remotion";
|
|
|
|
const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
|
|
console.log(duration); // e.g. 2.5
|
|
```
|
|
|
|
This is useful for setting the composition duration to match the GIF:
|
|
|
|
```tsx
|
|
import { getGifDurationInSeconds } from "@remotion/gif";
|
|
import { staticFile, CalculateMetadataFunction } from "remotion";
|
|
|
|
const calculateMetadata: CalculateMetadataFunction = async () => {
|
|
const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
|
|
return {
|
|
durationInFrames: Math.ceil(duration * 30),
|
|
};
|
|
};
|
|
```
|
|
|
|
## Alternative
|
|
|
|
If `<AnimatedImage>` does not work (only supported in Chrome and Firefox), you can use `<Gif>` from `@remotion/gif` instead.
|
|
|
|
```bash
|
|
npx remotion add @remotion/gif # If project uses npm
|
|
bunx remotion add @remotion/gif # If project uses bun
|
|
yarn remotion add @remotion/gif # If project uses yarn
|
|
pnpm exec remotion add @remotion/gif # If project uses pnpm
|
|
```
|
|
|
|
```tsx
|
|
import { Gif } from "@remotion/gif";
|
|
import { staticFile } from "remotion";
|
|
|
|
export const MyComposition = () => {
|
|
return <Gif src={staticFile("animation.gif")} width={500} height={500} />;
|
|
};
|
|
```
|
|
|
|
The `<Gif>` component has the same props as `<AnimatedImage>` but only supports GIF files.
|