---
title: "KineticCursorVideo — Free Framer component · Best of Framer"
description: "Free Framer component · by Konstantin Nikolaev · Cursors. Hero showreel with momentum tilt"
canonical: "https://framer.elliotli.dev/component/kineticcursorvideo"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/KineticCursorVideo

# KineticCursorVideo

Hero showreel with momentum tilt

[View on Framer](https://framer.com/marketplace/components/kineticcursorvideo/?via=elliot-li)

![KineticCursorVideo preview image 1](https://framer.elliotli.dev/og/component/kineticcursorvideo/65cfe41dfd4cee60/1600x1200.jpg)

## Summary

Hero showreel with momentum tilt

## Description

**Component Description**

Video Tutoprial that shows main features of the comopnent

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6455

## Details

- **Author**: Konstantin Nikolaev
- **Published**: 2026-05-31
- **Updated**: 2026-06-03
- **Added**: 2026-05-18
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…