play around with animated text

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>
 

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>
  )
 }