About the Component
Phantom Hover is a full-screen interactive video component built for Framer. It divides the screen into invisible zones — each one hiding a video beneath a completely black surface. Nothing is revealed until the user interacts. On desktop, hovering over a zone fades in the video and a custom cursor label follows the mouse. On mobile, each zone displays its title label in the center so users know exactly where to tap. The layout adapts automatically no matter how many videos you add.
What Makes It Different
Most video components show thumbnails, grids, or carousels. Phantom Hover shows nothing — and that is the point. The black screen creates curiosity. The reveal creates impact. It is built for portfolios, agencies, fashion brands, and studios that want their work to feel like an experience rather than a gallery.
Features
Invisible hover zones that reveal full-screen video on desktop
Custom cursor that follows the mouse and displays the zone title
Tap-to-play zones on mobile with auto-scaled title labels
Smooth fade transition between videos with adjustable duration
Link support on every zone — takes users to any page, section, or URL on both desktop and mobile
Fully black idle state on desktop — no video plays until the user hovers
Auto-layout — add as many videos as you want, zones adjust automatically
Blend mode control for the cursor text — Normal, Difference, Screen, Overlay and more
Font, size, weight, and color controls for the cursor and mobile labels
Accepts MP4 and WEBM video formats
How to Use
Step 1 — Add your videos Select the component on the canvas and open the properties panel on the right. Under Videos, click the plus button to add a new item. Upload your video file — MP4 or WEBM both work. Give it a title. That title appears as the cursor label on desktop and as the zone label on mobile.
Step 2 — Add links (optional) Each video item has a Link field. Set it to a page inside your Framer project, a section anchor, or an external URL. When the user clicks on desktop or taps on mobile they will be taken there automatically.
Step 3 — Adjust the fade Use the Fade slider in the properties panel to control how quickly videos transition. Lower values are snappier, higher values are smoother and more cinematic.
Step 4 — Style the cursor Use the Font, Text Color, and Blend controls to match your brand. Difference blend mode works best on most dark videos — it keeps the text visible no matter what color the video is underneath.
Step 5 — Publish and test on mobile The canvas preview in Framer is desktop only. To test the mobile tap experience open Framer Preview on your actual phone. The zone labels, tap interaction, and video playback all work on iOS and Android.
Best Practices
Use 4 to 5 videos for the most balanced layout
Keep video files under 10MB each for fast load times
Use landscape videos — the component is full-screen and covers the entire frame
Short looping clips of 5 to 15 seconds work best
Pair with a full-screen frame for a hero section that stops people from scrolling
Works best for
Creative agencies — Portfolio sites — Fashion brands — Film and photography studios — Product launch pages — Any brand that values experience over information.
Jaaliwaale
