A master-class layout architecture. Pin your media gallery on one side while synchronized text scrolls fluidly on the other, powered by intersection observers and 100dvh viewport logic.

Scroll down inside this box
Abstract Tech 1 Abstract Tech 2 Abstract Tech 3
Phase 01

Smart Swap Engine

As you read this text and scroll down, the Engine mathematically calculates the scroll depth and automatically crossfades the pinned image to match your current section.

Phase 02

Text Focus Effects

Keep your readers engaged. By using Intersection Observers, the text blocks can dynamically blur and dull themselves when out of focus, highlighting only what matters.

Phase 03

100dvh Viewport Safe

We eliminated the classic mobile browser bug. The pinned media respects the dynamic viewport height, ensuring Safari or Chrome address bars never clip your imagery.

  • Hardware Interpolation

The engine relies on requestAnimationFrame and native ResizeObservers instead of forcing expensive DOM queries on scroll, ensuring buttery smooth 60FPS transitions.

  • Native Video Support

Unlike standard galleries, Split Scroll PRO accommodates both Image nodes and Video primitives (`<video>`), rendering them directly from the secure PHP pipeline.

  • A11y & Vestibular Safe

Respects OS-level accessibility. It completely bypasses DOM-level transitions and crossfades for users actively running prefers-reduced-motion parameters.

Start free with the core split layout or upgrade to PRO for crossfade engines and dynamic text effects.

  • Standard Pinned Layout Engine
  • 50/50, 40/60, and 60/40 Ratios
  • Left or Right pinning orientations
  • Native Gutenberg InnerBlocks
  • Multiple Images (Smart Swap)
  • Native HTML5 Video Swapping
  • Text Focus & Fade Interactions
  • Ambient Glow & Shape Masks
  • Smart Swap Multiple Media Galleries
  • Fade, Wipe, Diagonal & Circle Transitions
  • Dynamic Text Blur & Focus Observer
  • Interactive Dot Pagination Navigation
  • Shape Masks (Arch, Pill, Floating)
  • Ken Burns slow-zoom logic
  • Advanced Color Morphing Engine

Why developers trust KineticHub structures.

How does the block handle mobile devices?

By default, the layout safely reverts to a standard vertical stack (Text first or Media first) at the 768px threshold. However, if ‘Mobile Sticky’ logic is manually overridden in the PRO version, it implements a highly optimized 45vh sticky containment to preserve usability.

Are my nested text blocks secure from injection?

Yes. Escaping policies for core HTML entities bypass standard wp_kses_post() constraints securely through Native Gutenberg InnerBlocks encapsulation. We let WordPress handle the text while we secure the wrapper logic.

Does calculating scroll depth crash tall pages?


No. We engineered a strict Math.max(0) boundary trap in the frontend JavaScript. This effectively prevents NaN and Infinity console crashes when rendering the component on sections that are unexpectedly shorter than the native browser height.