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.
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
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
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.
