5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tc98,

Overview

Motion Ambient is a CMS-friendly Framer component for building interactive media cards with hover-triggered slideshows, ambient lighting, tilt, and responsive reveal behavior.

Designed for portfolios, editorial layouts, featured stories, and creative showcases, it supports both CMS-bound content and manually uploaded media. Use it to create more expressive thumbnails, hero cards, and media-driven layouts without building the interaction system from scratch.

What it does

Motion Ambient turns a static media card into a more dynamic preview experience. On hover or focus, cards can trigger slideshow playback, ambient lighting, border changes, tilt, and overlay motion. On mobile and tablet, the component can reveal content when the card enters view for a more touch-friendly experience.

Features

CMS-friendly Framer component
Supports both image and video content
Works with CMS variables or manual media uploads
Hover-triggered slideshow behavior
Multiple transition styles including fade, instant, slide, and push
Adjustable slideshow duration and timing
Ambient lighting with blur, spread, intensity, saturate, and brightness controls
3D tilt controls
Overlay can follow the cursor or remain stationary
Border radius, border color, and border visibility controls
Supports CMS color variables for border styling
Aspect ratio and media alignment controls
Video mute / unmute behavior on focus
Responsive reveal behavior for mobile and tablet
Flexible enough for grids, hero cards, and split compositions

Perfect for

Creative agencies
Photographers
Videographers
Design portfolios
Editorial and fashion sites
Brand showcases
Campaign landing pages
Art direction case studies
CMS-driven galleries and collections

Motion Ambient is built for designers who want more atmosphere and motion in their content cards while keeping the setup flexible. It gives you a wide range of controls for interaction, media presentation, and styling, making it easy to adapt across different layouts and visual directions.

Live demo

See the component in action:

https://cmsmotion-demo.framer.website/motion-ambient-demo

framer component being demonstrated

5a:[["$","$L5d",null,{"post":{"id":"019d68c0-ac81-7898-b6f7-040993e3d21c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7e6cd64f-eee2-47a3-97be-0bc9e75ecd2d","name":"mnfst-studio","slug":"mnfst-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/871013/avatar-5rNBDBRPPjjnfF1JWoLU8kxlvL1k0z.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"aoRmfYsUolfhYRkd7yO1","resolved":true,"title":"Motion Ambient","body":"$5e","bodyJson":null,"introduction":"CMS slideshow card with glow","slug":"motion-ambient","author":{"framerUserId":"7e6cd64f-eee2-47a3-97be-0bc9e75ecd2d","name":"mnfst-studio","slug":"mnfst-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/871013/avatar-5rNBDBRPPjjnfF1JWoLU8kxlvL1k0z.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/aoRmfYsUolfhYRkd7yO1/motion-ambient-5NZf8LXE85FGe2GjUcqrRxFNdPB4qw","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-18T05:17:01.039Z","updatedAt":"2026-04-07T09:37:41.894Z","publishedAt":"2026-04-07T16:22:30.785Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cmsmotion-demo.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_ddmIAmqrANLwL69p47VKnfHGGAKgWW54l33VJ2XwQdU","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"Cbje6Xz3PSHZ7IU6FFN6","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-07T16:22:30.785Z","updatedAt":"2026-04-07T16:22:30.785Z","reported":false}}],"$L5f"]

Suggested for you