Screen Slide Template

1import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
2import {Img} from 'remotion';
3
4interface ScreenSlideProps {
5  imageSrc: string;
6  title: string;
7  description?: string;
8  width: number;
9  height: number;
10}
11
12export const ScreenSlide: React.FC<ScreenSlideProps> = ({
13  imageSrc,
14  title,
15  description,
16  width,
17  height,
18}) => {
19  const frame = useCurrentFrame();
20  const {fps} = useVideoConfig();
21
22  // Zoom in animation
23  const zoom = spring({
24    frame,
25    fps,
26    from: 0.95,
27    to: 1,
28    config: {
29      damping: 12,
30      stiffness: 80,
31    },
32  });
33
34  // Fade in animation
35  const opacity = spring({
36    frame,
37    fps,
38    from: 0,
39    to: 1,
40    config: {
41      damping: 10,
42    },
43  });
44
45  // Text overlay fade in (delayed)
46  const textOpacity = spring({
47    frame: frame - 15, // Delay by 15 frames
48    fps,
49    from: 0,
50    to: 1,
51    config: {
52      damping: 10,
53    },
54  });
55
56  return (
57    <AbsoluteFill
58      style={{
59        backgroundColor: '#000',
60        justifyContent: 'center',
61        alignItems: 'center',
62      }}
63    >
64      {/* Screen Image */}
65      <div
66        style={{
67          transform: `scale(${zoom})`,
68          opacity,
69          maxWidth: '90%',
70          maxHeight: '80%',
71          position: 'relative',
72        }}
73      >
74        <Img
75          src={imageSrc}
76          style={{
77            width: '100%',
78            height: 'auto',
79            borderRadius: '8px',
80            boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
81          }}
82        />
83      </div>
84
85      {/* Text Overlay */}
86      <div
87        style={{
88          position: 'absolute',
89          bottom: '10%',
90          left: '50%',
91          transform: 'translateX(-50%)',
92          textAlign: 'center',
93          opacity: textOpacity,
94          width: '80%',
95        }}
96      >
97        <h1
98          style={{
99            fontSize: '48px',
100            fontWeight: 'bold',
101            color: '#fff',
102            margin: '0 0 12px 0',
103            textShadow: '0 2px 10px rgba(0, 0, 0, 0.5)',
104          }}
105        >
106          {title}
107        </h1>
108        {description && (
109          <p
110            style={{
111              fontSize: '24px',
112              color: '#ddd',
113              margin: 0,
114              textShadow: '0 1px 5px rgba(0, 0, 0, 0.5)',
115            }}
116          >
117            {description}
118          </p>
119        )}
120      </div>
121    </AbsoluteFill>
122  );
123};