Morph Product Card

About Morph Product Card

Small at first glance. Complete when opened. A pill, small card or compact preview that physically transforms into a full product sheet with image or video, price, description and CTA. One continuous spring morph, a soft backdrop, pull-to-close on mobile, keyboard support and reduced-motion handling. Customize shape, size, colors, typography and motion directly in Framer.

Features

• Three closed shapes: Pill, Small Card and Compact Preview.

• Continuous morph of size, position, radius, media, background, shadow and content.

• Split or stacked expanded sheet, automatically adapted to the viewport.

• Image or video, with playback only while open.

• Optional price, description and CTA link.

• Spring and damping controls, hover micro-expansion and press feedback.

• Overlay color, opacity and deferred backdrop blur.

• Pull-down to close on touch devices.

• Focus management, Escape, focus trap and native semantics.

• Canvas Preview to design the open state in Framer.

• Reduced motion, backdrop-filter fallback and missing-media fallback.

• One standalone React + TypeScript file.

• 49 controls in the Framer properties panel

• Respects prefers-reduced-motion

• Renders correctly on the Framer canvas and in export

Created by LUNAUT Studio.