MARKETPLACE
PLUGINS
ANIMATED VIDEO CARD
Animated Video Card logo

Animated Video Card

Published May 2026
   •    Updated this week

Plugin details

Animated Video Card gives your Bubble app a premium, high-performance, dynamic video/content card experience — 3D parallax tilting, interactive text roll-ups, and smooth description text color transitions. Renders stunning hardware-accelerated block elements that react beautifully to mouse movement, creating a gaming-grade UX.
───────────────────
✨ KEY FEATURES
───────────────────

📐 3D Tilt & Parallax Canvas
 • Smooth 3D tilt effects reacting to mouse movement based on tilt.js
 • Configurable perspective, scale factor, and tilt transition speeds
 • Optional dynamic glare overlay with adjustable max opacity

🎨 Typography Animations
 • Character-by-character roll-up title animation shifting colors on hover
 • Smooth text color transition on hover for descriptions
 • Automatic HTML markup generation based on input text

📡 Interactive Play & Built-in Video Popup
 • Centered SVG play button that scales and rotates 90 degrees on hover
 • Built-in video player modal popup with custom glassmorphic blur backdrop
 • Support for both local MP4/WebM files and YouTube video embeds (via automated URL ID extraction)
 • Separate Bubble events for clicking the play button vs clicking the card body, plus popup lifecycle events (opened/closed)
 • Hex color inputs for accent and hover states

💾 Event and State Tracking
 • Exposes current title, background image, and hovered status states
 • Fires Bubble events: card_clicked, play_clicked, card_hovered, and card_unhovered


🔗 [View demo page](https://plugins-demo-70356.bubbleapps.io/version-test/animated-video-card)
🔗 [View demo in editor](https://bubble.io/page?id=plugins-demo-70356&tab=Design&name=animated-video-card&type=page)

$36

One time  •  Or  $3/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

Acampamento no-code logo
Acampamento no-code
Joined 2021   •   45 Plugins
View contributor profile

Instructions

Set up: 1. Add the "Animated Video Card" element to your page or inside a cell of a Repeating Group.
2. Provide a `background_image` URL (acts as the card thumbnail).
3. Provide a `video_url` (the MP4/WebM video file to play on click).
4. Set `enable_popup` to Yes to automatically open the built-in video modal popup.
5. Configure the card `title` (text) and `description` (multiline text, using line breaks to separate lines).
6. Tweak the layout:
  - Use `description_offset_right` to adjust the description block position (use `-80` for the original overflow look, or `0` to keep it completely inside the card borders).
  - Configure the Hex `accent_color` and `accent_hover_color` for play button styles.
7. Set the 3D tilt parameters: `max_tilt` (degrees of rotation), `speed` (ms), `glare` (show glare overlay), `max_glare` (glare opacity), `scale` (scale on hover), and `perspective` (3D depth).

States: title · background_image · hovered
Events: card_clicked · play_clicked · card_hovered · card_unhovered · popup_opened · popup_closed

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Media   •   Video   •   Containers   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble