Cinematic Video

Cinematic Video transforms a standard video into a bold, film-like experience.

Cinematic Video transforms a standard video into a bold, film-like experience. The component displays a full-bleed video with a large typographic overlay that animates smoothly between play and pause states. When playback begins, the text can optionally fade out after a delay, letting the video fully take over the screen. When paused, the text returns—clear, intentional, and dramatic. Subtle motion transitions and a bottom gradient ensure readability without distracting from the footage. The typography remains responsive at all sizes, preserving the cinematic scale regardless of layout or viewport. Everything is controlled directly from Framer’s properties panel, making it easy to adapt the component for brand films, landing page heroes, campaigns, or editorial storytelling. Key Features Click-to-play video interaction Animated text overlay with smooth transitions Optional text fade-out during playback Responsive, cinematic typography scaling Built-in gradient for text readability Loop and mute playback options Adjustable fade timing and corner radius Optimized for hero sections and immersive layouts How to Use Drag Cinematic Video onto your canvas. Upload an MP4 or WebM video using the Video property. Set your Play and Pause text. Choose whether the text should fade out when the video starts. Adjust font styling, text color, and corner radius. Enable looping or mute if needed. Click anywhere on the component to play or pause the video.

Cinematic video with animated text