canvas init

src/index/Canvas.tsx

@@ -1,9 +1,15 @@
+import {motion} from "framer-motion";
+import "./canvas.scss";
+
 export function Canvas() {
   return (
-    <>
+    <main>
-      <main className="main">
+      <motion.h1 className="welcome" animate={{ rotate: 360 }}>
-        <h1>Welcome to my blog</h1>
+        Welcome to my blog
+      </motion.h1>
+      <canvas>
+
+      </canvas>
     </main>
-    </>
   )
 }

src/index/canvas.scss

@@ -0,0 +1,16 @@
+main {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 10%;
+  background: black;
+  color: white;
+}
+
+.welcome {
+  text-align: center;
+  top: 25%;
+  position: relative;
+}