Cursor-Follow-Video

Follows cursor, expands on scroll.

About this Component Component Details This component is built primarily for desktop environments and larger screens. It is not optimized for mobile devices , as the interaction relies on horizontal mouse movement. Layout Requirements For the scaling animation to reach the full available screen space, the section containing the component should be significantly taller than the component’s initial size . Providing sufficient scroll distance ensures a smooth and uninterrupted transition during the animation. Recommendation: Place the component inside a tall hero section Avoid short or tightly constrained containers Customization Options The component offers multiple controls to adjust layout, interaction, and playback behavior: Video Settings Video File – Choose the video source Auto Play – Enable or disable automatic playback Loop – Repeat video playback Muted – Toggle audio output Show Controls – Display or hide video controls Interaction & Animation Scroll Animation – Enable or disable scroll-based scaling Animation End – Adjust the scroll distance used for the animation Smoothness – Control the responsiveness of cursor movement Size & Position Initial Width / Height – Starting dimensions of the video Final Width / Height – Target dimensions after scaling Vertical Position – Adjust vertical alignment Corner Radius – Modify the rounding of the video edges Recommended Use Well suited for: Editorial-style hero sections Portfolio websites Desktop-focused brand experiences Less suitable for: Mobile-first layouts Touch-only interfaces

Follows cursor, expands on scroll.