A hover card with halftone dot effect and animated scan reveal. Features blur overlay, staggered animations, and grouped controls for Title, Price, Description, Button and Badge — each with custom font, size and color. 4 themes, 5 glow colors, 4 sweep directions. Mobile tap support included.
Live Preview: https://hoverscancard.framer.website/
A premium hover card for Framer with a halftone dot effect that transforms your image into a stippled artwork at rest — then reveals it with a smooth lightsaber sweep animation on hover. Features a blur overlay with staggered content animations, full typography controls for Title, Price, Description, Button and Badge, five saber glow color presets, four overlay themes, and four sweep directions. Mobile tap support included. Perfect for fashion, real estate, AI platforms, and luxury brands.
Hover Scan Card Design Features
Halftone dot effect transforms images into stippled artwork at the default state
Lightsaber sweep animation reveals the original image with a glowing scan on hover
Blur overlay with staggered content animations for a cinematic reveal experience
Full typography controls for Title, Price, Description, Button and Badge — font, size, color and family
Five saber glow color presets (Blue, Red, Green, White, Purple) plus custom color
Four overlay themes (Dark, Warm, Navy, Rose) with a fully customizable Custom option
Four sweep directions (Left → Right, Right → Left, Top → Bottom, Bottom → Top)
Adjustable sweep speed, dot spacing and dot size for precise visual control
Badge with independent background, text color, blur, border and font settings
Mobile and tablet tap support with native scroll preserved
Responsive content scaling that adapts to any card size
Image position control for precise subject framing
Use Cases
Fashion and luxury brand product cards
Real estate property listings and showcase pages
AI identity and profile product presentations
Sports performance and fitness platforms
Beauty, skincare, and lifestyle e-commerce grids
Portfolio and lookbook layouts
Premium landing pages with editorial image cards
Framer Market demos and component showcases
What’s Included
1 fully customizable Framer component
Property controls for all text, colors, fonts and animations
4 overlay themes · 5 saber glow presets · 4 sweep directions
Mobile tap support · Responsive content scaling
How to Use
1. Copy the component into your Framer project
2. Connect your image via the Image property
3. Set your title, price, description and button text
4. Choose a theme, saber color and sweep direction
5. Publish — works on desktop hover and mobile tap
Keywords
hover card, halftone card, dot effect, scan reveal, animated card, blur overlay, product card, fashion card, luxury card, real estate card, ai card, framer animation, interactive card, sweep animation, e-commerce card
Ahmet Loca
