feat: blur text

src/components/stateless/BlurText/index.jsx

@@ -0,0 +1,52 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { useSprings, animated } from '@react-spring/web'
+
+import styles from './index.module.less'
+
+const BlurText = ({ text, delay = 200, className = '' }) => {
+  const words = text.split(' ')
+  const [inView, setInView] = useState(false)
+  const ref = useRef()
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true)
+          observer.unobserve(ref.current)
+        }
+      },
+      { threshold: 0.1 }
+    )
+
+    observer.observe(ref.current)
+
+    return () => observer.disconnect()
+  }, [])
+
+  const springs = useSprings(
+    words.length,
+    words.map((_, i) => ({
+      from: { filter: 'blur(10px)', opacity: 0, transform: 'translate3d(0,-50px,0)' },
+      to: inView
+        ? async (next) => {
+            await next({ filter: 'blur(5px)', opacity: 0.5, transform: 'translate3d(0,5px,0)' })
+            await next({ filter: 'blur(0px)', opacity: 1, transform: 'translate3d(0,0,0)' })
+          }
+        : { filter: 'blur(10px)', opacity: 0 },
+      delay: i * delay,
+    }))
+  )
+
+  return (
+    <p ref={ref} className={className}>
+      {springs.map((props, index) => (
+        <animated.span key={index} style={props} className={styles.blurText}>
+          {words[index]}&nbsp;
+        </animated.span>
+      ))}
+    </p>
+  )
+}
+
+export default BlurText

src/components/stateless/BlurText/index.module.less

@@ -0,0 +1,4 @@
+.blurText {
+  display: inline-block;
+  will-change: transform, filter, opacity;
+}

src/components/stateless/ShinyText/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import styles from './index.module.less'
+
+const ShinyText = ({ text, disabled = false, speed = 5, className = '' }) => {
+  const animationDuration = `${speed}s`
+
+  return (
+    <div
+      className={`${styles.shinyText} ${disabled ? styles.disabled : ''} ${className}`}
+      style={{ animationDuration }}
+    >
+      {text}
+    </div>
+  )
+}
+
+export default ShinyText

src/components/stateless/ShinyText/index.module.less

@@ -0,0 +1,23 @@
+.shinyText {
+  color: #333;
+  background: linear-gradient(120deg, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 80%) 50%, #000 60%);
+  background-size: 200% 100%;
+  background-clip: text;
+  background-clip: text;
+  display: inline-block;
+  animation: shine 5s linear infinite;
+}
+
+@keyframes shine {
+  0% {
+    background-position: 100%;
+  }
+
+  100% {
+    background-position: -100%;
+  }
+}
+
+.shinyText.disabled {
+  animation: none;
+}

src/pages/home/index.jsx

@@ -38,6 +38,8 @@ import ContentPlaceholder from '@stateless/ContentPlaceholder'
 import SkeletonFix from '@stateless/SkeletonFix'
 import { ReactSignature } from '@stateless/ReactSignature'
 // import AdvancedCodeBlock from '@stateless/AdvancedCodeBlock'
+import ShinyText from '@stateless/ShinyText'
+import BlurText from '@stateless/BlurText'
 import { oneApiChat, prettyObject, randomNum } from '@utils/aidFn'
 import { fireConfetti } from '@utils/confetti'
 
@@ -202,18 +204,27 @@ const Home = () => {
 
   return (
     <FixTabPanel ref={scrollRef}>
-      <section style={{ marginBottom: 15 }}>
+      <section style={{ marginBottom: 15, fontSize: 20 }}>
         <TypedText>Cool! Hi, React & Ant Design!</TypedText>
       </section>
 
-      <section className={styles.avatar}>React version: {version}</section>
+      <section className={styles.avatar} style={{ marginBottom: 15, fontSize: 24 }}>
+        React version: {version}
+      </section>
 
-      <section>
+      <section style={{ marginBottom: 15, fontSize: 20 }}>
         I love coding in <AlternatingText alternateText={['javascript', 'typescript', 'rect', 'vue']} />.
       </section>
-      <section style={{ marginBottom: 40 }}>
+      <section style={{ marginBottom: 15, fontSize: 20 }}>
         <AutoLink text="foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin" />
       </section>
+      <section style={{ marginBottom: 15, fontSize: 20 }}>
+        <ShinyText text="Just some shiny text!" disabled={false} speed={3} />
+      </section>
+      <section style={{ marginBottom: 15, fontSize: 20 }}>
+        <BlurText text="Isn't this so cool?!" delay={50} />
+      </section>
+
       <section className={styles.line}></section>
       <section>
         <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />