### Development Commands (Bash) Source: https://context7.com/olivierlarose/cursor-hover-mask/llms.txt Provides common npm commands for managing a Next.js development environment. Includes starting the dev server, building for production, running the production server, and linting code. ```bash # Start development server on http://localhost:3000 npm run dev # Build optimized production bundle npm run build # Start production server npm run start # Run ESLint to check code quality npm run lint ``` -------------------------------- ### Development Server and Dependencies Setup (package.json) Source: https://context7.com/olivierlarose/cursor-hover-mask/llms.txt Defines scripts for running a Next.js development server, building production assets, and linting code. It also lists essential project dependencies including Next.js, React, Framer Motion, and SASS. ```json { "name": "cursor-hover-mask", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "13.4.12", "react": "18.2.0", "react-dom": "18.2.0", "framer-motion": "^10.14.0", "sass": "^1.64.1", "eslint": "8.45.0", "eslint-config-next": "13.4.12" } } ``` -------------------------------- ### Global Font and Theme Setup (CSS) Source: https://context7.com/olivierlarose/cursor-hover-mask/llms.txt Configures a custom font ('Avant Garde Book BT') using @font-face with WOFF format and sets a dark background color for the entire application body. It removes default margins for a full-bleed design. ```css @font-face { font-family: 'Avant Garde Book BT'; font-style: normal; font-weight: normal; src: url('../../public/fonts/AVGARDD_2.woff') format('woff'); } body { margin: 0px; background-color: #0f0f0f; font-family: 'Avant Garde Book BT'; } /* Result: Applies Avant Garde font globally with near-black background Removes default margins for full-bleed design */ ``` -------------------------------- ### Create CSS Mask Layers for Reveal Effect - SCSS Source: https://context7.com/olivierlarose/cursor-hover-mask/llms.txt Defines viewport-height container and two overlay layers: .mask and .body. Uses an SVG mask for .mask and absolute positioning to layer it above base text. Colors and font sizes are set for contrast and readability. Requires a mask.svg in public. ```scss .main { height: 100vh; .mask, .body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #afa18f; font-size: 64px; line-height: 66px; cursor: default; p { width: 1000px; padding: 40px; } span { color: #ec4e39; } } .mask { mask-image: url('../../public/mask.svg'); mask-repeat: no-repeat; mask-size: 40px; background: #ec4e39; position: absolute; color: black; } } /* Result: Creates orange (#ec4e39) masked overlay on black background with beige (#afa18f) base text, centering content in viewport */ ``` -------------------------------- ### Configure Next.js App Root Layout - Next.js 13 Source: https://context7.com/olivierlarose/cursor-hover-mask/llms.txt App Router root layout that wraps all pages and sets global HTML metadata. Loads globals.css and provides an html/body structure. Used to apply global styles, fonts, and base semantics across the app. ```javascript import './globals.css' export const metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({ children }) { return ( {children} ) } // Usage: Wrap entire app with custom fonts and global styles // All pages inherit this layout structure automatically ``` -------------------------------- ### Framer Motion Mask Animation (JavaScript) Source: https://context7.com/olivierlarose/cursor-hover-mask/llms.txt Implements a cursor-following mask effect using Framer Motion. It dynamically updates the WebkitMaskPosition and WebkitMaskSize based on cursor coordinates (x, y) and a calculated size, with smooth 'backOut' easing transitions. ```javascript import { motion } from 'framer-motion'; // Framer Motion configuration for cursor-following mask const maskAnimation = { animate: { WebkitMaskPosition: `${x - (size/2)}px ${y - (size/2)}px`, WebkitMaskSize: `${size}px`, }, transition: { type: "tween", ease: "backOut", duration: 0.5 } }; // Example usage with state-driven sizing: const [isHovered, setIsHovered] = useState(false); const { x, y } = useMousePosition(); const size = isHovered ? 400 : 40; {/* Masked content */} // Result: Mask center follows cursor exactly, size transitions smoothly // from 40px to 400px with backOut easing over 0.5 seconds ``` -------------------------------- ### Implement Cursor-Following Mask Reveal Effect - Next.js Source: https://context7.com/olivierlarose/cursor-hover-mask/llms.txt Next.js client component that renders a masked layer revealing alternate text as the cursor moves. Toggles mask size on hover (40px to 400px) and animates using Framer Motion tween with backOut easing. Ensure corresponding SCSS and SVG mask are in place. ```javascript 'use client' import styles from './page.module.scss' import { useState } from 'react'; import { motion } from 'framer-motion'; import useMousePosition from './utils/useMousePosition'; export default function Home() { const [isHovered, setIsHovered] = useState(false); const { x, y } = useMousePosition(); const size = isHovered ? 400 : 40; return (

{setIsHovered(true)}} onMouseLeave={() => {setIsHovered(false)}} > A visual designer - with skills that haven't been replaced by A.I (yet) - making good shit only if the paycheck is equally good.

I'm a selectively skilled product designer with strong focus on producing high quality & impactful digital experience.

) } // Result: Renders dual-layer text with 40px circular mask that expands to 400px // on hover, following cursor position with smooth backOut easing animation ``` -------------------------------- ### Track Cursor Position with useMousePosition Hook - React Source: https://context7.com/olivierlarose/cursor-hover-mask/llms.txt Custom React hook that listens to mouse movements and exposes the current cursor coordinates. Returns an object with x/y values updated on every mousemove. Cleans up event listeners on unmount. Useful for any cursor-driven animation or positioning logic. ```javascript import { useState, useEffect } from "react"; const useMousePosition = () => { const [mousePosition, setMousePosition] = useState({ x: null, y: null }); const updateMousePosition = e => { setMousePosition({ x: e.clientX, y: e.clientY }); }; useEffect(() => { window.addEventListener("mousemove", updateMousePosition); return () => window.removeEventListener("mousemove", updateMousePosition); }, []); return mousePosition; }; export default useMousePosition; // Usage in component: import useMousePosition from './utils/useMousePosition'; function MyComponent() { const { x, y } = useMousePosition(); console.log(`Cursor at: ${x}, ${y}`); // Returns: { x: 450, y: 300 } (updates continuously) } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.