Skip to content

Commit 3bdad4d

Browse files
ConalMullanConalMullan
authored
Merge pull request #5 from digitalsamba/auto/sync-remotion-skills
Sync official Remotion skills (937ffb3)
2 parents 31c34b1 + ab21f47 commit 3bdad4d

6 files changed

Lines changed: 340 additions & 324 deletions

File tree

‎.claude/skills/remotion-official/SKILL.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ For some video operations, such as trimming videos or detecting silence, FFmpeg
2121

2222
When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.
2323

24+
## Sound effects
25+
26+
When needing to use sound effects, load the [./rules/sound-effects.md](./rules/sound-effects.md) file for more information.
27+
2428
## How to use
2529

2630
Read individual rule files for detailed explanations and code examples:

‎.claude/skills/remotion-official/rules/assets/charts-bar-chart.tsx‎

Lines changed: 149 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,178 +1,173 @@
1-
import { loadFont } from "@remotion/google-fonts/Inter";
2-
import {
3-
AbsoluteFill,
4-
spring,
5-
useCurrentFrame,
6-
useVideoConfig,
7-
} from "remotion";
1+
import {loadFont} from '@remotion/google-fonts/Inter';
2+
import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
83

9-
const { fontFamily } = loadFont();
4+
const {fontFamily} = loadFont();
105

11-
const COLOR_BAR = "#D4AF37";
12-
const COLOR_TEXT = "#ffffff";
13-
const COLOR_MUTED = "#888888";
14-
const COLOR_BG = "#0a0a0a";
15-
const COLOR_AXIS = "#333333";
6+
const COLOR_BAR = '#D4AF37';
7+
const COLOR_TEXT = '#ffffff';
8+
const COLOR_MUTED = '#888888';
9+
const COLOR_BG = '#0a0a0a';
10+
const COLOR_AXIS = '#333333';
1611

1712
// Ideal composition size: 1280x720
1813

19-
const Title: React.FC<{ children: React.ReactNode }> = ({ children }) => (
20-
<div style={{ textAlign: "center", marginBottom: 40 }}>
21-
<div style={{ color: COLOR_TEXT, fontSize: 48, fontWeight: 600 }}>
22-
{children}
23-
</div>
24-
</div>
14+
const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
15+
<div style={{textAlign: 'center', marginBottom: 40}}>
16+
<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
17+
{children}
18+
</div>
19+
</div>
2520
);
2621

27-
const YAxis: React.FC<{ steps: number[]; height: number }> = ({
28-
steps,
29-
height,
22+
const YAxis: React.FC<{steps: number[]; height: number}> = ({
23+
steps,
24+
height,
3025
}) => (
31-
<div
32-
style={{
33-
display: "flex",
34-
flexDirection: "column",
35-
justifyContent: "space-between",
36-
height,
37-
paddingRight: 16,
38-
}}
39-
>
40-
{steps
41-
.slice()
42-
.reverse()
43-
.map((step) => (
44-
<div
45-
key={step}
46-
style={{
47-
color: COLOR_MUTED,
48-
fontSize: 20,
49-
textAlign: "right",
50-
}}
51-
>
52-
{step.toLocaleString()}
53-
</div>
54-
))}
55-
</div>
26+
<div
27+
style={{
28+
display: 'flex',
29+
flexDirection: 'column',
30+
justifyContent: 'space-between',
31+
height,
32+
paddingRight: 16,
33+
}}
34+
>
35+
{steps
36+
.slice()
37+
.reverse()
38+
.map((step) => (
39+
<div
40+
key={step}
41+
style={{
42+
color: COLOR_MUTED,
43+
fontSize: 20,
44+
textAlign: 'right',
45+
}}
46+
>
47+
{step.toLocaleString()}
48+
</div>
49+
))}
50+
</div>
5651
);
5752

5853
const Bar: React.FC<{
59-
height: number;
60-
progress: number;
61-
}> = ({ height, progress }) => (
62-
<div
63-
style={{
64-
flex: 1,
65-
display: "flex",
66-
flexDirection: "column",
67-
justifyContent: "flex-end",
68-
}}
69-
>
70-
<div
71-
style={{
72-
width: "100%",
73-
height,
74-
backgroundColor: COLOR_BAR,
75-
borderRadius: "8px 8px 0 0",
76-
opacity: progress,
77-
}}
78-
/>
79-
</div>
54+
height: number;
55+
progress: number;
56+
}> = ({height, progress}) => (
57+
<div
58+
style={{
59+
flex: 1,
60+
display: 'flex',
61+
flexDirection: 'column',
62+
justifyContent: 'flex-end',
63+
}}
64+
>
65+
<div
66+
style={{
67+
width: '100%',
68+
height,
69+
backgroundColor: COLOR_BAR,
70+
borderRadius: '8px 8px 0 0',
71+
opacity: progress,
72+
}}
73+
/>
74+
</div>
8075
);
8176

8277
const XAxis: React.FC<{
83-
children: React.ReactNode;
84-
labels: string[];
85-
height: number;
86-
}> = ({ children, labels, height }) => (
87-
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
88-
<div
89-
style={{
90-
display: "flex",
91-
alignItems: "flex-end",
92-
gap: 16,
93-
height,
94-
borderLeft: `2px solid ${COLOR_AXIS}`,
95-
borderBottom: `2px solid ${COLOR_AXIS}`,
96-
paddingLeft: 16,
97-
}}
98-
>
99-
{children}
100-
</div>
101-
<div
102-
style={{
103-
display: "flex",
104-
gap: 16,
105-
paddingLeft: 16,
106-
marginTop: 12,
107-
}}
108-
>
109-
{labels.map((label) => (
110-
<div
111-
key={label}
112-
style={{
113-
flex: 1,
114-
textAlign: "center",
115-
color: COLOR_MUTED,
116-
fontSize: 20,
117-
}}
118-
>
119-
{label}
120-
</div>
121-
))}
122-
</div>
123-
</div>
78+
children: React.ReactNode;
79+
labels: string[];
80+
height: number;
81+
}> = ({children, labels, height}) => (
82+
<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
83+
<div
84+
style={{
85+
display: 'flex',
86+
alignItems: 'flex-end',
87+
gap: 16,
88+
height,
89+
borderLeft: `2px solid ${COLOR_AXIS}`,
90+
borderBottom: `2px solid ${COLOR_AXIS}`,
91+
paddingLeft: 16,
92+
}}
93+
>
94+
{children}
95+
</div>
96+
<div
97+
style={{
98+
display: 'flex',
99+
gap: 16,
100+
paddingLeft: 16,
101+
marginTop: 12,
102+
}}
103+
>
104+
{labels.map((label) => (
105+
<div
106+
key={label}
107+
style={{
108+
flex: 1,
109+
textAlign: 'center',
110+
color: COLOR_MUTED,
111+
fontSize: 20,
112+
}}
113+
>
114+
{label}
115+
</div>
116+
))}
117+
</div>
118+
</div>
124119
);
125120

126121
export const MyAnimation = () => {
127-
const frame = useCurrentFrame();
128-
const { fps, height } = useVideoConfig();
122+
const frame = useCurrentFrame();
123+
const {fps, height} = useVideoConfig();
129124

130-
const data = [
131-
{ month: "Jan", price: 2039 },
132-
{ month: "Mar", price: 2160 },
133-
{ month: "May", price: 2327 },
134-
{ month: "Jul", price: 2426 },
135-
{ month: "Sep", price: 2634 },
136-
{ month: "Nov", price: 2672 },
137-
];
125+
const data = [
126+
{month: 'Jan', price: 2039},
127+
{month: 'Mar', price: 2160},
128+
{month: 'May', price: 2327},
129+
{month: 'Jul', price: 2426},
130+
{month: 'Sep', price: 2634},
131+
{month: 'Nov', price: 2672},
132+
];
138133

139-
const minPrice = 2000;
140-
const maxPrice = 2800;
141-
const priceRange = maxPrice - minPrice;
142-
const chartHeight = height - 280;
143-
const yAxisSteps = [2000, 2400, 2800];
134+
const minPrice = 2000;
135+
const maxPrice = 2800;
136+
const priceRange = maxPrice - minPrice;
137+
const chartHeight = height - 280;
138+
const yAxisSteps = [2000, 2400, 2800];
144139

145-
return (
146-
<AbsoluteFill
147-
style={{
148-
backgroundColor: COLOR_BG,
149-
padding: 60,
150-
display: "flex",
151-
flexDirection: "column",
152-
fontFamily,
153-
}}
154-
>
155-
<Title>Gold Price 2024</Title>
140+
return (
141+
<AbsoluteFill
142+
style={{
143+
backgroundColor: COLOR_BG,
144+
padding: 60,
145+
display: 'flex',
146+
flexDirection: 'column',
147+
fontFamily,
148+
}}
149+
>
150+
<Title>Gold Price 2024</Title>
156151

157-
<div style={{ display: "flex", flex: 1 }}>
158-
<YAxis steps={yAxisSteps} height={chartHeight} />
159-
<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
160-
{data.map((item, i) => {
161-
const progress = spring({
162-
frame: frame - i * 5 - 10,
163-
fps,
164-
config: { damping: 18, stiffness: 80 },
165-
});
152+
<div style={{display: 'flex', flex: 1}}>
153+
<YAxis steps={yAxisSteps} height={chartHeight} />
154+
<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
155+
{data.map((item, i) => {
156+
const progress = spring({
157+
frame: frame - i * 5 - 10,
158+
fps,
159+
config: {damping: 18, stiffness: 80},
160+
});
166161

167-
const barHeight =
168-
((item.price - minPrice) / priceRange) * chartHeight * progress;
162+
const barHeight =
163+
((item.price - minPrice) / priceRange) * chartHeight * progress;
169164

170-
return (
171-
<Bar key={item.month} height={barHeight} progress={progress} />
172-
);
173-
})}
174-
</XAxis>
175-
</div>
176-
</AbsoluteFill>
177-
);
165+
return (
166+
<Bar key={item.month} height={barHeight} progress={progress} />
167+
);
168+
})}
169+
</XAxis>
170+
</div>
171+
</AbsoluteFill>
172+
);
178173
};

0 commit comments

Comments
 (0)