'use client'; import { useState, useEffect } from 'react'; import { motion, useMotionValue, transform } from 'framer-motion'; const DynamicFontHero = ({ text, boldedWords = [], addNewLineAfter = [] }) => { const [weight, setWeight] = useState(0); const x = useMotionValue(0); // Track mouse position on the x axis useEffect(() => { const handleWindowMouseMove = (event) => { x.set(event.clientX); }; window.addEventListener('mousemove', handleWindowMouseMove); return () => { window.removeEventListener('mousemove', handleWindowMouseMove); }; }, []); // use transform to update the new weight in proportion to the mouse position useEffect(() => { function updateOpacity() { const newWeight = transform(x.get(), [0, window.innerWidth], [200, 900]); setWeight(newWeight); } const unsubscribeX = x.on('change', updateOpacity); return () => { unsubscribeX(); }; }, []); return (

{text.split(' ').map((word) => { if (boldedWords.includes(word.toLowerCase())) { return ( {word}{' '} ); } else { return ( {word}{' '} {addNewLineAfter.includes(word.toLowerCase()) ?
: null} ); } })}

); }; export default DynamicFontHero;

{text.split(' ').map((word) => { if (boldedWords.includes(word.toLowerCase())) { return ( {word}{' '} ); } else { return ( {word}{' '} {addNewLineAfter.includes(word.toLowerCase()) ? : null} ); } })}

{text.split(' ').map((word) => { if (boldedWords.includes(word.toLowerCase())) { return ( {word}{' '} ); } else { return ( {word}{' '} {addNewLineAfter.includes(word.toLowerCase()) ?
: null} ); } })}

Dynamic Font on mouse move

WELCOME TO THE NEW CARRE STUDIO

Code

Example Use

WELCOME TO
THE NEW CARRE STUDIO