Skip to content

Commit 526ac5f

Browse files
author
thegamerhat
committed
initial commit
0 parents  commit 526ac5f

29 files changed

+6405
-0
lines changed

‎.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎.gitignore

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env*.local
30+
.env
31+
serviceaccount.json
32+
33+
# vercel
34+
.vercel
35+
next-env.d.ts

‎README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Fireship Code Report Remotion
2+
3+
### An attempt to create <img width="13" src="https://fireship.io/img/favicon.png"> [**Fireship**](https://www.youtube.com/@Fireship) Code Report videos in <img width="13" src="https://reactjs.org/favicon.ico"> **React** via <img width="13" src="https://github.com/remotion-dev/logo/raw/main/withouttitle/element-0.png"> [**Remotion**](https://www.remotion.dev/).
4+
5+
[![Terminal](https://img.shields.io/badge/Deployed_on_Vercel-black?style=for-the-badge&logo=Vercel&logoColor=white&color=1a1a1a)](http://fireship-remotion-intro.vercel.app)
6+
7+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
8+
9+
## Run locally:
10+
11+
1. First, run the development server: `yarn dev`
12+
13+
2. Open [`http://localhost:3000`](http://localhost:3000) in your browser.
14+
15+
### 🎉 Your feedback and contributions are welcome!

‎components/Cubano.woff2

6.5 KB
Binary file not shown.

‎components/constants.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// export const ProjectURL = "http://localhost:3000";
2+
3+
export const ProjectURL = "https://fireship-remotion-intro.vercel.app/";

‎components/remotion/Animation.jsx

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import { ThreeCanvas } from "@remotion/three";
2+
import {
3+
AbsoluteFill,
4+
Audio,
5+
interpolate,
6+
interpolateColors,
7+
spring,
8+
staticFile,
9+
useCurrentFrame,
10+
useVideoConfig,
11+
} from "remotion";
12+
import {
13+
OrbitControls,
14+
Text,
15+
PerspectiveCamera,
16+
useGLTF,
17+
Sparkles,
18+
} from "@react-three/drei";
19+
// import * as THREE from "three";
20+
import { TextureLoader } from "three";
21+
import { useLoader } from "@react-three/fiber";
22+
23+
const FireshipLogo = "/fireship-simple.glb";
24+
const CodeReportText = "/code-report.glb";
25+
const fireshipTexture = "/big-gradient.png";
26+
27+
const Animation = ({ AnimationAudioURL }) => {
28+
const frame = useCurrentFrame();
29+
const { width, height, fps, durationInFrames } = useVideoConfig();
30+
31+
// Interpolate
32+
const cameraX = 0;
33+
const cameraY = interpolate(frame, [0, durationInFrames / 2], [0, 0], {
34+
extrapolateRight: "clamp",
35+
});
36+
const cameraZ = interpolate(frame, [0, durationInFrames / 2], [-7, -7], {
37+
extrapolateRight: "clamp",
38+
});
39+
40+
const modelScale = interpolate(frame, [0, fps / 4], [30, 30], {
41+
extrapolateRight: "clamp",
42+
});
43+
// const modelRotate = interpolate(frame, [0, durationInFrames], [0, 0]);
44+
const modelPositionY = interpolate(frame, [0, fps / 4], [-7, -3], {
45+
extrapolateRight: "clamp",
46+
});
47+
const modelPositionZ = spring({
48+
frame: frame - fps / 10,
49+
fps,
50+
config: {
51+
stiffness: 31,
52+
// mass: 0.5,
53+
},
54+
from: -500,
55+
to: 0,
56+
durationInFrames: 30,
57+
});
58+
59+
const textPositionX = interpolate(frame, [0, fps / 4], [-3, -6.15], {
60+
extrapolateRight: "clamp",
61+
});
62+
const textPositionY = modelPositionY - 8.5;
63+
const textPositionZ = spring({
64+
frame: frame - 6,
65+
fps,
66+
config: {
67+
// stiffness: 31,
68+
damping: 2000,
69+
},
70+
from: -850,
71+
to: 0,
72+
durationInFrames: 30,
73+
});
74+
// const TextGradientColors = interpolateColors(
75+
// frame,
76+
// [0, durationInFrames / 2 - 10, durationInFrames * 0.75, durationInFrames],
77+
// ['#c4eeff', 'white', '#c4eeff', 'white']
78+
// );
79+
const TextGradientColors = "white";
80+
const textScale = interpolate(frame, [0, fps / 4], [30, 40], {
81+
extrapolateRight: "clamp",
82+
});
83+
const opacity = interpolate(
84+
frame,
85+
[durationInFrames / 2, durationInFrames - fps],
86+
[1, 1]
87+
);
88+
89+
// Load assets
90+
const FireshipLogoObject = useGLTF(FireshipLogo);
91+
const TextObject = useGLTF(CodeReportText);
92+
93+
// Load gradient map
94+
const fireshipGradient = useLoader(TextureLoader, fireshipTexture);
95+
96+
return (
97+
<div
98+
style={{
99+
backgroundColor: interpolateColors(
100+
frame,
101+
[0, durationInFrames],
102+
["#18181F", "#000"]
103+
),
104+
}}
105+
>
106+
<ThreeCanvas linear width={width} height={height}>
107+
<PerspectiveCamera position={[cameraX, cameraY, cameraZ]}>
108+
<group dispose={null}>
109+
<directionalLight
110+
intensity={interpolate(
111+
frame,
112+
[0, durationInFrames - 10, durationInFrames],
113+
[0.9, 0.7, 0]
114+
)}
115+
position={[
116+
10,
117+
118+
interpolate(
119+
frame,
120+
[durationInFrames / 3, durationInFrames],
121+
[150, -50]
122+
),
123+
124+
250,
125+
]}
126+
args={["wireframe"]}
127+
/>
128+
<mesh
129+
position={[-5, modelPositionY, modelPositionZ]}
130+
geometry={FireshipLogoObject.nodes.Curve.geometry}
131+
scale={modelScale}
132+
material={FireshipLogoObject.materials.SVGMat}
133+
>
134+
<meshStandardMaterial map={fireshipGradient} />
135+
</mesh>
136+
<mesh
137+
position={[textPositionX, textPositionY, textPositionZ]}
138+
geometry={TextObject.nodes.path240001.geometry}
139+
scale={textScale}
140+
material={TextObject.materials["SVGMat.015"]}
141+
>
142+
<meshStandardMaterial color={TextGradientColors} map={""} />
143+
</mesh>
144+
</group>
145+
146+
<Sparkles
147+
position={[
148+
0,
149+
0,
150+
interpolate(
151+
frame,
152+
// [durationInFrames / 2, (3 * durationInFrames) / 4],
153+
[fps, durationInFrames],
154+
[-70, 160]
155+
// [80, -140]
156+
// [0, -150]
157+
),
158+
]}
159+
count={2000}
160+
speed={0}
161+
// noise={1}
162+
scale={200}
163+
size={30}
164+
/>
165+
166+
<OrbitControls />
167+
</PerspectiveCamera>
168+
</ThreeCanvas>
169+
170+
<Audio src={AnimationAudioURL} />
171+
{/* <Audio src={static1File(AnimationAudioURL)} /> */}
172+
</div>
173+
);
174+
};
175+
176+
export default Animation;

‎components/remotion/AnimationVideo.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { AbsoluteFill, Audio, Video } from "remotion";
2+
// import { preloadVideo } from "@remotion/preload";
3+
import { ProjectURL } from "../constants";
4+
5+
const AnimationVideo: React.FC<{ AnimationAudioURL: string }> = ({
6+
AnimationAudioURL,
7+
}) => {
8+
// preloadVideo("/CRAnimation.mp4");
9+
return (
10+
<AbsoluteFill>
11+
<Video src={`${ProjectURL}/CRAnimation.mp4`} />
12+
13+
<Audio src={AnimationAudioURL} />
14+
</AbsoluteFill>
15+
);
16+
};
17+
18+
export default AnimationVideo;

‎components/remotion/CompleteVideo.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import Intro from "./Intro";
2+
import AnimationVideo from "./AnimationVideo";
3+
import Animation from "./Animation";
4+
5+
import { AbsoluteFill, Sequence } from "remotion";
6+
7+
const CompleteVideo: React.FC<{
8+
animationRenderer: string;
9+
AnimationAudioURL: string;
10+
CubanoFontFamily: string;
11+
selectedDate: Date;
12+
}> = ({
13+
animationRenderer,
14+
AnimationAudioURL,
15+
CubanoFontFamily,
16+
selectedDate,
17+
}) => {
18+
return (
19+
<AbsoluteFill>
20+
<Sequence durationInFrames={47}>
21+
<Intro
22+
CubanoFontFamily={CubanoFontFamily}
23+
selectedDate={selectedDate}
24+
/>
25+
</Sequence>
26+
<Sequence from={47}>
27+
{animationRenderer == "threejs" ? (
28+
// This renders the Threejs canvas
29+
<Animation AnimationAudioURL={AnimationAudioURL} />
30+
) : (
31+
// This plays a pre-rendered mp4 of the Threejs animation
32+
<AnimationVideo AnimationAudioURL={AnimationAudioURL} />
33+
)}
34+
</Sequence>
35+
</AbsoluteFill>
36+
);
37+
};
38+
39+
export default CompleteVideo;

0 commit comments

Comments
 (0)