---
title: "Focus Blur Frame — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ahmet Loca · Effects. Focus Blur Frame FocusFrame is an immersive video card component for Framer with smooth edge blur, vignette effect, and center focus."
canonical: "https://framer.elliotli.dev/component/focus-blur-frame"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Focus Blur Frame

# Focus Blur Frame

Video Card with Blur Edge

[View on Framer](https://framer.com/marketplace/components/focus-blur-frame/?via=elliot-li)

![Focus Blur Frame preview image 1](https://framer.elliotli.dev/og/component/focus-blur-frame/c601e50fee2cdc24/1600x1200.jpg)

## Summary

Focus Blur Frame FocusFrame is an immersive video card component for Framer with smooth edge blur, vignette effect, and center focus.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Card Bundle:** [**https://frameze.com/components/category/card?ref=bundles**](https://frameze.com/components/category/card?ref=bundles)

## Focus Blur Frame

FocusFrame is an immersive video card component for Framer with smooth edge blur, vignette effect, and center focus. The video plays automatically in a loop while blurred edges create a natural image blur that draws the eye to the center — perfect for cinematic product showcases, editorial sections, and luxury brand experiences.

**Live Preview:** [**https://focusframe.framer.website/**](https://focusframe.framer.website/)

The image focus effect works by applying a progressive blur from the edges inward, keeping the center sharp and clear. Adjust the blur amount, edge size, and overlay color to create anything from a subtle soft-focus look to a dramatic cinematic vignette.

Fully customizable via property controls — no code needed.

**Key Features**

-   Auto-playing looping video with center image focus effect
    
-   Smooth edge blur and image blur vignette
    
-   Adjustable blur amount and blur edge size
    
-   Dark overlay with custom color and opacity
    
-   Centered title and subtitle text layer
    
-   Customizable font family, size, weight, and color
    
-   Border toggle with color and width control
    
-   Adjustable border radius
    
-   Interactive demo component included
    

**Best For**

-   Luxury and beauty brand websites
    
-   Editorial hero and focus sections
    
-   Fashion and lifestyle landing pages
    
-   Product showcase and highlight cards
    
-   Portfolio feature sections
    
-   Cinematic and soft-focus storytelling layouts
    

**Where to Use**

-   Homepage hero sections
    
-   Product detail pages
    
-   Creative agency and portfolio sites
    
-   Fashion and beauty e-commerce
    
-   Visual storytelling and editorial layouts
    

**How to Use**

1.  Add **FocusFrame** to your Framer canvas
    
2.  Upload your video source
    
3.  Adjust blur amount and edge blur size
    
4.  Customize title text and font
    
5.  Set overlay color and opacity
    
6.  Toggle border on or off
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4615

## Details

- **Author**: Ahmet Loca
- **Price**: $5.00
- **Published**: 2026-06-26
- **Updated**: 2026-07-29
- **Added**: 2026-06-26
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo