Modal
A dialog overlay that requires user attention before interacting with underlying content, used for alerts, forms, or focused tasks. Modals should have clear purposes and obvious dismissal methods—don't trap users in unexpected dialogs. In Framer, build modals as overlay components with appropriate entrance and exit animations.
Backdrop Filter
Effects
A CSS effect that applies visual filters like blur or color adjustment to the area behind an element, creating frosted glass or tinted overlay effects. This technique is popular for navigation bars and modal backgrounds that need to stand out while maintaining context with underlying content. In Framer, apply backdrop filters through the Fill properties to create modern, layered interfaces.
Pop-up
Components
An overlay window that appears on top of page content, often used for promotions, email captures, or important notices. Pop-ups can be effective but easily frustrate users if poorly timed or hard to dismiss. Consider alternative placements and respect user preferences.
CLIP
AI
CLIP (Contrastive Language-Image Pretraining) maps text and images into a shared representation space for similarity and retrieval. It powers capabilities such as Find Similar Designs and works well with Vision Transformer (ViT) style architectures.
Vision Transformer (ViT)
AI
Vision Transformer (ViT) applies transformer attention mechanisms to image patches for classification and representation learning. It is widely used in multimodal stacks with CLIP and in segmentation systems like Segment Anything Model (SAM).
Overlays
Interaction
Framer overlays let designers build interactive layers that appear above or beside content, such as navigation drawers, tooltips, signup modals, and dropdown menus.