Cinematic Context-Aware Video Cursor

Standard video controls are an interruption — a layer of clutter between the viewer and the content. We wanted to remove that barrier. This component transforms the user’s intent into the interface itself. By morphing the cursor into a context-aware controller, we achieve a symbiosis of navigation and action. It creates an immersive, cinematic experience where the UI dissolves, leaving only the story.

Core Technique

The engineering elegance here lies in the delegation of state. We use JavaScript strictly for physics (tracking coordinates), while CSS handles the logic.

• Pointer Tracking: A minimal JS listener updates --x and --y custom properties on the document root, ensuring the cursor follows the mouse with mathematical precision.
• The Power of :has(): We do not toggle classes on the cursor. Instead, the cursor “senses” its environment using the CSS :has() pseudo-class. It checks if the parent hovers over a video in a specific state ([aria-label="Play"] or [aria-label="Pause"]) and adapts its icon instantly.
• Zero Latency: By keeping the logic in CSS, we avoid layout thrashing, resulting in a buttery smooth 60fps interaction.

Customization

The design is completely decoupled from the logic. You can change the shape, color, or easing of the cursor without touching a line of JavaScript.

Adjusting Cursor Physics

.cursor {
  /* ... positioning logic ... */
  
  /* Change transition speed for a "looser" feel */
  transition: scale 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

State Logic with :has()

/* If hovering a paused video, show the 'Play' icon */
:root:has(.video-player:hover > [aria-label="Play"]) .play {
  display: block;
}

/* If hovering a playing video, show the 'Pause' icon */
:root:has(.video-player:hover > [aria-label="Pause"]) .pause {
  display: block;
}

Browser Support

This component heavily relies on the CSS :has() pseudo-class. While support is widespread in modern browsers, legacy versions will not render the state changes correctly.