feat: background mask

src/pages/_components/HomepageHero/index.tsx

@@ -148,8 +148,8 @@ function Name() {
  className={styles.name}
  onMouseMove={e => {
  const bounding = e.currentTarget.getBoundingClientRect()
- e.currentTarget.style.setProperty('--position-x', `${bounding.x}px`)
- e.currentTarget.style.setProperty('--position-y', `${bounding.y}px`)
+ e.currentTarget.style.setProperty('--mouse-x', `${bounding.x}px`)
+ e.currentTarget.style.setProperty('--mouse-y', `${bounding.y}px`)
  }}
  >
  <Translate id="homepage.hero.name">愧怍</Translate>

src/pages/_components/HomepageHero/styles.module.scss

@@ -50,8 +50,8 @@
  background-size: var(--lighting-size) var(--lighting-size);
  background-repeat: no-repeat;
 
- background-position-x: calc(var(--x) - var(--position-x) - calc(var(--lighting-size) / 2));
- background-position-y: calc(var(--y) - var(--position-y) - calc(var(--lighting-size) / 2));
+ background-position-x: calc(var(--x) - var(--mouse-x) - calc(var(--lighting-size) / 2));
+ background-position-y: calc(var(--y) - var(--mouse-y) - calc(var(--lighting-size) / 2));
 
  background-color: var(--lighting-color);
 

src/theme/BlogPostGridItems/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Variants, motion } from 'framer-motion'
+import { Variants, motion, useMotionValue } from 'framer-motion'
 import Link from '@docusaurus/Link'
 import type { Props as BlogPostItemsProps } from '@theme/BlogPostItems'
 import Tag from '@theme/Tag'
@@ -39,7 +39,15 @@ export default function BlogPostGridItems({ items }: BlogPostItemsProps): JSX.El
  )}-${('0' + dateObj.getDate()).slice(-2)}`
 
  return (
- <motion.div className={styles.postGridItem} key={blogMetaData.permalink} variants={item}>
+ <motion.div
+ className={styles.postGridItem}
+ key={blogMetaData.permalink}
+ variants={item}
+ onMouseMove={e => {
+ e.currentTarget.style.setProperty('--mouse-x', `${e.clientX}px`)
+ e.currentTarget.style.setProperty('--mouse-y', `${e.clientY}px`)
+ }}
+ >
  <Link to={permalink} className={styles.itemTitle}>
  {title}
  </Link>
@@ -70,6 +78,27 @@ export default function BlogPostGridItems({ items }: BlogPostItemsProps): JSX.El
  )}
  </div>
  <div className={styles.itemDate}>{dateString}</div>
+ <motion.div
+ style={{
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ background: 'rgba(0, 0, 0, 0.5)', // Adjust the opacity as needed
+ }}
+ />
+ <div
+ style={{
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ clipPath: 'circle(100px at var(--mouse-x) var(--mouse-y))',
+ // Ensure that the variables are set as CSS variables
+ }}
+ />
  </motion.div>
  )
  })}

src/theme/BlogPostGridItems/styles.module.scss

@@ -7,6 +7,7 @@
 }
 
 .postGridItem {
+ position: relative;
  min-width: 24rem;
  display: grid;
  grid-template-columns: max-content 1fr;
@@ -18,9 +19,11 @@
  padding: 1em 1.2em;
  background: var(--blog-item-background-color);
  border-radius: 6px;
- position: relative;
  transition: all 0.3s;
 
+ --x: 0;
+ --y: 0;
+
  &:hover {
  box-sizing: border-box;
  box-shadow: var(--blog-item-shadow);
@@ -82,6 +85,28 @@
  }
 }
 
+.spotlight {
+ --lighting-size: 300px;
+ --lighting-color: var(--ifm-color-primary);
+ --lighting-highlight-color: var(--ifm-color-primary-lightest);
+
+ background-image: radial-gradient(
+ var(--lighting-highlight-color),
+ var(--lighting-color),
+ var(--lighting-color)
+ );
+ background-size: var(--lighting-size) var(--lighting-size);
+ background-repeat: no-repeat;
+
+ background-position-x: calc(var(--x) - var(--mouse-x) - calc(var(--lighting-size) / 2));
+ background-position-y: calc(var(--y) - var(--mouse-y) - calc(var(--lighting-size) / 2));
+
+ background-color: var(--lighting-color);
+
+ color: transparent;
+ background-clip: text;
+}
+
 @media (width <= 768px) {
  .postGridItem {
  min-width: 100%;