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.
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
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.
Launchly
