Kinetic Hero Mesh

Overview

Kinetic Hero Mesh is a visual container for creating animated hero sections and large background layouts.

Use it for:

• Homepage heroes
• Product landing pages
• SaaS and technology pages
• Portfolio introductions
• Campaign headers
• Service pages
• Creative content sections

The background visual is separated from the foreground content, allowing headings, paragraphs, buttons, images, Columns, Groups, and other blocks to remain editable inside the hero.

Add the block

1. Open a page or post in Gutenberg
2. Search for Kinetic Hero Mesh
3. Insert the block
4. Replace or edit the starter content
5. Choose a Generative Engine Mode
6. Configure the hero height and alignment
7. Adjust the engine-specific settings
8. Configure the overlay and film grain
9. Update the page
10. Test the final result on the frontend

The block initially uses the Neural Network (Plexus) engine.

Starter content

When the block is inserted, it creates starter hero content.

When the related KineticHub blocks are available, the template can use:

• Kinetic Typography
• Kinetic Magnetic Button

Otherwise, it falls back to standard WordPress blocks such as:

• Heading
• Paragraph
• Button

The starter content can be edited, reordered, replaced, or removed.

WordPress block controls

Kinetic Hero Mesh supports standard WordPress controls for:

• Wide alignment
• Full alignment
• Margin
• Padding
• Text color
• Background color
• Font size
• Line height

The background engine remains a separate visual layer behind the nested content.

Use the WordPress background color as a fallback behind transparent or partially transparent engine effects.

Canvas Settings

Open Canvas Settings to select the engine and configure the hero layout.

Generative Engine Mode

KineticHub Free includes:

• Neural Network (Plexus)
• Classic Static

KineticHub PRO adds:

• Gradient Mesh (Blobs)
• Liquid Displacement
• Refractive Lens (Crystal)
• Aurora Silk Ribbons

Each engine displays only the controls relevant to that mode.

Desktop Height

Desktop Height (vh) controls the minimum hero height on larger screens.

Available range:

20–200 vh

Default:

100 vh

Examples:

• 60 vh creates a shorter hero
• 100 vh fills approximately one viewport
• Values above 100 vh create a section taller than the initial screen

You can also drag the bottom resize handle while the block is selected in Gutenberg. The measured editor height is converted into a viewport-height value.

Mobile Height

Mobile Height (vh) controls the hero height at mobile widths.

Available range:

20–200 vh

Default:

100 vh

Use a lower mobile value when the desktop hero leaves excessive empty space on a phone.

Make sure the selected height still contains all nested text and buttons after they wrap.

Vertical Alignment

Choose where the nested content appears vertically:

• Top
• Center
• Bottom

The default is Center.

This aligns the complete inner content area, not the individual text alignment of each nested block.

Use the nested blocks’ own alignment controls for left, center, or right text positioning.

Neural Network (Plexus)

Plexus is available in both Free and PRO.

It creates a Canvas-based network of moving nodes connected by lines.

The network reacts to the pointer according to the selected interaction mode.

Node Density

Controls the number of animated particles.

Available range:

10–100

Default:

80

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

On screens up to approximately 768px, the frontend limits the effective density to a maximum of 40 nodes for better mobile performance.

Movement Speed

Controls how quickly the nodes move.

Available range:

0.1–3.0

Default:

1.0

Use lower values for a calm background and higher values for a more energetic visual.

Connection Distance

Controls how close two nodes must be before a line is drawn between them.

Available range:

20–200 px

Default:

150 px

Lower values create fewer, shorter connections.

Higher values create a denser network of longer connections.

Line Width

Controls both the connection thickness and the approximate node size.

Available range:

0.5–3.0

Default:

1.0

Use thinner lines when the network is placed behind detailed text or bright content.

Cursor Interaction

Available options:

• Repel (Push)
• Attract (Pull)
• Constellation (Lines)
• None

Repel

Pushes nearby particles away from the pointer.

This is the default interaction.

Attract

Pulls nearby particles toward the pointer.

Constellation

Treats the pointer as an additional temporary node and draws connections between it and nearby particles.

None

The particles continue moving, but the pointer does not influence them.

Network Color

Sets the color of:

• Nodes
• Connection lines

The color control supports transparency.

A slightly transparent color usually blends more naturally into the background.

Classic Static

Classic Static displays an image background without an animated canvas engine.

It is available in both Free and PRO.

Source Image

Select an image from the WordPress Media Library.

Classic mode requires an image to create its intended background.

Image Fit

Available options:

• Cover
• Contain
• Fill

Cover

Fills the complete hero while preserving the image proportions.

Parts of the image may be cropped.

Contain

Displays the complete image while preserving its proportions.

Empty space may remain around the image.

Fill

Stretches the image to fill the complete hero.

This can distort the image when its ratio differs from the hero container.

Image Position

Choose the focal position:

• Center
• Top
• Bottom
• Left
• Right

Use this setting to keep the important subject visible when Cover crops the image.

Enable Parallax Effect

Applies a fixed-background scrolling effect to the Classic image.

The page content moves while the image appears more stationary behind the section.

This effect is best suited to desktop layouts. Mobile browsers may limit or ignore fixed-background behavior.

The parallax option applies only to Classic Static.

Gradient Mesh — PRO

Gradient Mesh creates animated color blobs using a 2D canvas.

It does not require a source image unless Blend over Image is enabled.

Blend over Image

When enabled, the gradient mesh is composited over a selected source image.

When disabled, only the animated color mesh is shown over the block background.

Source Image

Appears only while Blend over Image is enabled.

Select an image from the WordPress Media Library.

For reliable canvas loading, use a local Media Library image. An image hosted on another domain must permit cross-origin canvas access.

If the source image cannot be loaded, the colored mesh continues without it.

Layer Opacity

Controls the opacity of the animated color layer.

Available range:

0.1–1.0

Default:

0.8

Lower values allow more of the source image or background to remain visible.

Flow Speed

Controls how quickly the color blobs move.

Available range:

0.1–2.0

Default:

0.5

Mesh Node Colors

Select three colors for the animated mesh.

Default colors:

• Blue: #3b82f6
• Purple: #8b5cf6
• Pink: #ec4899

On desktop, the third color follows the pointer.

On mobile, the engine uses fewer animated blobs to reduce rendering work.

Liquid Displacement — PRO

Liquid Displacement applies an interactive WebGL distortion to a source image.

A source image is required.

The distortion forms around the pointer and produces animated wave movement with optional RGB separation.

Source Image

Select the image that will be used as the WebGL texture.

The image is rendered across the canvas.

The Classic Image Fit and Image Position controls do not apply to the Liquid engine.

Use an appropriately cropped source image that matches the intended hero ratio.

Liquid Viscosity

Controls how smoothly the interaction follows the pointer.

Available range:

0.01–0.50

Default:

0.10

Lower values create slower, smoother pointer movement.

Higher values make the response follow the pointer more quickly.

RGB Shift / Chromatic Aberration

Controls the separation between the red, green, and blue image channels around the liquid wave.

Available range:

0.1–2.0

Default:

0.5

Use lower values for a subtle distortion.

Wave Intensity

Controls the strength of the image displacement.

Available range:

0.01–0.10

Default:

0.02

High values produce a stronger ripple and can make text-heavy imagery difficult to recognize.

Refractive Lens — PRO

Refractive Lens creates an interactive crystal-like lens over a source image.

A source image and WebGL support are required.

The area near the pointer is refracted toward the pointer position, while the surrounding image uses a softened multi-sample treatment.

Source Image

Select the image used by the refractive shader.

Use a local, optimized image with a crop suitable for the complete hero area.

Crystal Scale

Controls the size of the interactive lens region.

Available range:

5–50

Default:

20

Lower values create a smaller lens.

Higher values create a larger refractive area around the pointer.

The Classic Image Fit and Image Position controls do not affect this engine.

Aurora Silk Ribbons — PRO

Aurora creates animated, screen-blended color fields that move across the hero.

It does not require a source image.

The engine uses several large color orbs to produce an aurora-style effect.

Flow Speed

Controls the movement speed.

Available range:

0.1–3.0

Default:

1.0

Lower values create slow ambient motion.

Higher values create faster color movement.

On desktop, additional color fields are used, including one that follows the pointer.

On mobile, fewer fields are rendered for better performance.

Composition Overlay

The overlay is placed above the background engine and below the nested content.

Use it to improve readability or alter the visual composition.

Overlay Blend Mode

Available options:

• Normal
• Multiply
• Overlay
• Screen
• Color Dodge
• Difference

Normal

Applies the overlay color normally.

This is the most predictable option for improving text contrast.

Multiply

Darkens the background by combining it with the overlay color.

Overlay

Combines contrast and color interaction with the background.

Screen

Produces a lighter result.

Color Dodge

Creates a bright and intense color interaction.

Use it carefully because it can reduce text readability.

Difference

Creates a high-contrast inverted interaction based on the colors beneath it.

Results vary significantly depending on the background.

Overlay Tint Color

Select the overlay color.

The color control supports alpha transparency.

Opacity Level

Controls the overlay strength.

Available range:

0–1

Default:

0.3

A dark overlay around 0.3–0.6 is a practical starting point for white foreground text.

Film Grain

Enable Film Grain Noise to add a cinematic texture across the hero.

The grain is decorative and appears above the visual background.

Use it subtly.

A strong grain texture can reduce the clarity of:

• Small text
• Thin typography
• Detailed images
• Fine Plexus lines

PRO visibility controls

KineticHub PRO adds responsive visibility controls:

• Hide on mobile
• Hide on desktop

These settings hide the complete Hero Mesh block, including its nested content.

Do not use them when the hero contains the only page heading, navigation action, or essential call to action.

Editor and frontend behavior

The editor provides:

• Nested content editing
• Approximate background preview
• Image selection
• Overlay preview
• Height resizing
• Engine settings

The final animated engine should always be tested on the frontend.

Canvas and WebGL behavior depends on:

• Actual container dimensions
• Browser graphics support
• Viewport position
• Pointer movement
• Device pixel ratio
• Reduced-motion preference
• Parent layout

A static, simplified, or incorrectly sized editor preview does not necessarily represent the published frontend.

Pointer and touch behavior

Animated engines track:

• Mouse movement
• Touch movement

When the pointer leaves the block, the interaction target returns toward the center.

Canvas layers do not receive clicks directly, so nested buttons and links remain available above them.

Pointer behavior is reduced on mobile because touch input does not provide continuous desktop-style hover.

Reduced motion

Kinetic Hero Mesh checks the visitor’s system-level reduced-motion preference.

When reduced motion is enabled:

• Animated canvas engines are hidden
• The Classic Static background remains available
• The nested content remains visible
• Overlay and layout styling remain available

Do not rely on the animated engine as the only way to communicate information.

Use a suitable WordPress background color, image, overlay, and readable foreground content as the static presentation.

Mobile optimization

At widths up to approximately 768px, Hero Mesh reduces rendering complexity.

The frontend uses:

• Device pixel ratio limited to 1
• Plexus density limited to 40 nodes
• Fewer Gradient Mesh blobs
• Fewer Aurora color fields

The desktop visual may therefore appear denser than the mobile version.

This is intentional.

Viewport performance

Animated engines run only while the hero is inside or near the visible viewport.

When the block leaves the active viewport area, its render loop stops.

When it becomes visible again, the engine resumes.

The block also recalculates its canvas dimensions when the container changes size.

This reduces unnecessary background rendering on long pages.

WebGL requirements

Liquid Displacement and Refractive Lens require WebGL.

When WebGL is unavailable or the shader cannot initialize:

• The animated effect may remain hidden
• The nested hero content remains present
• The overlay and wrapper remain available

Possible causes include:

• Browser graphics restrictions
• Disabled hardware acceleration
• Unsupported device
• WebGL context failure
• Security software
• Invalid cross-origin image
• An extremely constrained or hidden container

Use Plexus, Gradient Mesh, Aurora, or Classic Static as alternatives when WebGL support is unreliable.

Source image recommendations

For Classic, Gradient image blending, Liquid, and Refractive modes:

• Use WebP, JPEG, or PNG
• Optimize the file before uploading
• Use a crop close to the expected hero ratio
• Avoid excessively large original dimensions
• Keep the important subject away from crop-sensitive edges
• Prefer local WordPress Media Library images

For WebGL modes, avoid temporary, protected, or cross-origin URLs that do not allow canvas access.

Recommended starting configurations

Technology hero

• Engine: Plexus
• Node Density: 50–70
• Movement Speed: 0.5–1.0
• Connection Distance: 100–150
• Interaction: Constellation or Repel
• Overlay: dark at 0.3–0.5
• Desktop Height: 80–100 vh
• Mobile Height: 70–90 vh

Image-based hero

• Engine: Classic Static
• Image Fit: Cover
• Image Position: Center or subject-focused side
• Overlay: Normal or Multiply
• Overlay opacity: 0.3–0.6
• Film Grain: optional

Gradient PRO hero

• Engine: Gradient Mesh
• Layer Opacity: 0.6–0.8
• Flow Speed: 0.3–0.7
• Three related brand colors
• Blend over Image only when the image remains readable

Liquid PRO hero

• Use a clear source image
• Liquid Viscosity: 0.08–0.15
• RGB Shift: 0.3–0.7
• Wave Intensity: 0.01–0.03

Refractive PRO hero

• Use a detailed but uncluttered source image
• Crystal Scale: 15–25
• Add a moderate overlay behind text

Aurora PRO hero

• Flow Speed: 0.5–1.2
• Dark WordPress background color
• Screen or Normal overlay composition
• Minimal additional grain

Troubleshooting

The complete block is missing

Check:

• Kinetic Hero Mesh is enabled in the KineticHub dashboard
• The plugin is active
• Hide on Mobile or Hide on Desktop is not enabled in PRO
• The page was updated
• The parent container is visible

The canvas is blank

Check:

• The hero has measurable width and height
• Reduced Motion is disabled
• Frontend JavaScript loads
• The browser Console contains no canvas or WebGL errors
• The block is not initialized inside a hidden tab or popup
• Custom CSS does not hide .kh-hm-canvas-engine
• The current KineticHub version is installed

Plexus does not react to the pointer

Check that Cursor Interaction is not set to None.

Also test on desktop with a mouse.

Liquid or Refractive shows no image

Confirm that:

• A Source Image is selected
• The image URL opens directly
• The image is served from a canvas-compatible source
• WebGL is available
• The image server permits cross-origin loading when hosted externally

Use a local Media Library image for testing.

Gradient Mesh shows colors but not its source image

Confirm that:

• Blend over Image is enabled
• A Source Image is selected
• The image permits canvas loading

When image loading fails, the engine continues with the color mesh.

Classic image is heavily cropped

Change Image Fit to Contain or adjust Image Position.

For a full hero, using a better source crop usually produces the strongest result.

Parallax does not work on mobile

Fixed-background effects are limited by many mobile browsers.

Use the static Classic image as the expected mobile fallback.

The animation stops after scrolling away

This is intentional viewport optimization.

The engine resumes when the block returns near the visible area.

The effect is less detailed on mobile

This is intentional.

Hero Mesh reduces density, canvas resolution, and active visual elements at smaller widths.

The overlay makes the content difficult to read

Return the blend mode to Normal and adjust:

• Overlay color
• Overlay opacity
• Foreground text color

The block works at the top level but not inside another container

Inspect the parent for:

• Zero or constrained height
• overflow: hidden
• Transforms
• Perspective
• Hidden initialization state
• Stacking context
• Delayed JavaScript

Test inside a standard WordPress Group.

The editor preview is blank but the frontend works

Reload the editor and check its Console for errors.

Confirm the block has height and is not inside a constrained parent.

Use the frontend as the final output reference, but report a consistently blank editor preview as an editor-specific compatibility issue.

Next step

Continue with Kinetic Magnetic Button to create interactive call-to-action buttons with magnetic pointer movement, icons, hover transitions, glow effects, and advanced PRO styling.