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.
Konstantin Nikolaev
