---
title: "HoverMotion — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Text. Hover keywords to trigger video playback"
canonical: "https://framer.elliotli.dev/component/hovermotion"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/HoverMotion

# HoverMotion

Hover keywords to trigger video playback

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

![HoverMotion preview image 1](https://framer.elliotli.dev/og/component/hovermotion/729f74ac1f68193a/1600x1200.jpg)

## Summary

Hover keywords to trigger video playback

## Description

An interactive section that plays a different video for each hovered keyword. Seven text labels each trigger their own self-hosted video swap instantly, autoplay, and loop with no reload. Built for agency portfolios, SaaS demos, and product showcases that need to show instead of tell.

## Features

-   7 hoverable text labels each trigger a unique video
    
-   Videos autoplay, loop and swap instantly on hover
    
-   No reload or buffering between video switches
    
-   Self-hosted video support — no YouTube dependency
    
-   Smooth transitions between active and inactive states
    
-   Fully responsive — desktop, tablet and mobile optimized
    
-   Customizable text labels, video files, spacing and fonts
    
-   Supports MP4 and WebM formats
    

## Property Controls

**Content** — 7 label and video pairs

**Video** — file upload per label · MP4 and WebM support

**Styling** — text color, active label color, background color

**Typography** — label font, size, weight, spacing

**Layout** — spacing, padding, alignment

## Use Cases

Agency portfolios · SaaS product demos · Online course previews · Brand feature showcases · Service presentations · Interactive landing pages · Product walkthroughs

**SEO Keywords**

framer hover video · framer interactive video · framer video component · hover video framer · framer keyword video · framer video section · framer product demo · framer interactive section · framer video hover effect · framer self hosted video · framer agency component · framer landing page component · framer interactive component · framer code component · framer video player

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

-   All · #7829

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2025-09-17
- **Updated**: 2026-04-17
- **Added**: 2025-09-03
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing