Kinetic Box

Overview

Kinetic Box is a flexible container for creating styled and interactive WordPress sections.

Use it for:

• Feature cards
• Service panels
• Pricing highlights
• Calls to action
• Portfolio items
• Product information
• Reusable content boxes

The box can contain standard WordPress blocks such as headings, paragraphs, images, buttons, lists, Groups, and Columns.

Add the block

1. Open a page or post in Gutenberg
2. Search for Kinetic Box
3. Insert the block
4. Add content inside the box
5. Configure its layout, styling, and interaction
6. Update the page and test the frontend

Interactive movement is intentionally limited inside the editor. Test the final hover and PRO physics effects on the published page.

Layout and size

Open Layout & Size to configure the container.

Box Width

Choose how much of the available parent width the box uses.

Available range:

0–100%

A value of 0 automatically uses the full available width.

The width remains limited by the surrounding Group, Column, template, or theme container.

Minimum Height

Set a minimum container height between:

0–1000 px

This is useful when several boxes should have matching heights in a grid.

Use minimum height instead of a rigid fixed height when the content may wrap differently on mobile.

Box alignment

Use the block toolbar to position the complete box:

• Left
• Center
• Right

Separate controls align the nested content horizontally and vertically inside the box.

Kinetic Box also supports WordPress wide and full alignment where the active theme permits them.

WordPress design controls

Kinetic Box supports the standard Gutenberg controls for:

• Text and background colors
• Gradients
• Padding and margin
• Block spacing
• Typography
• Border color
• Border width
• Border style
• Border radius

Use these controls for the normal appearance, then use Kinetic Box settings for hover and interaction states.

Quick presets

The Free edition includes:

• Soft Elevate — a raised card with gentle lift and shadow
• Minimal Scale — a lightweight scale interaction

KineticHub PRO adds:

• Pro Glass
• Tech Trace
• Kinetic 3D

Presets overwrite several visual and interaction settings. Use them as starting points, then customize the result.

Select Reset Block to restore the Kinetic Box defaults.

Free hover interactions

Open Detailed Config → Interact.

Available Free interactions:

• None
• Lift
• Scale
• Tilt (CSS)

Lift

Moves the box upward on hover.

Scale

Makes the box slightly larger on hover.

Tilt (CSS)

Applies a fixed perspective rotation on hover.

This is different from the PRO 3D Mouse Tilt effect. CSS Tilt does not continuously follow the pointer position.

Effect intensity

Control the strength separately for:

• Desktop
• Mobile

Use a small value for subtle cards. Strong movement can create overlap or clipping inside narrow layouts.

Transition speed

Available range:

0.1–2 seconds

Lower values feel faster. Higher values create a slower transition.

Bring to Front on Hover

Temporarily raises the box above nearby elements while it is active.

This is useful in card grids where the moving box could otherwise appear behind a neighboring card.

Shadows and hover colors

Open the Depth tab to configure:

• Base shadow color
• Base shadow opacity
• Desktop shadow softness
• Hover shadow color
• Hover shadow opacity

Open the Paint tab to configure:

• Hover background color
• Hover border color

KineticHub PRO also adds:

• Mobile shadow softness
• Hover text color
• Smooth, Bouncy, and Snappy easing modes
• Rotation angle controls

Advanced Free visuals

Open Advanced Visuals.

Zoom Inner Content

Zooms direct image content when the box is hovered.

Use Zoom Intensity to control the scale between:

1.02–1.50

Outer Glow Effect

Adds a glow based on the configured shadow and visual state.

Grayscale to Color

Displays the box in grayscale and restores its colors on hover.

Use this carefully when the nested content contains text or interface controls that must remain easy to read.

Make the complete box clickable

Open Link Settings.

Configure:

• Target URL
• Make Entire Box Clickable
• Open in New Tab
• Accessible Label
• Link Rel

The URL alone does not activate the complete-box link. You must also enable Make Entire Box Clickable.

When enabled, Kinetic Box adds a transparent link layer across the container. Nested links, buttons, media controls, iframes, and supported interactive blocks are placed above that layer so they can remain usable.

Add an Accessible Label that describes the destination, such as:

• View Service Details
• Open Pricing Plan
• Read Project Case Study

When opening in a new tab, Kinetic Box automatically adds noopener and noreferrer when they are not already present.

Avoid placing several overlapping full-area links inside the same box.

KineticHub PRO physics

KineticHub PRO adds pointer-driven interaction under Kinetic Physics.

3D Mouse Tilt

Rotates the box according to the pointer position.

This creates a responsive 3D effect rather than the fixed CSS Tilt available in Free.

Magnetic Hover

Moves the complete box slightly toward the pointer.

Inner Parallax Layers

Moves the inner content in the opposite direction to create additional depth.

When 3D Mouse Tilt or Magnetic Hover is active, the standard Lift, Scale, and CSS Tilt interactions are overridden.

Test these effects with a mouse on the public frontend. Touch devices do not provide the same continuous pointer behavior.

PRO Smart Addons

Interactive Spotlight Glow

Adds a radial glow that follows the pointer.

You can configure:

• Spotlight color
• Spotlight size from 100–1000 px

It is most visible on dark backgrounds.

Cinematic Film Grain

Adds a decorative grain texture over the box.

Use Grain Opacity to keep the effect subtle.

Idle Levitation

Makes the box move gently while it is not being interacted with.

The levitation returns to its resting state during hover or physics interaction.

Crisp Inner 3D Edge

Adds an inset edge highlight with a configurable color.

Glassmorphism

Adds a translucent white layer and backdrop blur.

Available controls include:

• White layer opacity
• Backdrop blur strength

Glassmorphism works best when visible content or color exists behind the box.

Additional PRO interactions

KineticHub PRO also includes:

• Trace — draws a border accent across the box
• Shine — sends a light sweep across the container
• Sink — moves the box downward during interaction
• Entrance animations: Fade, Slide, and Zoom
• Entrance delay
• Advanced easing and rotation controls

Avoid combining several strong effects on the same box. One primary interaction and one subtle visual addon usually produce a cleaner result.

Responsive visibility

Use the visibility controls to:

• Hide on mobile
• Hide on desktop

The responsive breakpoint is approximately 768px.

Also inspect the parent container because a Group, Column, or theme section may contain its own visibility rules.

Accessibility and reduced motion

When the complete box is clickable, provide a clear accessible label.

Nested buttons and links should still describe their own individual actions.

When the visitor requests reduced motion, Kinetic Box removes or suppresses:

• Hover transforms
• Idle levitation
• Entrance animation
• Inner parallax
• Image zoom movement
• PRO pointer physics

The content remains visible and usable in a static state.

Do not rely on movement, grayscale, glow, or spotlight as the only way to communicate meaning.

Recommended starting settings

For a simple feature card:

• Preset: Soft Elevate
• Width: 100%
• Minimum Height: 280–340 px
• Interaction: Lift
• Desktop Intensity: 8–15
• Mobile Intensity: 0–5
• Transition Speed: 0.3–0.5
• Moderate base shadow
• Bring to Front: Enabled for overlapping card grids

For a clickable card, also add the URL, enable Make Entire Box Clickable, and provide an accessible label.

Troubleshooting

The box does not move

Check:

• An interaction other than None is selected
• You are testing the public frontend
• Reduced Motion is not enabled
• The device supports hover
• Custom CSS is not overriding transform
• JavaScript delay is not blocking PRO physics

The complete box is not clickable

Confirm that:

• A Target URL is present
• Make Entire Box Clickable is enabled
• Another overlay is not covering the box
• The URL was saved when the page was updated

The box is wider or narrower than expected

Check the Box Width and the width of every parent Group, Column, or template container.

A child box cannot automatically exceed a constrained parent.

The movement is clipped

Inspect the box and its parents for:

• overflow: hidden
• overflow: clip
• Fixed heights
• Transforms
• Stacking contexts

Reduce the interaction intensity or adjust the exact parent creating the clipping.

Nested content works outside the box but not inside it

Test the nested block inside a simple Kinetic Box with default settings.

Then inspect:

• Parent overflow
• Transform and perspective
• Z-index
• Inherited SVG or icon styles
• Pointer overlays
• Width and height

Complex visual or third-party nested blocks may require compatibility testing.

The editor looks static

This is expected for movement that could interfere with Gutenberg editing.

Test hover effects, pointer physics, spotlight tracking, and entrance animations on the frontend.

Next step

Continue with Kinetic Cursor Reveal to build interactive lists that reveal floating images or videos through hover and touch interaction.