refactor: change default animation (#29)

cs50victor · Feb 21, 2024 · 8652c01 · 8652c01
1 parent 30e0c88
commit 8652c01
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -3,10 +3,10 @@
 ## demo
 ![screenshot of demo](.github/assets/screenshot.png)
 
-- run web: `pnpm --dir=demo dev`
+- run web: `pnpm --dir=www dev`
 - run server: `docker run -it -p 8080:8080 $(docker build -f Dockerfile.dev -q .)`
 
 ```
 - only "audio" feature MUST be real-time "lipsync"
 - focus on primarily building realistic camera features not visual effects existing video editing programs (i.e Davinci) work on.
-```
+```
diff --git a/www/app/editor/page.tsx b/www/app/editor/page.tsx
@@ -70,10 +70,9 @@ const Home: NextPage = () => {
         <Spacing></Spacing>
         <Spacing></Spacing>
         <Spacing></Spacing>
-        <Tips></Tips>
       </div>
     </div>
   );
 };
 
-export default Home;
+export default Home;
diff --git a/www/app/global.css b/www/app/global.css
@@ -4,4 +4,7 @@
 
 body {
     cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='31'%20fill='none'%20viewBox='0%200%2026%2031'%3E%3Cpath%20fill='%23fff'%20fill-rule='evenodd'%20stroke='%23010101'%20stroke-linecap='square'%20stroke-width='2.5'%20d='M21.993%2014.425%202.549%202.935l4.444%2023.108%204.653-10.002%2010.347-1.616Z'%20clip-rule='evenodd'/%3E%3C/svg%3E"), grab;
-}
+}
+.cinematics {
+    border-radius: 1.5rem !important;
+}
diff --git a/www/remotion/MyComp/Main.tsx b/www/remotion/MyComp/Main.tsx
@@ -28,8 +28,8 @@ export const Main = ({ title }: z.infer<typeof CompositionProps>) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
-  const transitionStart = 2 * fps;
-  const transitionDuration = 1 * fps;
+  const transitionStart = 0 * fps;
+  const transitionDuration = 2 * fps;
 
   const logoOut = spring({
     fps,
@@ -47,12 +47,6 @@ export const Main = ({ title }: z.infer<typeof CompositionProps>) => {
 
   return (
     <AbsoluteFill style={container}>
-      <Sequence durationInFrames={transitionStart + transitionDuration}>
-        <Rings outProgress={logoOut}></Rings>
-        <AbsoluteFill style={logo}>
-          <NextLogo outProgress={logoOut}></NextLogo>
-        </AbsoluteFill>
-      </Sequence>
       <Sequence from={transitionStart + transitionDuration / 2}>
         <TextFade>
           <h1 style={titleStyle}>{title}</h1>
@@ -61,3 +55,10 @@ export const Main = ({ title }: z.infer<typeof CompositionProps>) => {
     </AbsoluteFill>
   );
 };
+
+// <Sequence durationInFrames={transitionStart + transitionDuration /3}>
+//   <Rings outProgress={logoOut}></Rings>
+//   <AbsoluteFill style={logo}>
+//     {/* <NextLogo outProgress={logoOut}></NextLogo> */}
+//   </AbsoluteFill>
+// </Sequence>
diff --git a/www/types/constants.ts b/www/types/constants.ts
@@ -6,10 +6,10 @@ export const CompositionProps = z.object({
 });
 
 export const defaultMyCompProps: z.infer<typeof CompositionProps> = {
-  title: "Next.js and Remotion",
+  title: "Nëw Media",
 };
 
 export const DURATION_IN_FRAMES = 200;
 export const VIDEO_WIDTH = 1280;
 export const VIDEO_HEIGHT = 720;
-export const VIDEO_FPS = 30;
+export const VIDEO_FPS = 30;