Animated headlines and short text sections for Gutenberg
Kinetic Typography for headlines that move the message.
Create scroll-triggered animated headings, hero copy, section titles, editorial intros, feature highlights, and call-to-action text directly inside Gutenberg.
Animate Every Word.
Build scroll-triggered headlines with reveal, blur, and pop motion using server-rendered text splitting inside Gutenberg.
Live typography demo
Use the real block to turn plain headings into motion-led messaging.
Kinetic Typography generates the split text structure server-side and initializes
animation as the block enters the viewport, helping avoid unnecessary
animation work before the text is visible.
Build motion into meaning
1. Write the message
2. Choose the animation
3. Control the structure
4. Polish the design
Hover Me
Hero headline reveal
Use Reveal animation, character split, upward direction, smooth easing, and a short stagger for a clean premium entrance.
Section title focus
Use Blur In animation with word splitting for softer editorial section titles and feature introductions.
CTA energy
Use Pop In animation, snappy easing, and reverse order when a call-to-action headline should feel more energetic.
Responsive type control
Set desktop and mobile font sizes and line heights so large display text stays readable on smaller screens.
Why buy PRO
Typography is often the first thing visitors notice.
Kinetic Typography gives your headlines motion, rhythm, and visual hierarchy without forcing you to build custom animation code or depend on a heavy animation library.
Best for
Short copy that deserves more visual weight.
Use it where a static heading feels flat, but the message still needs to remain readable and accessible.
Use cases
Use animated text when the headline carries the page.
Kinetic Typography is strongest when the copy is concise, meaningful,
and placed in sections where attention matters.
Hero Headlines
Introduce the page with a reveal, blur, or pop entrance that feels intentional.
Product Launch Copy
Turn launch statements and value propositions into stronger visual moments.
Feature Sections
Make each feature heading feel distinct without adding extra design clutter.
Portfolio Titles
Animate project names, case study intros, and creative presentation headings.
Editorial Headers
Use word-based animation for calmer intros and story-led landing pages.
Service Pages
Add premium motion to service statements without changing the page structure.
CTA Blocks
Give final call-to-action headings more energy before the button.
Campaign Pages
Use timing, stagger, and direction to create a stronger scroll rhythm.
Free vs PRO
Start with clean text reveals. Upgrade for cinematic typography systems.
KineticHub Free gives you production-ready headline animation basics. KineticHub PRO unlocks advanced styles, visual addons, hover triggers, looping behavior, gradients, glow, plexus particles, and responsive visibility controls.
| Feature | KineticHub Free | KineticHub PRO |
|---|---|---|
| Core animation styles | Reveal, Blur In, Pop In | Included + more styles |
| Text splitting | Characters and words | Included |
| Scroll trigger | Included | Scroll + hover trigger |
| Direction, speed, stagger, threshold, easing | Included | Included |
| Semantic tag selection | Headings, paragraph, div, span support | Included |
| Outline text styling | Included | Included |
| Responsive font size and line height | Included | Included + mobile alignment |
| Advanced animation styles | Not included | Bounce, Flip, Skew, Scramble, Plexus, Pulse, Cyber |
| Visual addons | Not included | Highlight Sweep, Aurora Backlight, Levitation, Glitch, Reflection |
| Gradient, glow, blend mode, 3D perspective | Not included | Unlocked |
| Random timing and loop controls | Not included | Unlocked |
| Plexus network text effect | Not included | Density, speed, node size, line distance, colors, interaction |
| Responsive visibility controls | Not included | Hide on mobile / desktop |
FAQ
Kinetic Typography questions before you build.
Use this FAQ section for SEO, sales clarity, and fewer pre-sale/support questions.
Kinetic Typography is a Gutenberg block for creating animated headings and short text sections with scroll-triggered reveal, blur, and pop effects.
The Free version includes Reveal, Blur In, and Pop In animation styles, with controls for direction, speed, stagger, viewport threshold, easing, split type, and reverse order.
Yes. Character splitting is ideal for short hero headlines, while word splitting is better for longer headings and short marketing lines.
Yes. The block includes a screen-reader friendly fallback, supports semantic tag selection, and respects reduced motion preferences.
PRO adds advanced animation styles, hover triggers, repeat and loop behavior, random timing, gradients, glow, blend modes, aurora backlight, floor reflection, infinite levitation, highlight sweep, hover glitch, plexus network settings, pulse controls, mobile alignment, and responsive visibility controls.