Motion Ambient

Motion Ambient

About Motion Ambient

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