initial commit

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.10",
     "@chakra-ui/react": "^2.3.4",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
@@ -14,9 +15,12 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
     "framer-motion": "^6.2.9",
+    "popmotion": "^11.0.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^3.0.0",
+    "react-player": "^2.11.0",
+    "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"

public/index.html

@@ -10,6 +10,10 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700&display=swap" rel="stylesheet">
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.tsx

@@ -1,38 +1,11 @@
-import * as React from "react"
-import {
-  ChakraProvider,
-  Box,
-  Text,
-  Link,
-  VStack,
-  Code,
-  Grid,
-  theme,
-} from "@chakra-ui/react"
-import { ColorModeSwitcher } from "./ColorModeSwitcher"
-import { Logo } from "./Logo"
+import { ChakraProvider, theme } from "@chakra-ui/react";
+import { BrowserRouter } from "react-router-dom";
+import Router from "./Router";
 
 export const App = () => (
   <ChakraProvider theme={theme}>
-    <Box textAlign="center" fontSize="xl">
-      <Grid minH="100vh" p={3}>
-        <ColorModeSwitcher justifySelf="flex-end" />
-        <VStack spacing={8}>
-          <Logo h="40vmin" pointerEvents="none" />
-          <Text>
-            Edit <Code fontSize="xl">src/App.tsx</Code> and save to reload.
-          </Text>
-          <Link
-            color="teal.500"
-            href="https://chakra-ui.com"
-            fontSize="2xl"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn Chakra
-          </Link>
-        </VStack>
-      </Grid>
-    </Box>
+    <BrowserRouter>
+      <Router />
+    </BrowserRouter>
   </ChakraProvider>
-)
+);

src/Components/Animation/AnimationComponents.tsx

@@ -0,0 +1,5 @@
+import { Box, Center, Stack } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+export const MotionBox = motion(Box);
+export const MotionCenter = motion(Center);
+export const MotionStack = motion(Stack);

src/Components/Animation/FadeToggle.tsx

@@ -0,0 +1,40 @@
+import { AnimatePresence } from "framer-motion";
+import { MotionBox } from "./AnimationComponents";
+
+export const FadeToggle = ({ showFirst, first, second }: any) => {
+  return (
+    <AnimatePresence>
+      {showFirst && (
+        <MotionBox
+          position="absolute"
+          overflow="hidden"
+          key="1"
+          initial={{
+            opacity: 0,
+          }}
+          animate={{
+            opacity: 1,
+            transition: { duration: 0.5, ease: "easeIn" },
+          }}
+          exit={{ opacity: 0 }}
+        >
+          {first}
+        </MotionBox>
+      )}
+      {!showFirst && (
+        <MotionBox
+          position="absolute"
+          key="2"
+          initial={{ opacity: 0 }}
+          animate={{
+            opacity: 1,
+            transition: { duration: 0.5, ease: "easeIn" },
+          }}
+          exit={{ opacity: 0 }}
+        >
+          {second}
+        </MotionBox>
+      )}
+    </AnimatePresence>
+  );
+};

src/Pages/List1/ListPage.tsx

@@ -0,0 +1,80 @@
+import { Box, Button, Stack, Text } from "@chakra-ui/react";
+import {
+  animate,
+  motion,
+  MotionValue,
+  useMotionValue,
+  useTransform,
+  transform,
+} from "framer-motion";
+import { useState } from "react";
+import { MotionBox } from "../../Components/Animation/AnimationComponents";
+import { snap } from "popmotion";
+export const ListPage = () => {
+  const elements = [
+    {
+      subtitle: "Do it yourself",
+      title: "Making a Minjito",
+    },
+    {
+      subtitle: "Step 1",
+      title: "Add some ice cubes",
+    },
+    {
+      subtitle: "Step 2",
+      title: "Add 200ml of Rio cocktail",
+    },
+    {
+      subtitle: "Step 3",
+      title: "Add a pinch of pink salt",
+    },
+    {
+      subtitle: "Step 4",
+      title: "Add 100ml of soda",
+    },
+    {
+      subtitle: "Final step",
+      title: "Garnish with lemon & rosemary",
+    },
+  ];
+
+  const [activeIndex, setActiveIndex] = useState(0);
+  const handleNext = () => {
+    const newActiveIndex = activeIndex + 1;
+    setActiveIndex(newActiveIndex);
+  };
+
+  const handlePrev = () => {
+    const newActiveIndex = activeIndex - 1;
+    setActiveIndex(newActiveIndex);
+  };
+
+  return (
+    <Box>
+      <Box position="relative" w="300px" h="270px" overflow="hidden">
+        {elements.map((element) => {
+          return (
+            <MotionBox key={element.title} mb={8}>
+              <Text fontFamily="Inter Tight" fontSize="50px">
+                {element.title}
+              </Text>
+            </MotionBox>
+          );
+        })}
+
+        <Box
+          bottom="23px"
+          left="0"
+          w="full"
+          h="119px"
+          position="absolute"
+          bg="linear-gradient(0deg, rgb(255 255 255) 0%, rgba(255,255,255,0) 100%)"
+        ></Box>
+      </Box>
+      <Stack direction="row" mt={10}>
+        <Button onClick={handlePrev}> Prev </Button>
+        <Button onClick={handleNext}> Next </Button>
+      </Stack>
+    </Box>
+  );
+};

src/Pages/Video/VideoDetail.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactPlayer from "react-player";
+
+export const VideoDetail = () => {
+  return (
+    <ReactPlayer
+      playing
+      loop
+      url="lights.mp4"
+      width="100vw"
+      height="100vh"
+    ></ReactPlayer>
+  );
+};

src/Pages/Video/VideoHome.tsx

@@ -0,0 +1,36 @@
+import { Box, Button, Img } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { MotionBox } from "../../Components/Animation/AnimationComponents";
+import { ChatIcon, PhoneIcon } from "@chakra-ui/icons";
+import { FadeToggle } from "../../Components/Animation/FadeToggle";
+export const VideoHome = () => {
+  const [isPhone, setIsPhone] = useState(false);
+  console.log(isPhone);
+
+  return (
+    <Box>
+      <MotionBox
+        overflow="hidden"
+        initial={{
+          width: 500,
+          height: 500,
+        }}
+        animate={{
+          clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+        }}
+        transition={{ duration: 3 }}
+      >
+        <Img src="/lights.avif" />
+      </MotionBox>
+
+      <Button onClick={() => setIsPhone((prev) => !prev)}>Click</Button>
+      <Box p={20} overflow="hidden">
+        <FadeToggle
+          showFirst={isPhone}
+          first={<PhoneIcon fontSize="5xl" />}
+          second={<ChatIcon fontSize="5xl" />}
+        />
+      </Box>
+    </Box>
+  );
+};

src/Router.tsx

@@ -0,0 +1,18 @@
+import { Route, Routes } from "react-router-dom";
+import { ListPage } from "./Pages/List1/ListPage";
+import { VideoDetail } from "./Pages/Video/VideoDetail";
+import { VideoHome } from "./Pages/Video/VideoHome";
+
+const Router = () => {
+  return (
+    <main>
+      <Routes>
+        <Route path={"/"} element={<VideoHome />} />
+        <Route path={"/list"} element={<ListPage />} />
+        <Route path={"/page"} element={<VideoDetail />} />
+      </Routes>
+    </main>
+  );
+};
+
+export default Router;

src/index.tsx

@@ -11,10 +11,10 @@ if (!container) throw new Error('Failed to find the root element');
 const root = ReactDOM.createRoot(container)
 
 root.render(
-  <React.StrictMode>
+  <>
     <ColorModeScript />
     <App />
-  </React.StrictMode>,
+  </>,
 )
 
 // If you want your app to work offline and load faster, you can change