diff --git a/src/components/stateless/GradualSpacing/index.jsx b/src/components/stateless/GradualSpacing/index.jsx new file mode 100644 index 00000000..78118a74 --- /dev/null +++ b/src/components/stateless/GradualSpacing/index.jsx @@ -0,0 +1,32 @@ +import React, { useRef } from 'react' +import clsx from 'clsx' +import { AnimatePresence, motion, useInView } from 'motion/react' + +const GradualSpacing = ({ text = '', className = '' }) => { + const gradual = { + hidden: { opacity: 0, x: -20 }, + visible: { opacity: 1, x: 0 }, + } + const ref = useRef(null) + const isInView = useInView(ref, { once: true }) + return ( +
+ + {text.split('').map((char, i) => ( + + {char === ' ' ?   : char} + + ))} + +
+ ) +} + +export default GradualSpacing diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx index 35a380b7..55736022 100644 --- a/src/pages/home/index.jsx +++ b/src/pages/home/index.jsx @@ -58,6 +58,7 @@ import TestimonialCarousel from '@stateless/TestimonialCarousel' import InteractiveGrid from '@stateless/InteractiveGrid' import BlurFade from '@stateless/BlurFade' import IconCloud from '@stateless/IconCloud' +import GradualSpacing from '@stateless/GradualSpacing' import firstImage from '@assets/images/88-300x160.jpg' import secondImage from '@assets/images/2-300x160.jpg' @@ -563,6 +564,9 @@ const Home = () => { 这一年,以笔为剑,以梦为马,在生活的画布上,绘就属于自己的壮丽史诗。 +
+ +