50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T69a,.focus-container { position: relative; display: flex; gap: 1em; justify-content: center; align-items: center; flex-wrap: wrap; outline: none; user-select: none; } .focus-word { position: relative; font-size: 3rem; font-weight: 900; cursor: pointer; transition: filter 0.3s ease, color 0.3s ease; outline: none; user-select: none; } .focus-word.active { filter: blur(0); } .focus-frame { position: absolute; top: 0; left: 0; pointer-events: none; } .focus-highlight { position: absolute; top: 0; left: 0; border-radius: 6px; background-color: var(--highlight-color); pointer-events: none; } .focus-box { position: absolute; top: 0; left: 0; box-sizing: border-box; border: var(--border-width, 3px) solid var(--border-color, currentColor); border-radius: 6px; filter: drop-shadow(0 0 4px var(--glow-color, transparent)); } .focus-underline { position: absolute; top: 0; left: 0; border-radius: calc(var(--border-width, 3px) / 2); background-color: var(--border-color, currentColor); filter: drop-shadow(0 0 4px var(--glow-color, transparent)); } .corner { position: absolute; top: 0; left: 0; box-sizing: border-box; width: var(--corner-size, 1rem); height: var(--corner-size, 1rem); border: var(--border-width, 3px) solid var(--border-color, currentColor); border-radius: 3px; filter: drop-shadow(0 0 4px var(--glow-color, transparent)); } .top-left { border-right: none; border-bottom: none; } .top-right { border-left: none; border-bottom: none; } .bottom-left { border-right: none; border-top: none; } .bottom-right { border-left: none; border-top: none; } 53:T1af3,'use client'; import { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { motion, useReducedMotion } from 'motion/react'; import './TrueFocus.css'; const CORNERS = ['top-left', 'top-right', 'bottom-left', 'bottom-right']; const FRAME_GAP = 10; const SMOOTH_EASE = [0.65, 0, 0.35, 1]; const SMOOTH_CSS = 'cubic-bezier(0.65, 0, 0.35, 1)'; const SPRING_CSS = 'cubic-bezier(0.34, 1.56, 0.64, 1)'; const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; const TrueFocus = ({ sentence = 'True Focus', separator = ' ', manualMode = false, focusStyle = 'brackets', order = 'sequential', easing = 'smooth', blurAmount = 5, focusScale = 1, borderColor = 'green', highlightColor, glowColor = 'transparent', animationDuration = 0.5, pauseBetweenAnimations = 1, cornerSize = 16, borderWidth = 3, unfocusedOpacity = 1 }) => { const words = sentence.split(separator).filter(word => word.trim() !== ''); const [currentIndex, setCurrentIndex] = useState(0); const [focusRect, setFocusRect] = useState(null); const containerRef = useRef(null); const wordRefs = useRef([]); const reduceMotion = useReducedMotion(); const duration = reduceMotion ? 0 : animationDuration; const activeIndex = words.length ? currentIndex % words.length : -1; const spring = easing === 'spring' && !reduceMotion; const transition = spring ? { type: 'spring', visualDuration: duration, bounce: 0.38 } : { duration, ease: SMOOTH_EASE }; useEffect(() => { if (manualMode || words.length < 2) return; const interval = setInterval( () => { const roll = Math.random(); setCurrentIndex(prev => { const current = prev % words.length; if (order !== 'random') return (current + 1) % words.length; const next = Math.floor(roll * (words.length - 1)); return next >= current ? next + 1 : next; }); }, (animationDuration + pauseBetweenAnimations) * 1000 ); return () => clearInterval(interval); }, [manualMode, animationDuration, pauseBetweenAnimations, words.length, order]); useIsomorphicLayoutEffect(() => { const container = containerRef.current; const word = wordRefs.current[activeIndex]; if (!container || !word) return; const measure = () => { const next = { x: word.offsetLeft, y: word.offsetTop, width: word.offsetWidth, height: word.offsetHeight }; setFocusRect(prev => prev && prev.x === next.x && prev.y === next.y && prev.width === next.width && prev.height === next.height ? prev : next ); }; measure(); if (typeof ResizeObserver === 'undefined') return; const observer = new ResizeObserver(measure); observer.observe(container); wordRefs.current.forEach(node => node && observer.observe(node)); return () => observer.disconnect(); }, [activeIndex, sentence, separator]); const frame = focusRect && { x: focusRect.x - (focusRect.width * (focusScale - 1)) / 2, y: focusRect.y - (focusRect.height * (focusScale - 1)) / 2, width: focusRect.width * focusScale, height: focusRect.height * focusScale }; const corners = frame && { 'top-left': { x: frame.x - FRAME_GAP, y: frame.y - FRAME_GAP }, 'top-right': { x: frame.x + frame.width + FRAME_GAP - cornerSize, y: frame.y - FRAME_GAP }, 'bottom-left': { x: frame.x - FRAME_GAP, y: frame.y + frame.height + FRAME_GAP - cornerSize }, 'bottom-right': { x: frame.x + frame.width + FRAME_GAP - cornerSize, y: frame.y + frame.height + FRAME_GAP - cornerSize } }; const shapes = frame && { box: { x: frame.x - FRAME_GAP, y: frame.y - FRAME_GAP, width: frame.width + FRAME_GAP * 2, height: frame.height + FRAME_GAP * 2 }, underline: { x: frame.x, y: frame.y + frame.height + FRAME_GAP * 0.4, width: frame.width, height: borderWidth }, highlight: { x: frame.x - frame.height * 0.14, y: frame.y + frame.height * 0.04, width: frame.width + frame.height * 0.28, height: frame.height * 0.92 } }; const frameStyle = { '--border-color': borderColor, '--highlight-color': `color-mix(in srgb, ${highlightColor ?? borderColor} 30%, transparent)`, '--glow-color': glowColor, '--corner-size': `${cornerSize}px`, '--border-width': `${borderWidth}px` }; return (

{focusStyle === 'highlight' && shapes && ( )} {words.map((word, index) => { const isActive = index === activeIndex; return ( { wordRefs.current[index] = el; }} className={`focus-word ${manualMode ? 'manual' : ''} ${isActive && !manualMode ? 'active' : ''}`} style={{ filter: `blur(${isActive ? 0 : blurAmount}px)`, opacity: isActive ? 1 : unfocusedOpacity, transform: focusScale !== 1 ? `scale(${isActive ? focusScale : 1})` : undefined, transition: `filter ${duration}s ease, opacity ${duration}s ease, transform ${duration}s ${spring ? SPRING_CSS : SMOOTH_CSS}` }} onMouseEnter={() => { if (manualMode) setCurrentIndex(index); }} > {word} ); })} {shapes && corners && focusStyle !== 'highlight' && ( )}

); }; export default TrueFocus; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion@^12.23.12",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^12.23.12"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"TrueFocus.css","content":"$52","type":"registry:file","target":"@components/TrueFocus.css"},{"path":"TrueFocus.jsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]