KineticCursorVideo

Component Description

The component is designed for hero sections, landing pages, portfolio intros, product showcases, and interactive visual headers where motion should feel responsive but polished.

Interaction Behavior

When the user moves the cursor across the page, the video shifts horizontally based on the cursor position. The movement is spring-based, so it does not instantly jump to the cursor. Instead, it follows with a smooth momentum effect.

The video also rotates based on cursor speed and direction:

- moving the cursor to the right tilts the video to the right

- moving the cursor to the left tilts the video to the left

- when the cursor stops, the rotation smoothly springs back to `0°`

If Adapt to Speed is enabled, the follow motion becomes more responsive when the cursor moves faster. This makes the component feel more dynamic and reactive during quick cursor movements.

Property Controls

Video

Upload the video file used inside the hero. Supports common formats like `mp4`, `webm`, and `mov`.

Size

Controls the width of the video in viewport width units.

Follow

Controls how far the video follows the cursor horizontally.

Lower values create subtle movement; higher values create stronger cursor following.

Max Tilt

Sets the maximum rotation angle of the video.

Higher values create a more dramatic tilt effect.

Tilt Speed

Controls how much cursor speed is needed to reach the maximum tilt.

Lower values make the video tilt more easily; higher values require faster cursor movement.

Damping

Controls how much resistance the follow movement has.

Higher damping reduces overshooting and makes the motion feel more controlled.

Mass

Controls the weight of the spring movement.

Higher mass makes the video feel heavier and slower to react.

Adapt to Speed

When enabled, the follow movement adapts to cursor speed. Faster cursor movement makes the video follow more responsively.

Radius

Controls the border radius of the video container.

Fit

Controls how the video fits inside the container:

- `Cover`: fills the container and crops if needed

- `Contain`: shows the full video without cropping

- `Fill`: stretches the video to fill the container

Autoplay

Enables or disables automatic video playback.

Loop

Controls whether the video repeats continuously.

Muted

Controls whether the video is muted.

Plays Inline

Keeps video playback inline on mobile browsers instead of opening fullscreen playback.