Mouse-Driven Split Reveal

Static content is a relic. We don’t just want to show information; we want the user to uncover it. This component transforms the cursor into a tool of discovery, creating a tactile connection between the user and the interface. By removing the friction of clicking or dragging handles, we achieve a fluidity that feels less like software and more like a physical extension of the hand. It is simple, unapologetic, and immediate.

Core Technique

The brilliance of this engineering lies in its restraint. We do not need heavy canvas libraries or WebGL to achieve duality.

• Layered Geometry: We use two identical grid layers (.side) stacked via position: absolute.
• The Mask: The top layer (#left-side) acts as a mask. By setting overflow: hidden, we can dynamically slice the content without breaking the layout flow.
• Direct Mapping: JavaScript maps the clientX coordinate directly to the width percentage. There is no interpolation, no delay — just pure, 1:1 input-to-output mapping.

Customization

This code is a canvas for your brand’s contrasts. You can easily adapt the coordinate logic for vertical splits or change the easing for a “magnetic” feel.

Configuring Colors (CSS Variables): Define your duality in the :root.

:root {
  /* The dark, sophisticated side */
  --c1: rgb(15, 23, 42); 
  
  /* The vibrant, energetic side */
  --c2: rgb(244, 63, 94); 
}

Adding Inertia (Optional): To make the movement feel “heavier” (more premium), use linear interpolation (Lerp) in JS instead of direct assignment.

// Optional: Add smooth LERP for a "weighted" feel
const lerp = (start, end, factor) => start + (end - start) * factor;

// Use requestAnimationFrame loop to update styles smoothly

Browser Support

The code uses standard DOM manipulation and CSS Grid. It is extremely robust.