Back

Library

/

Free

/

111

Text Mask

111

Text Mask

An interactive mask that appears over your element while hovering

Made by

Rick Waalders

override

hover

Override

Text Mask

Copy

Override

Copied to Clipboard!

Instructions

  1. Create a layer (text, frame)

  2. Duplicate that layer and position above or below

  3. Apply topLayer to the top layer and bottomLayer to the layer below

Code Preview

/**
 * Hover Mask - Mastering Framer
 * by Rick Waalders
 * https://x.com/rickwaalders
 */

import type { ComponentType } from "react"
import { useState, useEffect, useRef } from "react"

const MASK_SIZE = 100

export function bottomLayer(Component): ComponentType {
    return (props) => {
        return <Component {...props} style={{ pointerEvents: "none" }} />
    }
}

export function topLayer(Component): ComponentType {
    return (props) => {
        const ref = useRef(null)
        const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })

        useEffect(() => {
            const handleMouseMove = (e) => {
                if (ref.current) {
                    const rect = ref.current.getBoundingClientRect()
                    setMousePosition({
                        x: e.clientX - rect.left,
                        y: e.clientY - rect.top,
                    })
                }
            }

            window.addEventListener("mousemove", handleMouseMove)

            return () => {
                if (window) {
                    window.removeEventListener("mousemove", handleMouseMove)
                }
            }
        }, [])

        const extendedStyle = {
            color: "red",
            clipPath: `circle(${MASK_SIZE}px at ${mousePosition.x}px ${mousePosition.y}px)`,
            pointerEvents: "none",
            // filter: "blur(10px)",
        }

        return (
            <Component
                {...props}
                ref={(el) => {
                    ref.current = el
                }}
                style={extendedStyle}
            />
        )
    }
}

Terms of Use for Free Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.