SplitText

.gitignore

@@ -36,3 +36,5 @@ yarn-error.log*
 .vercel
 
 .eslintcache
+
+.npmrc

components/split-text/index.js

@@ -0,0 +1,60 @@
+import { useRect } from '@studio-freight/hamo'
+import { gsap } from 'gsap'
+import { SplitText as GSAPSplitText } from 'gsap/dist/SplitText'
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import s from './split-text.module.scss'
+
+gsap.registerPlugin(GSAPSplitText)
+
+export const SplitText = forwardRef(function SplitText(
+  { children, className, type },
+  ref,
+) {
+  const elementRef = useRef()
+  const [setRectRef, rect] = useRect()
+
+  const [splitted, setSplitted] = useState()
+
+  useImperativeHandle(ref, () => splitted, [splitted])
+
+  useEffect(() => {
+    const splitted = new GSAPSplitText(elementRef.current, {
+      tag: 'span',
+      type,
+    })
+    setSplitted(splitted)
+
+    return () => {
+      splitted.revert()
+      setSplitted()
+    }
+  }, [rect, type])
+
+  const render = useMemo(
+    () => (
+      <span className={className}>
+        <span className={s.wrapper}>
+          <span
+            style={{ visibility: 'hidden', display: 'inline-block' }}
+            ref={setRectRef}
+          >
+            {children}
+          </span>
+          <span ref={elementRef} className={s.splitText}>
+            {children}
+          </span>
+        </span>
+      </span>
+    ),
+    [children, className],
+  )
+
+  return render
+})

components/split-text/split-text.module.scss

@@ -0,0 +1,9 @@
+.wrapper {
+  display: inline-block;
+  position: relative;
+
+  .splitText {
+    position: absolute;
+    inset: 0;
+  }
+}

package.json

@@ -51,7 +51,9 @@
     "overrides": {
       "react": "18.2.0",
       "react-dom": "18.2.0",
-      "scheduler": "0.23.0"
+      "scheduler": "0.23.0",
+      "gsap": "npm:@gsap/business@^3.12.2",
+      "@studio-freight/hamo": "0.6.21"
     }
   },
   "lint-staged": {

pages/home/home.module.scss

@@ -8,9 +8,9 @@
     align-items: center;
     justify-content: center;
     min-height: 100vh;
-
-    .title {
-      flex-grow: 1;
-    }
+    text-align: justify;
+    font-size: desktop-vw(16px);
+    max-width: desktop-vw(500px);
+    margin: auto;
   }
 }

pages/home/index.js

@@ -1,11 +1,61 @@
+import { SplitText } from 'components/split-text'
+import { colors } from 'config/variables'
+import gsap from 'gsap'
 import { Layout } from 'layouts/default'
+import { useEffect, useState } from 'react'
 import s from './home.module.scss'
 
 export default function Home() {
+  const [titleSplitted, setTitleSplitted] = useState()
+
+  useEffect(() => {
+    const words = titleSplitted?.words
+
+    if (!words) return
+
+    words.forEach((word) => {
+      word.addEventListener(
+        'mouseenter',
+        () => {
+          gsap.fromTo(
+            word,
+            {
+              color: colors.green,
+            },
+            {
+              color: colors.white,
+              duration: 4,
+              ease: 'expo.out',
+            },
+          )
+        },
+        false,
+      )
+    })
+  }, [titleSplitted])
+
   return (
     <Layout theme="dark" className={s.home}>
       <section className={s.content}>
-        <h1 className={s.title}>satus</h1>
+        <h1 className={s.title}>
+          <SplitText
+            ref={(node) => {
+              if (node) setTitleSplitted(node)
+            }}
+            type="words"
+          >
+            Inceptum pulchrum, iterum incipiamus amici, Res novas aggrediamur,
+            virtute superbi. Aurora nova luce, spes nobis enitescat, Sicut sol
+            oriens, ex tenebris emergat. Ingenium nostrum flamma lucida flagret,
+            Consilium firmum, studium nos agitet. Labor et laboris fructus nobis
+            faveant, Perseverantia vincat, ita crescamus ameant. Principium est
+            fundamentum, quod nobis est datum, Inceptum pulchrum, munus magnum,
+            probatum. Manus ad aratrum, cor ad caelum dirigamus, Opus magnum
+            faciamus, vitam renovemus. Spes in pectore, etiam si nox obscurat,
+            Perseverando vincemus, quodcunque laborat. Inceptum pulchrum,
+            studium nostrum lucidum, Fama et gloria nobis, sic sit perpetuum.
+          </SplitText>
+        </h1>
       </section>
     </Layout>
   )