5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:T93a,

Soft Focus Card turns any image or video into a polished brand card. The media sits under a soft blur — a fade along the bottom, or a vignette that eases the edges out of focus — with your logo centered on top. Hover it and the whole card softens: the media blurs and drifts in as the logo scales down, on one easing you control.

Made to Fit Your Design

Load an image or a video, from an upload or a URL, and set a focal point so the crop sits where you want. Pick the blur shape and strength, tune the hover blur and zoom, and drive every motion with a single Transition. Add an optional color overlay, a keyline frame in any color and weight, and a clean corner radius.

Key Features

Media

Image or Video, each from an upload or a URL
Poster for video, shown on the canvas and while it loads
Focal X / Y to place the crop
Independent sources for the media and the logo

Blur

Bottom fade or edge Vignette, with adjustable blur and reach
Soft, gradual falloff at any size
On hover the media blurs and zooms while the logo scales down
One Transition drives the media zoom, logo zoom and blur together

Video

Autoplay on or off
Play on Hover when autoplay is off, Pause on Hover when it is on
Muted by default, with optional Unmute on Hover
Loops, and pauses when scrolled out of view

Style & Link

Optional color overlay, on or off
Keyline frame: color and weight, plus corner radius
Centered logo with adjustable width, capped so it never overflows
Turn the whole card into a link, with an optional new tab

How to Set Up

Drag Soft Focus Card onto your canvas
Set Media to Image or Video
Add a logo and pick the blur shape
Adjust the hover blur, zoom and transition to taste
Publish

Refund Policy

All sales of digital products are final and non-refundable. Questions? Contact hellonostromostudio@gmail.com before purchasing. Enjoy!

5a:[["$","$L5d",null,{"post":{"id":"01a0810c-4404-706a-95c2-c451a0e0e59a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"XTMG5HzNVjPep4bmYrKf","resolved":true,"title":"Soft Focus Card","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Soft Focus Card","marks":[{"type":"bold"}]},{"type":"text","text":" turns any image or video into a polished brand card. The media sits under a soft blur — a fade along the bottom, or a vignette that eases the edges out of focus — with your logo centered on top. Hover it and the whole card softens: the media blurs and drifts in as the logo scales down, on one easing you control."}]},{"type":"customHeading","content":[{"type":"text","text":"Made to Fit Your Design"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Load an image or a video, from an upload or a URL, and set a focal point so the crop sits where you want. Pick the blur shape and strength, tune the hover blur and zoom, and drive every motion with a single Transition. Add an optional color overlay, a keyline frame in any color and weight, and a clean corner radius."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Media"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image or Video, each from an upload or a URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Poster for video, shown on the canvas and while it loads"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Focal X / Y to place the crop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent sources for the media and the logo"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Blur"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bottom fade or edge Vignette, with adjustable blur and reach"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Soft, gradual falloff at any size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"On hover the media blurs and zooms while the logo scales down"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One Transition drives the media zoom, logo zoom and blur together"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Video"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay on or off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Play on Hover when autoplay is off, Pause on Hover when it is on"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Muted by default, with optional Unmute on Hover"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loops, and pauses when scrolled out of view"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Style & Link"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional color overlay, on or off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyline frame: color and weight, plus corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Centered logo with adjustable width, capped so it never overflows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn the whole card into a link, with an optional new tab"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Set Up"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag Soft Focus Card onto your canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set Media to Image or Video"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add a logo and pick the blur shape"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the hover blur, zoom and transition to taste"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish"}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales of digital products are final and non-refundable. Questions? Contact "},{"type":"text","text":"hellonostromostudio@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hellonostromostudio@gmail.com","target":"_blank"}}]},{"type":"text","text":" before purchasing. Enjoy!"}]}]},"introduction":"A media card that blurs on hover","slug":"soft-focus-card","author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/042e00c3-0e8c-49d7-b0d9-458a683d2cbe/01a0810b-c887-7272-8802-910633d4e3d0.jpg","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-08T12:44:19.352Z","updatedAt":"2026-09-08T12:44:19.352Z","publishedAt":"2026-09-08T12:44:19.350Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SoftFocusCard-OmkLW5.js@BV6zAwqQ7QKZ4rO7Dxej","previewUrl":"https://softfocuscard.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"BV6zAwqQ7QKZ4rO7Dxej","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-08T12:44:19.844Z","updatedAt":"2026-09-08T12:44:19.844Z","reported":false}}],"$L5f"]

Suggested for you