Reapply "add fade to pages and canvas duration"

This reverts commit 92a78a1178.

src/about/AboutPage.tsx

@@ -1,11 +1,14 @@
 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 <main className="about-page">
+  return <motion.main initial={main.initial} animate={main.animate} className="about-page">
     <div className="edge"/>
     <section className="about-container">
       <About components={{
@@ -13,5 +16,5 @@ export default function AboutPage() {
       }}/>
     </section>
     <div className="edge"/>
-  </main>
+  </motion.main>
 }

src/about/about.sass

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

src/articles/ArticlesList.tsx

@@ -2,10 +2,12 @@ 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";
 
-
-export function ArticlesList() {
-  return <main className="art-ctr">
+const main = AnimateFade();
+export default function ArticlesList() {
+  return <motion.main animate={main.animate} initial={main.initial} className="art-ctr">
     <section className="spacer"/>
     <section className="articles">
       {
@@ -15,7 +17,7 @@ export function ArticlesList() {
       }
     </section>
     <section className="spacer"/>
-  </main>
+  </motion.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 {AnimateSpin} from "../animations";
+import {AnimateFade, 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,10 +10,12 @@ 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 (
-    <main className="canvas">
+    <motion.main initial={main.initial} animate={main.animate} transition={{duration: 3}} className="canvas">
       <section className="canvas-ctr">
         <ThreeCanvas shadows>
           <OrbitControls enableZoom={false} />
@@ -29,7 +31,7 @@ export default function Canvas() {
       <h3 className="tooltip">
         Drag to orbit
       </h3>
-    </main>
+    </motion.main>
   )
 }
 

src/router/Route.tsx

@@ -1,7 +1,6 @@
 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];
@@ -21,7 +20,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;