From 9f73f856df52de3a53a5f97312b6cbd7e28dcae4 Mon Sep 17 00:00:00 2001
From: setsun <seanjeluo@gmail.com>
Date: Thu, 29 Jun 2023 22:22:52 -0400
Subject: [PATCH] play around with animated text

---
 components/Layout.tsx |  4 ++--
 pages/index.tsx       | 42 ++++++++++++++++++++++++++++++++----------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/components/Layout.tsx b/components/Layout.tsx
index c320cce5..99065fd8 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -17,8 +17,8 @@ const Layout: React.FC<Props> = (props) => (
     <div className="flex h-screen overflow-hidden">
       <Navigation />
 
-      <div className="w-full overflow-scroll relative">
-        <main className="p-4" style={{ minHeight: 'calc(100vh - 4rem)'}}>
+      <div className="w-full overflow-y-auto relative">
+        <main className="p-4" style={{ minHeight: 'calc(100vh - 5rem)'}}>
           {props.children}
         </main>
 
diff --git a/pages/index.tsx b/pages/index.tsx
index c011f22b..ce5050b9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
+import { useTrail, animated, config } from '@react-spring/web';
 import React from "react"
 import { GetStaticProps } from "next"
-import Layout from "../components/Layout"
 import { Canvas } from "@react-three/fiber";
 import WireframePlanet from "../components/hero-scenes/WireframePlanet";
 
@@ -13,6 +13,13 @@ import WireframePlanet from "../components/hero-scenes/WireframePlanet";
 //   { ssr: false },
 // );
 
+const ANIMATED_TEXT = [
+  "I'll miss the sea, but a person needs new experiences.",
+  "They jar something deep inside, allowing him to grow",
+  "Without change something sleeps inside us, and seldom awakens.",
+  "The sleeper must awaken."
+];
+
 export const getStaticProps: GetStaticProps = async () => {
   // todo: determine what data to fetch in home page
 
@@ -22,18 +29,33 @@ export const getStaticProps: GetStaticProps = async () => {
   }
 }
 
-interface Props {}
+interface Props { }
 
 const Index: React.FC<Props> = (props) => {
+  const trails = useTrail(ANIMATED_TEXT.length, {
+    delay: 500,
+    config: { mass: 5, tension: 200, friction: 300 },
+    from: { opacity: 0, transform: 'translate3d(0, -48px, 0)' },
+    to: { opacity: 1, transform: 'translate3d(0, 0px, 0)' },
+  });
+
   return (
-    <Canvas
-      className="w-full aspect-video"
-      camera={{
-        position: [0, 0, -30]
-      }}
-    >
-      <WireframePlanet />
-    </Canvas>
+    <div className='relative'>
+      <div className='absolute top-0 ml-2 mt-2'>
+        {trails.map((props, i) => (
+          <animated.div className="text-3xl font-extralight mb-3" style={props} key={i}>{ANIMATED_TEXT[i]}</animated.div>
+        ))}
+      </div>
+
+      <Canvas
+        className="w-full aspect-video"
+        camera={{
+          position: [0, 0, -30]
+        }}
+      >
+        <WireframePlanet />
+      </Canvas>
+    </div>
   )
 }