Galaxy Text Morph is a cinematic WebGL component that turns a living particle galaxy into fully styled typography as visitors scroll. Particles first gather into a readable letterform, then reveal the finished text through a fragmented pixel transition—creating a transformation that feels connected rather than like a simple fade.
Customize the headline and optional body text with separate Framer fonts, sizes, colors, alignment, width, line limits, and spacing. Shape the galaxy with four token-compatible colors, particle density, glow, twinkle, spiral arms, drift, scale, and depth. Add a stationary background star field for a richer sense of space, and control pointer repulsion for an interactive hover experience.
Fine-tune every stage of the animation, including scroll range, easing, smoothing, particle stagger, formation timing, text reveal, particle fade, pixel size, and breakup strength. The component supports sticky and regular layouts, automatic text fitting, responsive resizing, reduced-motion preferences, transparent backgrounds, design tokens, and adjustable rendering quality.
Ideal for immersive hero sections, portfolios, creative agencies, product launches, and storytelling experiences that need a memorable transition from motion to message.
Galaxy Text Morph is a cinematic WebGL component that turns a living particle galaxy into fully styled typography as visitors scroll. Particles first gather into a readable letterform, then reveal the finished text through a fragmented pixel transition—creating a transformation that feels connected rather than like a simple fade.
Customize the headline and optional body text with separate Framer fonts, sizes, colors, alignment, width, line limits, and spacing. Shape the galaxy with four token-compatible colors, particle density, glow, twinkle, spiral arms, drift, scale, and depth. Add a stationary background star field for a richer sense of space, and control pointer repulsion for an interactive hover experience.
Fine-tune every stage of the animation, including scroll range, easing, smoothing, particle stagger, formation timing, text reveal, particle fade, pixel size, and breakup strength. The component supports sticky and regular layouts, automatic text fitting, responsive resizing, reduced-motion preferences, transparent backgrounds, design tokens, and adjustable rendering quality.
Ideal for immersive hero sections, portfolios, creative agencies, product launches, and storytelling experiences that need a memorable transition from motion to message.
