Product demos & devices
Also searched as: product demos, device frame, app showcase, ui stage, mockup, product walkthrough
Canonical Definition
Product demos and device scenes present digital software interfaces inside simulated smartphone, tablet, or desktop frames with realistic camera staging and cursor interactions.
90 to 240 frames per workflow step (3s - 8s)
cubic-bezier(0.16, 1, 0.3, 1)
Raw screen recordings are flat, uncinematic, and frequently expose low-resolution artifacts or messy operating system clutter. High-end product video stages UI inside vector device hardware.
The virtual camera punches into details, simulated cursors click buttons with realistic ripple feedback, and notifications pop with spring-loaded physical realism.
3D Device Stages & Multi-Device Splays
Floating laptops and smartphones on dynamic reflective stages
Device stages place mockups in three-dimensional space with ambient floor reflections, subtle tilt angles, and smooth orbit camera paths.
How this works: A hardware frame floating in 3D space with dynamic reflection and coordinated screen playback.
- Parametric device bezel selection (iPhone, MacBook, iPad)
- Dynamic specular screen glare reflection
- Screen contents can be live React components or video MP4s
Interactive App Walkthroughs & Zoom Punch-Ins
Guiding the viewer through key workflows with automated cursors
Rather than showing the whole UI at once, the camera dives into the input bar, types a prompt, clicks submit, and pans to the generated output.
How this works: A multi-step application walkthrough highlighting feature workflows with animated cursors and zoom focus.
- Smooth Bézier cursor movement between clickable targets
- Spring-loaded click states with ripple rings
- Synchronized camera tracking to keep the action centered
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Render UI components directly in vector DOM or 2x/3x resolution for infinite sharpness during camera zooms.
- Pair cursor clicks with crisp haptic UI click sound effects.
Common Failure Modes (What to avoid)
- Leaving the cursor static in the center of the frame: realistic cursors ease in, hover, click, and exit.
- Using low-res screenshots that blur when the virtual camera punches in.
Working catalog implementations
Typed Remotion components ready to drop into code.
Device Frame Stage
A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float
App Showcase
Fitness app product showcase with three floating smartphone screens
Vertical Media Filler
Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)
Build product demos & devices in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
UI motion & microinteractions
UI motion is the animation of user interface elements — buttons, toggles, sheets, tabs, and modals — demonstrating cause and effect and operational feedback inside software.
Motion & CameraCamera moves & focus
Camera movement applies the spatial language of cinematography — push-ins, pull-backs, orbit rotations, and rack focus — to 2D graphic canvases that possess no physical lens.
Motion FundamentalsB-roll & cutaways
B-roll is supplementary footage, device mockups, or motion diagrams cut over primary footage to illustrate the speaker's words and seamlessly conceal edit seams.