diff --git a/src/components/stateless/ContentPlaceholder/index.jsx b/src/components/stateless/ContentPlaceholder/index.jsx index 9a7f06d9..110b23e6 100644 --- a/src/components/stateless/ContentPlaceholder/index.jsx +++ b/src/components/stateless/ContentPlaceholder/index.jsx @@ -30,6 +30,11 @@ const ContentPlaceholder = () => ( transition={{ duration: 0.8 }} className={styles.contentPlaceholder} > +
+ + + +
{paragraphs.map((words) => ( ))} diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx index 507243dc..7128f833 100644 --- a/src/pages/home/index.jsx +++ b/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) diff --git a/src/pages/motion/index.jsx b/src/pages/motion/index.jsx index 2c6dbd9a..1eb379f9 100644 --- a/src/pages/motion/index.jsx +++ b/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 (

Hi, Motion

- + {rounded}