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 = () => {
这一年,以笔为剑,以梦为马,在生活的画布上,绘就属于自己的壮丽史诗。
+