feat: motion

src/components/stateless/ContentPlaceholder/index.jsx

@@ -30,6 +30,11 @@ const ContentPlaceholder = () => (
     transition={{ duration: 0.8 }}
     className={styles.contentPlaceholder}
   >
+    <section>
+      <Word width={75} />
+      <Word width={245} />
+      <Word width={120} />
+    </section>
     {paragraphs.map((words) => (
       <Paragraph words={words} />
     ))}

src/pages/home/index.jsx

@@ -35,11 +35,13 @@ import ShiCode from '@stateless/ShiCode'
 // import Masonry from '@container/masonryContainer'
 import DynamicBackground from '@stateless/DynamicBackground'
 import ContentPlaceholder from '@stateless/ContentPlaceholder'
-import { oneApiChat, prettyObject } from '@utils/aidFn'
+import { oneApiChat, prettyObject, randomNum } from '@utils/aidFn'
 import { fireConfetti } from '@utils/confetti'
 
 import styles from './index.module.less'
 
+const boxCount = Array.apply(null, Array(10))
+
 const Home = () => {
   const [aiText, setAiText] = useState('')
   const aiTextRef = useRef(null)

src/pages/motion/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import {
   motion,
   useAnimationControls,
@@ -7,6 +7,8 @@ import {
   useMotionValueEvent,
   useSpring,
   useTransform,
+  useMotionValue,
+  animate,
 } from 'motion/react'
 import FixTabPanel from '@stateless/FixTabPanel'
 import HorizontalScrollParallax from '@stateless/HorizontalScroll'
@@ -144,10 +146,18 @@ const ParallaxVert = () => {
 
   const rotate = useTransform(scrollY, [0, 100], [0, 360], { clamp: false })
 
+  const count = useMotionValue(10)
+  const rounded = useTransform(count, (value) => Math.round(value))
+
+  useEffect(() => {
+    const animation = animate(count, 1000, { duration: 10 })
+    return animation.stop
+  }, [])
+
   return (
     <FixTabPanel ref={scrollRef}>
       <h2>Hi, Motion</h2>
-
+      <motion.h2>{rounded}</motion.h2>
       <motion.div
         style={{
           position: 'fixed',