Device Morph Stage

Install

Device Morph Stage is delivered as a Framer component. You receive a Component URL, not a source file.

Complete your purchase. The confirmation screen and your receipt email both contain the Component URL.
Open the Framer project where you want to use it.
Paste the Component URL onto the canvas. Framer adds Device Morph Stage to the project.
Place the component on a page, then follow Quick Start below.

Keep your receipt. It is how you retrieve the Component URL again if you need to install the component in another project.

Quick Start

Add Device Morph Stage to your page and give it a visible width and height. Start around 960 × 680 px on desktop and 390 × 460 px on mobile.
Open Phone, Tablet, and Desktop to choose which devices are Enabled. Set Initial Device.
Choose Image or Video for each enabled device and upload your media.
Choose a Theme and adjust Hardware.
Choose Spring, Smooth, or None under Motion.
Open Framer Preview to try the selector, keyboard navigation, and swipe.

The current demo uses Warm, starts on Phone, enables all three devices, places the selector at Bottom, and uses Spring motion. Swipe is enabled. Its workspace screens are built-in demo content rather than editable uploaded screenshots. Use the media controls below to replace them.

Each device has its own media settings. You can mix images and videos across devices.

Setting	What it does
Media: Image	Displays the uploaded screenshot.
Media: Video	Displays an uploaded video file. MP4 is a practical starting point.
Image / Poster	Supplies the image, or an optional poster when using video.
Description	Describes the media for assistive technology. For images, an empty field uses the image’s existing alt text.
Fit: Cover	Fills the display and crops edges when aspect ratios differ.
Fit: Contain	Shows the complete media with space around it when needed.

Without media, the component displays an integrated workspace demo. Clear an image, or remove the video file while Video is selected, to return to the demo. The demo is illustrative; its text and cards are not individual editing controls.

Devices

Turn Enabled on or off inside each device group. Disabled devices disappear from the selector and swipe sequence.

Initial Device sets the starting view. If that device is disabled, the component selects a nearby enabled device. Disabling the current device also selects a valid alternative. If all devices are disabled, a safe Phone demo remains visible.

With one device enabled, the presentation stays on that device. The selector is hidden by default in this mode.

Selector

Set Selector to Yes or No to show or hide it. Position places it at the Top or Bottom. Change each device’s Label inside its device group.

Hide if Single hides the selector when only one device is enabled. Turn it off to keep the single button visible. Long labels are shortened visually to keep the layout intact; short labels work best.

Swipe

With Swipe enabled, swipe left across the device to move to the next enabled device, or right to move back. The sequence stops at each end and skips disabled devices. Mouse dragging also works.

Vertical gestures remain available for page scrolling. Swipe does not start on selector buttons or native video controls. One-device mode has nowhere to swipe.

Themes

Warm: cream background, dark frame, and blue accent.
Dark: dark stage, titanium-toned frame, and a coordinated dark demo.
Custom: exposes Custom Colors for Background, Frame, Text, and Accent.

Themes style the stage and hardware; they do not recolor uploaded screenshots or videos. Custom Background changes the stage, Frame changes the device hardware, Text controls the surrounding interface, and Accent changes the selected selector button and demo accents. The integrated demo retains its own legible typography and surfaces, with the chosen accent.

Hardware

Bezel changes the frame thickness. The component adapts it to the selected device and available space.

Camera offers Auto, None, Pill, and Notch. Auto chooses the camera detail appropriate to each device. Pill and Notch affect Phone; Tablet and Desktop retain an appropriately small camera detail. None removes the detail.

Shadow and Reflection each have an on/off switch and an Intensity control. Moderate settings usually work best with product screenshots.

Motion

Spring: a restrained physical morph between device shapes.
Smooth: an eased transition without the spring feel.
None: an immediate change.

Reduced-motion preferences are respected automatically: geometry changes immediately, with only a brief content fade.

Video

The Playback group appears when an enabled device uses Video. Its settings apply across device videos.

Property	Default	Behavior
Autoplay	On	Starts the active video when playback is available.
Loop	On	Repeats the video.
Muted	On	Silences playback; enabled by default.
Controls	Off	Shows the browser’s video controls.

Inactive videos pause. Playback also pauses in Canvas and when the component is out of view. Videos play inline on supporting mobile browsers. Native controls and codec support vary by browser.

Responsive Behavior

Phone, Tablet, and Desktop adapt automatically to the component’s available width and height. Smaller widths use a compact selector and a compact laptop presentation for Desktop. You generally do not need separate mobile versions of the component.

Use a flexible width and provide sufficient height. Around 460 px is a useful mobile starting point; around 680 px works well for larger layouts. Very short containers leave less room for the device. Uploaded screenshots scale or crop according to Fit; their internal interface does not reflow.

Recommended Usage

SaaS landing pages and app product pages
Portfolio case studies
Feature sections
Cross-platform product announcements

Best Practices

Use screenshots with similar visual hierarchy across devices.
Keep essential content near the center and away from the camera area.
Prepare media close to the intended display shape: tall Phone, landscape Tablet, wider Desktop.
Use short selector labels and subtle frame colors.
Avoid excessive bezel thickness and oversized video files.
Preview all enabled devices at your actual page breakpoints.

Accessibility

The selector supports Tab, Shift+Tab, Enter, Space, and Left/Right arrows, with a visible focus indicator and selected state. Home and End select the first and last enabled devices.

Add meaningful media descriptions, retain good color contrast, and keep the selector available when visitors need a keyboard alternative to swipe. Reduced-motion preferences are supported. Decorative hardware is excluded from assistive announcements.

Troubleshooting

Video does not autoplay

Check that the device uses Video, a playable file is uploaded, and Autoplay is on. Keep Muted on and test in Preview. Canvas intentionally pauses videos. If the browser blocks playback, use the play button or enable Controls.

Media appears cropped

Cover fills the screen by cropping unmatched edges. Choose Contain to show the whole image or video, or prepare media closer to the display’s aspect ratio.

Selector only shows one or two devices

Check Enabled inside each device group. Disabled devices are omitted. For a single enabled device, turn off Hide if Single if you want its button visible.

Initial Device changes automatically

The requested device is disabled. Enable it or select another Initial Device.

Swipe does not change device

Enable Swipe and at least two devices. Start the horizontal gesture on the device area, away from video controls. Swiping beyond the first or last device has no effect.

Custom colors have low contrast

Choose a Text color that contrasts with Background. The selected button uses white text, so choose a sufficiently dark Accent. Warm and Dark provide useful starting points.

FAQ

Can I use different media for each device?

Yes. Each device has independent image, video, description, and fit settings.

Can I use only Phone and Desktop?

Yes. Disable Tablet; selection and swipe skip it.

Can I hide the selector?

Yes. Set Selector to No. Keep accessibility in mind if visitors still need to change devices.

Can I use video?

Yes, including a different video for each device. Muted playback is the default.

Does it work on mobile?

Yes. It adapts to narrower containers and supports swipe. Preview your media at the widths used by your page.

Can I disable animations?

Yes. Choose Motion: None. Reduced-motion preferences also simplify animation automatically.

Can I customize the device frame?

Yes: frame color, bezel, camera, shadow, and reflection. The three device shapes and orientations are predefined.

Does it require external libraries or additional component files?

No additional installation is needed in Framer. The component is contained in one code file and uses Framer’s supported runtime.

Limitations

Predefined devices. Phone uses portrait geometry; Tablet is landscape; Desktop uses a laptop presentation. There is no arbitrary device editor or orientation control.
Illustrative demo. The integrated workspace is a starting visual. Its cards and text are not individual editing controls.
Media, not a live website. Uploaded screenshots and videos scale or crop; their internal interface does not reflow. Camera details may cover content near the top edge.
Custom contrast. Your palette determines contrast. The selected selector button uses white text, so choose a sufficiently dark Accent.
Bounded swipe. The sequence stops at the first and last enabled devices. Hiding the selector also removes the keyboard device-selection controls.
Browser video behavior. Autoplay with sound, codecs, and native controls depend on the browser. Videos pause in Canvas and when inactive or out of view.
Container height. Allow enough height for the device presentation. Very short containers reduce the available space.
English assistive labels. The per-device Description field is yours to write in any language, but the component's own accessibility labels — the device selector and the built-in demo's description — are in English and cannot be edited in v1.

Phone, Tablet, and Desktop inside one transforming device frame.
Responsive layouts, including a compact Desktop presentation on mobile.
Independent image and video settings for each device.
Themes, hardware customization, and three motion options.
Keyboard navigation, media descriptions, and reduced-motion support.