Kinetic BOX

Kinetic Box is your all-purpose interactive container for Gutenberg. Use it to build cards, pricing tables, feature sections, hero panels, and showcase layouts with 3D tilt, magnetic hover, glass effects, spotlight glow, and premium motion that instantly makes your site feel more custom.

Build faster. Look more premium. Stay inside Gutenberg.

  • These represent only a fraction of the settings available. Drop any Gutenberg block inside.

🅰️

Move the content inside the box independently for a more cinematic layered effect that adds life without overwhelming the layout.

📦

Transform flat containers using a custom LERP engine for buttery smooth, hardware-accelerated, responsive card rotations.

🧲

Break rigid grid constraints with an organic physics engine that smoothly pulls elements toward the cursor.

🪟

Create frosted, translucent panels with blur and glow that fit modern hero sections, feature cards, and premium UI designs.

Add a cursor-following glow inside the box to bring dark layouts to life and make hover interactions feel more dramatic.

👆

Turn the entire container into a clickable card while still keeping internal interactive elements usable and clean.

Why Kinetic Box is so useful

  • Make simple sections feel expensive

Add depth, motion, and atmosphere to ordinary content blocks so your pages instantly look more custom and more polished.

  • Works with the content you already use

Drop in headings, buttons, images, lists, or nested blocks, then layer motion and styling on top instead of rebuilding your workflow.

  • Helps you build faster in Gutenberg

Instead of stacking plugins or writing custom interactions, you get one smart container that can do a lot of the heavy lifting for you.

Start simple. Unlock the fun stuff in PRO

The free version is great for clean layouts and basic interaction. PRO is where Kinetic Box becomes a real premium design tool.

Perfect for starting with clean, polished containers and lightweight interaction.

  • Standard container layouts
  • Basic hover animations
  • Clickable card support
  • Custom widths and alignment controls
  • 3D tilt and magnetic hover
  • Inner parallax layers
  • Glass, spotlight, grain, and edge effects
  • Advanced premium styling controls

For creators who want their layouts to feel more custom and premium.

  • Smooth 3D tilt engine
  • Magnetic hover pull
  • Multi-layer inner parallax
  • Glassmorphism styling
  • Interactive spotlight glow
  • Film grain and crisp edge detail
  • Better-looking feature cards, promos, and pricing boxes

The goal is not just more motion. It is better-looking layouts without turning your site into a mess.

Does having 20+ boxes on a page cause lag?

No. The physics engine employs an IntersectionObserver to halt complex matrix calculations the instant a 3D-enabled box scrolls out of view. This “Off-Screen Hibernation” guarantees zero idle CPU drain.

Will Stretched Links break nested buttons?

Not here. We engineered an isolated Z-Index architecture. The stretched link uses an absolute ::after mapping trapped beneath layer 20. Any interactive tags (`<a>`, `<button>`, `<iframe>`) dropped inside the box are safely elevated to layer 30, preventing “dead clicks”.

How does it handle Single Page Applications (SPA)?

We included RAM Garbage Collection (GC) Automation. A core MutationObserver paired with AbortControllers monitors the DOM. If AJAX calls replace the layout, all obsolete physics listeners and requestAnimationFrame hooks are surgically purged.

Do I need code to make it look good?

No. That is the whole point. Kinetic Box is meant to help you create a more custom, interactive feel directly inside Gutenberg, without needing a custom front-end build for every section.

What kind of layouts is it best for?

It shines on cards, feature grids, hero callouts, testimonials, product highlights, service sections, pricing boxes, and any content area that needs more depth and more perceived value.