mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-04-13 05:03:28 +08:00
4813ed753f
Ports functionality from 10+ separate plugins into ECC so users only need one plugin installed. Consolidates: pr-review-toolkit, feature-dev, commit-commands, hookify, code-simplifier, security-guidance, frontend-design, explanatory-output-style, and personal skills. New agents (8): code-architect, code-explorer, code-simplifier, comment-analyzer, conversation-analyzer, pr-test-analyzer, silent-failure-hunter, type-design-analyzer New commands (9): commit, commit-push-pr, clean-gone, review-pr, feature-dev, hookify, hookify-list, hookify-configure, hookify-help New skills (8): frontend-design, hookify-rules, github-ops, knowledge-ops, lead-intelligence, oura-health, pmx-guidelines, remotion Enhanced skills (8): article-writing, content-engine, market-research, investor-materials, investor-outreach, x-api, security-scan, autonomous-loops — merged with personal skill content New hook: security-reminder.py (pattern-based OWASP vulnerability warnings on file edits) Totals: 36 agents, 69 commands, 128 skills, 29 hook scripts
123 lines
3.6 KiB
Markdown
123 lines
3.6 KiB
Markdown
---
|
|
name: transitions
|
|
description: Fullscreen scene transitions for Remotion.
|
|
metadata:
|
|
tags: transitions, fade, slide, wipe, scenes
|
|
---
|
|
|
|
## Fullscreen transitions
|
|
|
|
Using `<TransitionSeries>` to animate between multiple scenes or clips.
|
|
This will absolutely position the children.
|
|
|
|
## Prerequisites
|
|
|
|
First, the @remotion/transitions package needs to be installed.
|
|
If it is not, use the following command:
|
|
|
|
```bash
|
|
npx remotion add @remotion/transitions # If project uses npm
|
|
bunx remotion add @remotion/transitions # If project uses bun
|
|
yarn remotion add @remotion/transitions # If project uses yarn
|
|
pnpm exec remotion add @remotion/transitions # If project uses pnpm
|
|
```
|
|
|
|
## Example usage
|
|
|
|
```tsx
|
|
import {TransitionSeries, linearTiming} from '@remotion/transitions';
|
|
import {fade} from '@remotion/transitions/fade';
|
|
|
|
<TransitionSeries>
|
|
<TransitionSeries.Sequence durationInFrames={60}>
|
|
<SceneA />
|
|
</TransitionSeries.Sequence>
|
|
<TransitionSeries.Transition presentation={fade()} timing={linearTiming({durationInFrames: 15})} />
|
|
<TransitionSeries.Sequence durationInFrames={60}>
|
|
<SceneB />
|
|
</TransitionSeries.Sequence>
|
|
</TransitionSeries>;
|
|
```
|
|
|
|
## Available Transition Types
|
|
|
|
Import transitions from their respective modules:
|
|
|
|
```tsx
|
|
import {fade} from '@remotion/transitions/fade';
|
|
import {slide} from '@remotion/transitions/slide';
|
|
import {wipe} from '@remotion/transitions/wipe';
|
|
import {flip} from '@remotion/transitions/flip';
|
|
import {clockWipe} from '@remotion/transitions/clock-wipe';
|
|
```
|
|
|
|
## Slide Transition with Direction
|
|
|
|
Specify slide direction for enter/exit animations.
|
|
|
|
```tsx
|
|
import {slide} from '@remotion/transitions/slide';
|
|
|
|
<TransitionSeries.Transition presentation={slide({direction: 'from-left'})} timing={linearTiming({durationInFrames: 20})} />;
|
|
```
|
|
|
|
Directions: `"from-left"`, `"from-right"`, `"from-top"`, `"from-bottom"`
|
|
|
|
## Timing Options
|
|
|
|
```tsx
|
|
import {linearTiming, springTiming} from '@remotion/transitions';
|
|
|
|
// Linear timing - constant speed
|
|
linearTiming({durationInFrames: 20});
|
|
|
|
// Spring timing - organic motion
|
|
springTiming({config: {damping: 200}, durationInFrames: 25});
|
|
```
|
|
|
|
## Duration calculation
|
|
|
|
Transitions overlap adjacent scenes, so the total composition length is **shorter** than the sum of all sequence durations.
|
|
|
|
For example, with two 60-frame sequences and a 15-frame transition:
|
|
|
|
- Without transitions: `60 + 60 = 120` frames
|
|
- With transition: `60 + 60 - 15 = 105` frames
|
|
|
|
The transition duration is subtracted because both scenes play simultaneously during the transition.
|
|
|
|
### Getting the duration of a transition
|
|
|
|
Use the `getDurationInFrames()` method on the timing object:
|
|
|
|
```tsx
|
|
import {linearTiming, springTiming} from '@remotion/transitions';
|
|
|
|
const linearDuration = linearTiming({durationInFrames: 20}).getDurationInFrames({fps: 30});
|
|
// Returns 20
|
|
|
|
const springDuration = springTiming({config: {damping: 200}}).getDurationInFrames({fps: 30});
|
|
// Returns calculated duration based on spring physics
|
|
```
|
|
|
|
For `springTiming` without an explicit `durationInFrames`, the duration depends on `fps` because it calculates when the spring animation settles.
|
|
|
|
### Calculating total composition duration
|
|
|
|
```tsx
|
|
import {linearTiming} from '@remotion/transitions';
|
|
|
|
const scene1Duration = 60;
|
|
const scene2Duration = 60;
|
|
const scene3Duration = 60;
|
|
|
|
const timing1 = linearTiming({durationInFrames: 15});
|
|
const timing2 = linearTiming({durationInFrames: 20});
|
|
|
|
const transition1Duration = timing1.getDurationInFrames({fps: 30});
|
|
const transition2Duration = timing2.getDurationInFrames({fps: 30});
|
|
|
|
const totalDuration = scene1Duration + scene2Duration + scene3Duration - transition1Duration - transition2Duration;
|
|
// 60 + 60 + 60 - 15 - 20 = 145 frames
|
|
```
|