Magic_Text

Interactive text with floating images

About This Component Magic Text transforms ordinary text into an interactive visual experience. Add one or two images that float above your text, respond to cursor movement, or animate autonomously. With full font controls, blend modes, shadow customization, and smooth fade animations, this component brings creativity to any typographic layout while maintaining performance through viewport-aware rendering. Features Two animation modes — Hover Mode (images follow cursor) or Auto Mode (circular floating + cursor follow) Up to 2 simultaneous images with independent size, opacity, border radius, rotation, and blend mode controls Hover Mode fine-tuning — adjust follow strength (80–900), spread distance (0–240px), X/Y offsets, and float amount Auto Mode controls — animation speed (0.2–3x), spread area (0–280px), and circular radius (0–260px) Full typography customization — font family, size, weight, spacing, line height, alignment, and color Image gap & shadow — control spacing between multiple images (0–200px) and add custom box shadows Performance optimized — animations only run when component is in viewport, with smooth fade transitions #H2: Use Cases Hero sections with interactive, cursor-reactive headlines Creative portfolio headers that showcase brand imagery Product showcase titles with floating product shots Artistic landing page headlines for storytelling Modern blog post headers that engage readers before scrolling Technical Highlight Viewport-aware animations — uses useInView to pause all motion when component is out of view, saving CPU/battery Image error resilience — failed image loads are automatically hidden without breaking component layout Framer Motion powered — smooth linear and easeInOut transitions with no bouncy effects (0.35–0.45s duration) Static renderer detection — shows appropriate preview in Framer canvas during editing React optimization — implements useMemo, useCallback, and startTransition for minimal re-renders Accessibility ready — includes ARIA labels for interactive elements Cross-origin image support — handles external images with proper CORS-compatible attributes There should be a clear Refund Policy on the checkout page. Refund Policy: Due to the digital nature of this product, all sales are final. Refunds are not offered after purchase.

Interactive text with floating images