Magic Headline
Combine unlimited text styles and animations in one responsive headline. Built for designers who want clean structure and expressive typography.
About this Component
Magic Headline is built for designers who want typographic contrast without messy layer stacks. Write your copy once, then apply style rules to specific words to give them their own font, color, and animation preset.
You can animate globally or per rule, choose word or character animation, and fine-tune timing with duration, delay, and stagger. The component also supports semantic HTML tags so your type stays structured, accessible, and SEO-friendly.
Features
Single text field with multi-style formatting via word rules
Unlimited style rules with custom fonts and colors per rule
Built-in animation presets including Blur, Flip, Shake, Shoot, Rotate, Scale, and Stagger
Animate per word or per character
Timing controls for duration, delay, and stagger
Trigger options for On Appear or Layer in View
Semantic HTML tag selection H1–H6 or Paragraph for accessibility and SEO
Manual line breaks supported and fully responsive text wrapping
