📄️ Animations
The viewer API implements a simple spring physics animation system. Besides setting values through the API, it is also possible to animate most values.
📄️ AR banners
AR banners are integrated signposts within an Augmented Reality experience.
📄️ Custom Background Image
It is possible to set a custom background image for the viewer via the styles, as shown in the example below.
📄️ Custom Buttons
This example demonstrates how to use the ::part pseudo-element to customize the appearance and positioning of buttons in the viewer.
📄️ Custom-built QR Code Modal
Disabling the default QR Modal
📄️ Custom Thumbnail Bar
You can use the `` with a custom thumbnail bar.
📄️ Custom QR Modal
This example shows how to customize the QR modal via parts and CSS variables and change the copy inside the modal.
📄️ Exclude frames
It is possible to exclude frames from a 360 viewer. This is useful when you do not want to show the back
📄️ Fullscreen-compatible Detached Thumbnail Bar
When using the thumbnail bar in detached mode, the thumbnail-bar is not part of the viewer anymore. It will therefore not be included in fullscreen mode, where the only way to navigate will be the navigation buttons.
📄️ Programmatic AR
The "View in AR" button provided by the cylindo-viewer component can be controlled through the ar API. This allows for flexibility in the behavior, enabling it to be triggered by external buttons, actions, or scripts.
📄️ Programmatic fullscreen controls
You can use the fullscreen API to programmatically control the fullscreen status from your own components.
📄️ Programmatic zoom controls
You can use the zoom API to implement your own zoom controls or to synchronize the zoom level with other components.
📄️ Stacked view
Showing multiple images in a grid is a common pattern for Product Detail Pages. This can be achieved by using multiple cylindo-viewer components, each with a different selected items.