Walkthrough Composition

1import {Composition} from 'remotion';
2import {Sequence} from 'remotion';
3import {fade} from '@remotion/transitions/fade';
4import {slide} from '@remotion/transitions/slide';
5import {TransitionSeries} from '@remotion/transitions';
6import {ScreenSlide} from './ScreenSlide';
7import screensManifest from '../screens.json';
8
9// Calculate total duration in frames
10const calculateDuration = () => {
11  const totalSeconds = screensManifest.screens.reduce(
12    (sum, screen) => sum + screen.duration,
13    0
14  );
15  return totalSeconds * screensManifest.videoConfig.fps;
16};
17
18export const WalkthroughComposition: React.FC = () => {
19  const {fps, width, height} = screensManifest.videoConfig;
20
21  return (
22    <TransitionSeries>
23      {screensManifest.screens.map((screen, index) => {
24        const durationInFrames = screen.duration * fps;
25        
26        // Select transition based on screen config
27        const transition =
28          screen.transitionType === 'slide'
29            ? slide()
30            : screen.transitionType === 'zoom'
31            ? fade() // Can customize with zoom effect
32            : fade();
33
34        return (
35          <TransitionSeries.Sequence
36            key={screen.id}
37            durationInFrames={durationInFrames}
38          >
39            <ScreenSlide
40              imageSrc={screen.imagePath}
41              title={screen.title}
42              description={screen.description}
43              width={screen.width}
44              height={screen.height}
45            />
46            {index < screensManifest.screens.length - 1 && (
47              <TransitionSeries.Transition
48                presentation={transition}
49                timing={{
50                  durationInFrames: 20, // 20 frames for transition
51                }}
52              />
53            )}
54          </TransitionSeries.Sequence>
55        );
56      })}
57    </TransitionSeries>
58  );
59};
60
61// Register composition
62export const RemotionRoot: React.FC = () => {
63  const {fps, width, height} = screensManifest.videoConfig;
64  const durationInFrames = calculateDuration();
65
66  return (
67    <>
68      <Composition
69        id="WalkthroughComposition"
70        component={WalkthroughComposition}
71        durationInFrames={durationInFrames}
72        fps={fps}
73        width={width}
74        height={height}
75      />
76    </>
77  );
78};