Revert "add fade to pages and canvas duration"

This reverts commit 5bcc960704.

src/about/AboutPage.tsx

@@ -1,14 +1,11 @@
 import "./about.sass";
 import {lazy} from "react";
 import {ExternalLink} from "../router/Link";
-import {motion} from "motion/react";
-import {AnimateFade} from "../animations";
 
 const About = lazy(() => import("./About.mdx"));
 
-const main = AnimateFade();
 export default function AboutPage() {
-  return <motion.main initial={main.initial} animate={main.animate} className="about-page">
+  return <main className="about-page">
     <div className="edge"/>
     <section className="about-container">
       <About components={{
@@ -16,5 +13,5 @@ export default function AboutPage() {
       }}/>
     </section>
     <div className="edge"/>
-  </motion.main>
+  </main>
 }

src/about/about.sass

@@ -55,8 +55,6 @@ $reader-bg: #27213C
   display: flex
   flex-direction: row
   justify-content: center
-  > img
-    min-width: 200px
 
 
 .clothing>img

src/articles/ArticlesList.tsx

@@ -2,12 +2,10 @@ import {useArticle} from "./ArticleContext";
 import "./list.sass";
 import {ReactComponent as BoxSvg} from "../img/blog-box.svg";
 import {Article, ARTICLES} from "./articles";
-import {motion} from "motion/react";
-import {AnimateFade} from "../animations";
 
-const main = AnimateFade();
+
-export default function ArticlesList() {
+export function ArticlesList() {
-  return <motion.main animate={main.animate} initial={main.initial} className="art-ctr">
+  return <main className="art-ctr">
     <section className="spacer"/>
     <section className="articles">
       {
@@ -17,7 +15,7 @@ export default function ArticlesList() {
       }
     </section>
     <section className="spacer"/>
-  </motion.main>
+  </main>
 }
 
 function BlogBox(props: { article: Article }) {

src/index/Canvas.tsx

@@ -2,7 +2,7 @@ import "./canvas.sass";
 import {motion} from "framer-motion";
 import {Canvas as ThreeCanvas} from "@react-three/fiber";
 import {Moon} from "./Moon";
-import {AnimateFade, AnimateSpin} from "../animations";
+import {AnimateSpin} from "../animations";
 import {Environment, OrbitControls, useTexture} from "@react-three/drei";
 import Jupiter from "../img/2k_jupiter.jpg";
 import Makemake from "../img/2k_makemake_fictional.jpg";
@@ -10,12 +10,10 @@ import Ceres from "../img/2k_ceres_fictional.jpg";
 import Haumea from "../img/2k_haumea_fictional.jpg";
 import MilkyWay from "../img/2k_stars_milky_way.jpg";
 
-const main = AnimateFade();
 export default function Canvas() {
 
-  // fade animation sync with loading
   return (
-    <motion.main initial={main.initial} animate={main.animate} transition={{duration: 3}} className="canvas">
+    <main className="canvas">
       <section className="canvas-ctr">
         <ThreeCanvas shadows>
           <OrbitControls enableZoom={false} />
@@ -31,7 +29,7 @@ export default function Canvas() {
       <h3 className="tooltip">
         Drag to orbit
       </h3>
-    </motion.main>
+    </main>
   )
 }
 

src/router/Route.tsx

@@ -1,6 +1,7 @@
 import React, {PropsWithChildren} from "react";
 import {useRouter} from "./RouterContext";
 import {Path} from "./router";
+import {ArticlesList} from "../articles/ArticlesList";
 
 type Route = [Path, string];
 type Routes = [Route, Route, Route];
@@ -20,7 +21,7 @@ function Route(props: PropsWithChildren & {route: Route}) {
 
 const Canvas = React.lazy(() => import("../index/Canvas"));
 const About = React.lazy(() => import("../about/AboutPage"));
-const ArticlesList = React.lazy(() => import("../articles/ArticlesList"));
+
 
 export function Routes() {
   const [index, about, articles] = ROUTES;