Using Multiple KineticHub Blocks on One Page

Overview

KineticHub supports using multiple blocks on the same WordPress page.

You can combine blocks such as animated typography, interactive buttons, visual backgrounds, media elements, and scroll-based layouts to create a complete motion-driven page.

Each block remains an independent Gutenberg block with its own content and settings.

However, using many animations at the same time can make a page visually distracting or increase the work required from the visitor’s browser.

The goal is not to avoid multiple blocks. The goal is to combine them intentionally.

Plan the page before adding motion

Build the page structure before configuring advanced animations.

A useful workflow is:

1. Add the page headings and written content
2. Create the main layout using Group, Columns, or other structural blocks
3. Add images and media
4. Insert the required KineticHub blocks
5. Configure one section at a time
6. Test the complete page after each major addition

This makes it easier to identify which block or section causes a layout or performance problem.

Use one primary effect per section

A section usually works best when it has one dominant motion effect.

For example:

• Hero Mesh as the hero background
• Kinetic Typography for the hero heading
• Magnetic Button for the primary call to action
• Scroll Divider between major sections
• Before/After for a comparison section
• Video Modal for a demonstration section

Several KineticHub blocks can appear in the same section, but they should not compete for attention.

Avoid combining multiple strong background, pointer-following, continuous, and scroll-driven effects in the same small area.

Example page structure

A balanced landing page could use:

Hero section

• Kinetic Hero Mesh
• Kinetic Typography
• Kinetic Magnetic Button

Features section

• Standard WordPress Group or Columns blocks
• Kinetic Box for selected feature cards

Visual demonstration

• Kinetic Before/After
• Kinetic Video Modal

Brand or client section

• Kinetic Marquee

Story or showcase section

• Kinetic Split Scroll

Section transitions

• Kinetic Scroll Divider

This provides motion throughout the page without requiring every element to animate continuously.

Shared and block-specific behavior

KineticHub includes shared runtime behavior for common motion settings.

Individual blocks may also use their own:

• Intersection observers
• Resize observers
• Pointer listeners
• Scroll calculations
• Animation frames
• Media controls
• WebGL rendering
• Modal interactions

This allows each block to respond to its own layout and interaction requirements.

The total page workload depends on which blocks are used and how they are configured.

Blocks that may require more testing

Some blocks are more visually or computationally complex than a simple button or divider.

Test carefully when using multiple instances of:

• Kinetic Hero Mesh
• Kinetic Split Scroll
• Kinetic Cursor Reveal
• Kinetic Marquee
• Kinetic Audio Player
• Kinetic Video Modal
• Kinetic Before/After

This does not mean that these blocks cannot be combined.

It means that media size, continuous animation, sticky behavior, pointer tracking, and the complete page layout should be considered together.

Multiple Hero Mesh blocks

Hero Mesh creates an animated visual background and may use canvas or WebGL rendering depending on its configuration.

For most pages, one primary Hero Mesh section is sufficient.

When using more than one:

• Keep the sections separated
• Avoid several large animated canvases in the same viewport
• Test scrolling on mobile devices
• Check graphics performance on lower-powered devices
• Confirm that foreground text remains readable
• Use simpler configurations for secondary sections

A static or lighter background may be more appropriate for sections that are not the main visual focus.

Multiple continuous animations

Blocks such as Marquee, Ambient Aura, animated Typography effects, and some visual backgrounds can continue moving after they appear.

Several continuous effects may distract visitors even when the browser can render them smoothly.

Recommended practice:

• Keep continuous movement subtle
• Avoid several marquees in the same viewport
• Do not animate every heading
• Limit large moving backgrounds
• Pause or reduce nonessential movement where possible
• Test the page with reduced motion enabled

Motion should help visitors understand the page hierarchy.

Multiple pointer interactions

Pointer-following effects react to mouse or trackpad movement.

These may include:

• Magnetic buttons
• Cursor Reveal
• Kinetic Box tilt
• Interactive Hero Mesh behavior
• Before/After hover interactions

Avoid placing several strong pointer effects directly on top of or inside each other.

Nested pointer interactions can make movement difficult to predict and may create transform or stacking conflicts.

Keep the primary clickable action clear and test that normal links and buttons remain easy to use.

Nested KineticHub blocks

Some KineticHub blocks can contain standard Gutenberg content or may be placed inside parent layout blocks.

When nesting blocks, review:

• Parent overflow settings
• Position and z-index
• CSS transforms
• Minimum height
• Width constraints
• Pointer events
• Sticky positioning
• Mobile stacking
• Theme styles applied to nested content

A parent block using overflow: hidden may clip glows, handles, floating media, shadows, or transformed child elements.

A transformed parent can also affect sticky positioning and stacking contexts.

Test nested layouts in both the editor and frontend.

Sticky and scroll-driven sections

Sticky or pinned effects depend on the dimensions of the complete section.

When multiple scroll-driven sections are used:

• Leave enough normal content between them
• Avoid overlapping sticky containers
• Check the height of each parent section
• Test the transition from one pinned section to the next
• Check mobile fallback behavior
• Avoid placing sticky sections inside transformed parents
• Confirm that the visitor can always continue scrolling

Two complex pinned sections placed directly next to each other may feel abrupt even when they work technically.

Media files

Several KineticHub blocks may use images, video, or audio.

Page performance can be affected more by the media than by the block itself.

Use:

• Properly sized images
• WebP or AVIF where appropriate
• Compressed audio
• Poster images for video
• YouTube or Vimeo for externally hosted tutorial videos
• Lazy loading where supported
• Media dimensions close to the displayed size

Avoid reusing several very large source images when they are displayed in relatively small containers.

Mobile behavior

A page that feels balanced on desktop may contain too much motion on mobile.

On mobile:

• Review each block’s responsive settings
• Reduce large spacing
• Check text wrapping
• Test touch interactions
• Simplify sticky layouts when necessary
• Avoid several heavy animated sections in one viewport
• Use the global mobile motion option where appropriate
• Test on a real device

Do not rely only on the WordPress mobile preview.

Reduced motion

KineticHub supports the browser’s prefers-reduced-motion preference in its shared engine and supported block behaviors.

Still, review the complete page with reduced motion enabled.

Confirm that:

• Text remains visible
• Sections remain in the correct order
• Buttons and links still work
• Media remains accessible
• Sticky content does not become confusing
• Important information is not available only through animation

Reduced motion should preserve the page content while limiting nonessential movement.

Enable only the blocks you use

The KineticHub dashboard allows individual blocks to be enabled or disabled.

Disabling unused blocks can keep the block inserter easier to navigate.

Before disabling a block, confirm that it is not already used on an existing page.

A disabled block may appear unavailable when editing content that already contains it.

Test after each major change

When building a complex page, do not wait until the end to test everything.

After adding a major animated section:

1. Save the page
2. Open the frontend
3. Scroll through the complete section
4. Test interactive controls
5. Check nearby sections
6. Test mobile behavior
7. Check for clipping or overlap
8. Review browser performance
9. Confirm that no console errors appear

Testing incrementally makes it easier to identify the source of a problem.

Recommended combination guidelines

For most pages:

• Use one main animated hero
• Use standard Gutenberg blocks for the basic content structure
• Add KineticHub where motion provides a clear benefit
• Avoid continuous animation in every section
• Keep media optimized
• Separate complex scroll interactions
• Test nested layouts carefully
• Use Balanced mode as the initial setting
• Check reduced motion
• Test a real mobile device

There is no fixed maximum number of KineticHub blocks for every page.

The practical limit depends on the selected blocks, media, theme, device, and other scripts running on the website.

Troubleshooting

The page becomes choppy

Check whether several continuously animated or graphics-heavy blocks are visible at the same time.

Try:

• Removing a duplicate effect
• Simplifying a secondary background
• Reducing large media files
• Testing Balanced or Eco mode
• Disabling aggressive third-party scripts
• Testing the blocks individually

Effects interfere with each other

Check for nested transforms, pointer events, z-index, and overflow rules.

Move the affected blocks into separate parent containers and test again.

Sticky sections overlap

Review the parent height, sticky offset, overflow, and transforms.

Avoid nesting one sticky section inside another.

Glows or transformed elements are clipped

A parent Group, Columns, theme container, or KineticHub block may use overflow: hidden.

Change the parent overflow only after confirming that doing so does not break the intended layout.

The editor is slower than the frontend

The Gutenberg editor loads editing controls and additional WordPress interfaces that are not present on the public page.

Test final animation quality on the frontend.

When the editor becomes difficult to use, temporarily collapse panels, reduce the number of simultaneously open previews, or edit complex sections separately.

The page works on desktop but not mobile

Review mobile-specific layout, sticky, interaction, and media settings.

Simplify the most complex section and test it on a real device.

Next step

Continue with Working with Cache and Optimization Plugins to learn how CSS combination, JavaScript delay, caching, and generated assets can affect KineticHub blocks.