Kinetic Typography

Overview

Kinetic Typography creates animated headings and short text directly inside the WordPress block editor.

The block splits the text into individual characters or words on the server, then applies staggered animation on the frontend.

Use it for:

• Hero headlines
• Section headings
• Product announcements
• Landing-page introductions
• Portfolio titles
• Feature highlights
• Campaign messages
• Calls to action
• Short editorial statements

Kinetic Typography works best with concise text. Use a normal Paragraph block for long-form body content.

Add the block

1. Open a page or post in Gutenberg
2. Search for Kinetic Typography
3. Insert the block
4. Type the text directly into the block
5. Choose the correct HTML tag
6. Select an animation style
7. Configure the direction, duration, and stagger
8. Adjust responsive typography
9. Update the page
10. Test the animation on the frontend

The block produces no frontend output when the text field is empty.

Write the text

Type the headline or short message directly into the block.

Kinetic Typography is designed for plain animated text. Inline RichText formatting such as separately bolding, italicizing, or linking individual words is not available inside the block.

Use the block-level styling controls to configure the complete text.

Line breaks can be used to divide a headline into multiple lines.

For best results:

• Keep character-based headlines relatively short
• Use word splitting for longer sentences
• Avoid very long stagger delays
• Check wrapping on mobile
• Use a readable final text state
• Do not animate every heading on the page

HTML Heading Tag

Open Content & Mechanics and choose the semantic output tag.

Available editor options:

• H1
• H2
• H3
• H4
• Paragraph
• Div

H1

Use H1 for the primary page heading.

Most pages should contain only one main H1.

H2

Use H2 for major page sections.

This is the default tag.

H3 and H4

Use these for subsections that belong below a higher-level heading.

Paragraph

Use Paragraph when the animated text is normal copy rather than a heading.

Div

Use Div for decorative text that should not be part of the heading hierarchy.

Choose the tag according to the meaning of the content, not its visual size. Font size can be changed independently.

Split Strategy

Choose how the text is divided for animation:

• Characters
• Words

Characters

Each visible character becomes an individual animated item.

Character splitting provides:

• Detailed staggered movement
• Stronger kinetic effects
• More precise letter-by-letter reveals
• More animated elements

Use it for short headlines, individual words, and brief statements.

Words

Each word becomes one animated item.

Word splitting provides:

• Calmer movement
• Better readability
• Fewer animated elements
• Better performance for longer text

Use it for longer headings or short sentences.

Automatic long-text protection

When character splitting is selected and the cleaned text exceeds approximately 500 characters, the frontend renderer automatically switches to word splitting.

This prevents an unusually large number of individual animated elements.

The editor also displays a warning when long text is used with character splitting.

Animation Styles

KineticHub Free includes:

• Reveal — Masked
• Blur In
• Pop In

KineticHub PRO adds:

• Bounce Drop
• 3D Flip
• Skew Shift
• Matrix Scramble
• Plexus Network — Canvas
• Continuous Pulse
• Cyber Node Focus

Reveal — Free

Characters or words enter through a masked reveal.

Use it for:

• Professional hero headings
• Section titles
• Minimal landing pages
• Editorial layouts

Reveal is the recommended general-purpose animation.

Blur In — Free

The text moves from a blurred state into a sharp, readable state.

Use it for:

• Cinematic headings
• Soft visual transitions
• Photography-based sections
• Atmospheric landing pages

Avoid combining strong blur with very long durations.

Pop In — Free

Each character or word enters with a more energetic scaling effect.

Use it for:

• Product announcements
• Promotional headings
• Playful layouts
• Short calls to action

Bounce Drop — PRO

Text enters with a dropping and bouncing movement.

Use it for expressive headings where a softer professional reveal would feel too restrained.

The Bouncy easing mode can make the effect stronger.

3D Flip — PRO

Characters or words rotate into view using perspective.

The result is influenced by the 3D Perspective setting.

Use it for:

• Technology pages
• Product launches
• Creative portfolios
• High-impact hero headings

Skew Shift — PRO

Text enters with a skewed directional movement.

It works well with left or right movement directions and creates a sharper editorial effect.

Matrix Scramble — PRO

Characters cycle through temporary symbols before returning to the original text.

The frontend uses a set of technical-looking glyphs during the scramble sequence.

Use it for:

• Technology headings
• Cyber-themed sections
• Developer products
• Data and AI presentations

Matrix Scramble works best with character splitting and short text.

Plexus Network — PRO

Plexus replaces the normal entrance presentation with an animated canvas network associated with the text.

The effect creates moving nodes and connecting lines:

• Inside the letter areas
• Across the complete typography area

Plexus includes its own density, movement, color, spread, and pointer-interaction controls.

Continuous Pulse — PRO

The text changes scale and opacity in a repeated pulse.

Use Loop Infinite when the effect should continue rather than play a single cycle.

Continuous Pulse includes separate controls for:

• Pulse intensity
• Minimum opacity
• Pulse mode

Use it carefully because continuous text movement can become distracting.

Cyber Node Focus — PRO

Cyber Node Focus creates a technical segmented focus effect around the text items.

It is intended for short futuristic headings and works well with glow, gradient, or cyber-themed visual styling.

Movement Direction

For supported animation styles, choose:

• Move Upwards
• Move Downwards
• From Left
• From Right

Direction controls the initial movement of each character or word.

The Direction control is hidden for styles that use their own animation logic:

• Plexus Network
• Continuous Pulse
• Matrix Scramble
• Cyber Node Focus

Duration / Speed

Available range:

0.1–3 seconds

Default:

0.6 seconds

This controls the duration of each animated character or word.

Lower values produce faster movement.

Higher values produce slower movement.

Recommended starting values:

• 0.3–0.5 for quick headings
• 0.6–0.9 for normal reveals
• 1.0–1.5 for cinematic movement

The complete animation can last longer than this value because every item may start after a stagger delay.

Stagger Delay

Available range:

0–0.5 seconds

Default:

0.05 seconds

Stagger determines how long the block waits before starting the next character or word.

Example:

• 10 animated items
• Stagger: 0.05
• The final item begins approximately 0.45 seconds after the first item

Use smaller stagger values with character splitting.

Recommended values:

• Characters: 0.02–0.06
• Words: 0.05–0.15

A large stagger applied to a long headline can make the animation take too long to finish.

Easing Mode

Choose:

• Smooth — Default
• Bouncy
• Snappy

Smooth

Creates a controlled entrance that slows gently near the final position.

Use it for most professional layouts.

Bouncy

Adds overshoot to the movement.

Use it with Pop In or Bounce Drop for a more energetic presentation.

Snappy

Creates a faster, more decisive finish.

Use it for technical layouts and short interface-style headings.

Activation Trigger

On Scroll — Free and PRO

The animation starts when the block reaches the selected viewport threshold.

This is the only trigger available in KineticHub Free.

The frontend uses viewport observation rather than running every text animation immediately when the page loads.

On Mouse Hover — PRO

The animation starts when the visitor moves the pointer over the typography block.

Use hover only as an enhancement.

Important text should remain understandable for touchscreen, keyboard, and reduced-motion visitors.

The trigger selector is not displayed for Plexus because Plexus uses its own canvas lifecycle.

Viewport Trigger Point

This setting appears when On Scroll is selected.

Available range:

0–1

Default:

0.2

Examples:

• 0.0 starts as soon as the block begins entering the viewport
• 0.2 starts when approximately 20% is visible
• 0.5 starts near half visibility
• 0.8 waits until most of the block is visible

Use a lower value for large headings that may never become fully visible on a small screen.

Repeat on Scroll — PRO

When enabled, the entrance animation can replay when the block leaves and later re-enters the viewport.

When disabled, the normal scroll animation completes once and remains in its final state.

This control is not shown when Plexus uses Continuous Motion.

When Repeat on Scroll is enabled, the separate Loop Animation selector is hidden because repetition is controlled by viewport entry instead.

Replay on Mouse Leave — PRO

This option appears when On Mouse Hover is selected.

When enabled:

1. The visitor hovers over the text
2. The animation runs
3. The pointer leaves the text
4. The animation resets
5. The next hover can trigger it again

When disabled, the hover animation remains in its completed state.

The setting is not shown for continuously running Plexus behavior.

Reverse Animation Order

Reverses the stagger sequence.

Normally, animation begins with the first character or word and progresses toward the last.

When Reverse Animation Order is enabled, the last item begins first.

Use it for:

• Right-aligned headings
• Reverse visual direction
• Alternating section animations
• More unusual reveal patterns

This setting is available in Free and PRO.

Randomize Timing — PRO

Replaces the normal sequential stagger order with randomized delays.

Use it for:

• Scramble effects
• Technical headings
• Particle-like entrances
• Irregular reveals

Random timing is less predictable and can make long text harder to follow.

Loop Animation — PRO

Choose:

• Play Once
• Loop Infinite

Play Once

Runs one animation cycle.

Loop Infinite

Repeats the selected animation continuously.

Use Loop Infinite mainly with:

• Continuous Pulse
• Short decorative text
• Subtle animated headings

The loop selector is hidden when repetition is already controlled by:

• Repeat on Scroll
• Replay on Mouse Leave
• Continuous Plexus

Avoid infinite looping on large headings or long paragraphs.

Responsive Typography

Open Responsive Typography.

Desktop Font Size

Available range:

12–200 px

Sets a custom desktop font size.

Mobile Font Size

Available range:

12–100 px

Sets a separate size for smaller screens.

Use it to prevent large hero headings from wrapping into too many lines.

Desktop Line Height

Available range:

0.8–3

Controls the desktop line-height ratio.

Mobile Line Height

Available range:

0.8–3

Controls line height independently on mobile.

Large multi-line mobile headings often need slightly more line height than a single desktop line.

Reset responsive sizes

Removes the custom Kinetic Typography overrides and returns the block to native WordPress or theme typography values.

Mobile Alignment Override — PRO

Choose:

• Inherit
• Left
• Center
• Right

Inherit uses the normal block alignment.

The other options change text alignment only on mobile.

Native WordPress typography controls

Kinetic Typography also supports WordPress controls for:

• Font size
• Line height
• Text alignment
• Font family
• Font weight
• Font style
• Letter spacing
• Text transform

The exact controls available depend on the active theme.

The KineticHub desktop and mobile size controls act as responsive overrides. Use Reset responsive sizes to return fully to the native theme values.

Visual Styles

Enable Outline Mode — Free and PRO

Converts the text into an outlined presentation.

Stroke Width

Available range:

1–10 px

The control appears only when Outline Mode is enabled.

Use smaller values for normal headings and larger values for oversized display text.

Check contrast carefully because outlined text can be difficult to read over complex backgrounds.

Optical Blend Mode — PRO

Choose:

• Normal
• Difference
• Exclusion
• Overlay

The blend mode affects how the typography block visually combines with the content behind it.

Normal

Displays the selected text color normally.

Difference

Produces a high-contrast inverted interaction with the background.

Exclusion

Creates a softer result than Difference.

Overlay

Combines the text with the light and dark values of the background.

Blend-mode results depend heavily on the surrounding background. Always test the published page.

Enable Text Gradient — PRO

Applies a gradient across the text.

When enabled, configure:

• Start Color
• End Color
• Gradient Angle

Gradient Angle

Available range:

0–360 degrees

The gradient is applied across the complete text presentation.

Enable Neon Glow — PRO

Adds a luminous glow around the text.

When enabled, select Glow Color.

Glow works best on dark backgrounds and with sufficiently thick text.

Avoid combining a strong glow with thin outline text unless the result remains readable.

3D Perspective — PRO

Available range:

500–3000

Default:

1000

Perspective affects animation styles that use 3D rotation, especially 3D Flip.

Lower values create a stronger perspective effect.

Higher values create a flatter and more distant perspective.

Visual Addons — PRO

The Visual Addons panel is available for all animation styles except Plexus Network.

Cinematic Highlight Sweep

Draws a marker-style highlight behind the text after the main entrance animation completes.

When enabled, choose Highlight Color.

Use an alpha-enabled color so the text remains readable over the highlight.

Aurora Ambient Backlight

Adds a soft blurred aura behind the complete typography block.

When enabled, configure:

• Aura Color
• Aura Spread

Aura Spread

Available range:

10–150 px

Higher values create a larger and softer ambient glow.

Allow sufficient space around the text so the aura is not clipped by a parent with hidden overflow.

Infinite Levitation

Moves the complete typography block gently on the vertical axis.

This effect is independent of the initial character or word entrance.

Use it for short hero text and decorative headings.

Avoid combining levitation with several other continuously moving elements in the same section.

Cyberpunk Hover Glitch

Applies a subtle RGB distortion when the visitor hovers over the text.

The normal text remains visible before hover.

Since touchscreen devices do not provide reliable hover interaction, do not use this effect to communicate essential information.

Cinematic Floor Reflection

Adds a faded mirrored text reflection below the original typography.

When enabled, configure:

• Distance from Text
• Reflection Opacity

Distance from Text

Available range:

-50–50 px

Negative values move the reflection closer to or underneath the original text.

Positive values increase the space below the text.

Reflection Opacity

Available range:

0.1–1

Use a low value for a realistic floor reflection.

Allow enough lower spacing so the reflection is not clipped.

Plexus Settings — PRO

The Plexus panel appears only when Plexus Network — Canvas is selected.

Node Density

Available range:

10–100

Default:

60

Controls the number of particles generated by the canvas engine.

Higher values create a denser network and require more rendering work.

Movement Speed

Available range:

0.1–1

Default:

0.5

Controls particle movement speed.

Network Opacity

Available range:

0.1–1

Default:

0.8

Controls the overall visibility of nodes and connecting lines.

Node Thickness

Available range:

0.5–10

Default:

1.5

Controls the approximate particle size.

Line Connection Distance

Available range:

10–100

Default:

45

Nodes are connected when they are close enough to each other.

A larger value creates more connecting lines and a denser visual network.

Cursor Interaction

Choose:

• None
• Repel Particles
• Attract Particles

None

Pointer movement does not influence the network.

Repel Particles

Nearby particles move away from the pointer.

Attract Particles

Nearby particles move toward the pointer.

Pointer interaction is applied within a limited area around the cursor.

Particle Spread

Choose:

• Strict Inside Letters
• Free Float Around Text

Strict Inside Letters

Particles are initially distributed inside the measured character or word areas.

This creates a network that follows the typography more closely.

Free Float Around Text

Particles can occupy the complete block area.

This creates a looser ambient network around the headline.

Continuous Motion

When enabled, the canvas network keeps moving continuously.

When disabled, the network follows the block’s active animation state rather than running permanently.

Nodes Color

Controls the particle color.

Connecting Lines Color

Controls the color of the lines drawn between nearby nodes.

For a clear network, use related colors with sufficient contrast against the section background.

Pulse Settings — PRO

The Pulse panel appears only when Continuous Pulse is selected.

Pulse Intensity

Available range:

0.01–0.2

Default:

0.06

Controls how much the text changes scale during the pulse.

Lower values create subtle breathing movement.

Higher values create a more noticeable pulse.

Pulse Minimum Opacity

Available range:

0.3–1

Default:

0.88

Controls how transparent the text becomes at the weakest part of the pulse.

Keep the value relatively high when the text contains important content.

Pulse Mode

Choose:

• Soft
• Balanced
• Deep

Soft

Creates the most restrained pulse.

Balanced

Creates a medium pulse suitable for normal promotional headings.

Deep

Creates the strongest visual change.

For a repeating pulse, select Loop Infinite under Content & Mechanics.

Visibility — PRO

KineticHub PRO includes:

• Hide on Mobile
• Hide on Desktop

The responsive breakpoint is approximately:

768 px

These settings hide the complete typography block.

Do not hide an essential page heading without providing an equivalent heading elsewhere for that device.

WordPress design controls

Kinetic Typography supports standard WordPress controls for:

• Block alignment
• Margin
• Padding
• Text color
• Background color
• Background gradient
• Link color
• Border color
• Border width
• Border style
• Border radius
• Native typography settings

Theme support determines which controls appear in the editor.

Editor and frontend behavior

The editor displays the text and most selected visual styling, but the complete animation runs on the live frontend.

The editor displays a notice explaining that frontend animation must be tested outside Gutenberg.

Always verify:

• Final movement
• Text wrapping
• Stagger timing
• Hover behavior
• Plexus interaction
• Reflection spacing
• Glow clipping
• Mobile font size
• Reduced-motion fallback

Accessibility

The frontend keeps an unsplit readable version of the text for assistive technologies.

The individual visual characters or words are marked as presentation content so screen readers do not announce every letter separately.

Choose the correct HTML tag to preserve the page hierarchy.

Avoid using animation as the only way to reveal important information.

The completed text should remain understandable without:

• Hover
• Continuous motion
• Pointer interaction
• Canvas effects
• Long animation sequences

Reduced motion

When the visitor requests reduced motion, Kinetic Typography presents the text in a readable static state and suppresses motion-heavy behavior.

This applies to effects such as:

• Character and word entrances
• Continuous pulse
• Infinite levitation
• Hover movement
• Plexus animation
• Other transform-heavy effects

The text content remains available.

Performance

The split-text structure is generated during server rendering.

The frontend:

• Starts scroll animations using viewport observation
• Uses the selected threshold
• Creates randomized or sequential delays
• Runs Matrix Scramble only when required
• Builds the Plexus canvas only for the Plexus style
• Cancels animation frames during cleanup
• Disconnects observers
• Removes pointer and resize handlers
• Cleans timers when an instance is removed

For better performance:

• Use character splitting only for short text
• Use word splitting for longer headlines
• Keep stagger values moderate
• Avoid several Plexus headings on one page
• Avoid combining many continuous visual addons
• Use lower Plexus density on mobile-heavy pages
• Test after enabling JavaScript optimization

Recommended configurations

Clean section heading

• Animation: Reveal
• Split: Words
• Direction: Move Upwards
• Duration: 0.6
• Stagger: 0.08
• Easing: Smooth
• Trigger: Scroll
• Threshold: 0.2
• Tag: H2

Cinematic hero heading

• Animation: Blur In
• Split: Characters
• Direction: Move Upwards
• Duration: 0.8
• Stagger: 0.03
• Easing: Smooth
• Large desktop size
• Reduced mobile size

With PRO:

• Text Gradient
• Subtle Neon Glow
• Aurora Backlight
• Highlight Sweep

Technology headline — PRO

• Animation: Matrix Scramble
• Split: Characters
• Duration: 0.8–1.2
• Stagger: 0.03–0.06
• Randomize Timing: Enabled
• Neon Glow: Enabled
• Blend Mode: Normal or Difference

Plexus heading — PRO

• Animation: Plexus Network
• Node Density: 40–60
• Movement Speed: 0.3–0.5
• Network Opacity: 0.5–0.8
• Node Thickness: 1–2
• Spread: Strict Inside Letters
• Interaction: Repel
• Continuous Motion: Enabled

Subtle continuous pulse — PRO

• Animation: Continuous Pulse
• Loop: Infinite
• Pulse Intensity: 0.02–0.05
• Minimum Opacity: 0.9–1
• Pulse Mode: Soft
• Avoid additional levitation

Troubleshooting

The block is missing on the frontend

Confirm that the block contains visible text.

The frontend renderer outputs nothing when the text is empty.

The animation does not run in the editor

This is expected.

The full animation runs on the published frontend.

The animation does not start on the frontend

Check:

• The block enters the viewport
• Viewport Trigger Point is not too high
• Reduced Motion is disabled
• Kinetic Typography is enabled in the dashboard
• Frontend JavaScript is loading
• JavaScript optimization is not delaying the block indefinitely
• Page and asset caches were cleared

The animation starts too late

Reduce Viewport Trigger Point.

For large mobile headings, use 0.1 or 0.2.

The complete animation takes too long

Reduce:

• Stagger Delay
• Duration
• Text length

Word splitting also reduces the number of animated items.

Character animation changed to word animation

The text may exceed approximately 500 characters.

The renderer automatically uses word splitting for long text to protect performance.

Text wraps incorrectly

Adjust:

• Desktop Font Size
• Mobile Font Size
• Line Height
• Letter spacing
• Parent width
• Word length

Also check whether the theme applies its own heading styles.

Custom font size does not follow the theme

The KineticHub responsive size controls act as custom overrides.

Use Reset responsive sizes to return to the native WordPress or theme typography settings.

Outline text is difficult to read

Increase contrast, reduce Stroke Width, or use a solid text presentation.

Avoid thin outline text over detailed imagery.

Gradient or blend mode looks different than expected

The result depends on:

• Background color
• Background image
• Parent opacity
• Browser blending
• Other overlapping elements

Test the final frontend rather than relying only on the editor preview.

Glow, aura, or reflection is clipped

Inspect the block and its parents for:

• overflow: hidden
• overflow: clip
• Fixed height
• Insufficient padding
• Rounded container clipping

Hover animation does not work on mobile

Touchscreen devices do not provide normal desktop hover behavior.

Use a scroll-triggered animation when the effect must also run on mobile.

Repeat on Scroll does not replay

Confirm that:

• Trigger is set to On Scroll
• Repeat on Scroll is enabled
• The block leaves the observed viewport area before re-entering
• Reduced Motion is disabled

Hover animation does not replay

Enable Replay on Mouse Leave and move the pointer fully outside the typography block before hovering again.

Continuous Pulse plays only once

Confirm that Loop Animation is set to Loop Infinite.

Then clear generated CSS and JavaScript caches and test the latest plugin version on the frontend.

Plexus does not appear

Check:

• KineticHub PRO is active
• Plexus Network is selected
• Canvas is not hidden by custom CSS
• The text has measurable width and height
• The block has a contrasting background
• Reduced Motion is disabled
• Frontend JavaScript is loading

Plexus interaction does not respond

Confirm that Cursor Interaction is set to Repel or Attract.

Pointer interaction is intended for mouse and trackpad devices and will not behave the same way on touchscreens.

Plexus consumes too many resources

Reduce:

• Node Density
• Line Connection Distance
• Movement Speed
• Number of Plexus blocks on the page

You can also disable Continuous Motion.

Floor reflection looks too strong

Reduce Reflection Opacity and adjust Distance from Text.

A subtle value generally produces a more realistic result.

Several effects compete with each other

Remove one or more continuous effects.

For example, avoid combining:

• Deep Continuous Pulse
• Infinite Levitation
• Strong Glow
• Floor Reflection
• Aurora Backlight

Use one dominant motion effect and one restrained supporting effect.

Next step

Continue with Kinetic Video Modal to open local, YouTube, and Vimeo videos inside a responsive modal without loading the complete video player before the visitor selects the poster.