# Player Loading Toolkit powered by Treble

<figure><img src="https://631883580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBdhnsg0wyBQ1RrM9wHPt%2Fuploads%2FHT9D5h8PSWk9oddtYzNd%2Fimage.png?alt=media&#x26;token=d0c92e08-0c6a-408c-9f7c-fad00d01dba4" alt=""><figcaption></figcaption></figure>

Provide a superior user experience all while maximizing end user engagement using the new Player Loading Toolkit for [Treble](https://treble.threekit.com/). Threekit experiences are set apart from static images with:

* **Instant visuals** - Load the 3D experience in the background while showing a pre-rendered image instantly, once the experience is ready transition seamlessly to it.
* **Customizable loading options** - Show off different loading styles or replace it with your own branding entirely during loading.
* **Product Interaction Cues** - Automatic product rotation and other visual cues to let users know the product is ready to be interacted with.

![](https://631883580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBdhnsg0wyBQ1RrM9wHPt%2Fuploads%2FGuFCLT4fzqjBtxudOBRj%2FInstantVisuals2.gif?alt=media\&token=97e64b13-00f0-4e2f-b56e-18f617f12b8e)

The Threekit player by default shows a snapshot of your product while it's loading.

![](https://631883580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBdhnsg0wyBQ1RrM9wHPt%2Fuploads%2FSVAunEcyBssJLt4c2xFm%2FLoadingUI.gif?alt=media\&token=05a35a07-9db0-41f9-b6b0-7c4bbedff575)

While loading, you can use the out-of-the-box loading images, or you can showcase your own branding via custom code.

![](https://631883580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBdhnsg0wyBQ1RrM9wHPt%2Fuploads%2FsCizjFqKo1Zc7zKmdWPN%2FNoLoad.gif?alt=media\&token=55af0f67-6bd2-431c-a9db-4f80565c97a3)

Hide the loading all together as Threekit loads the interactive 3D experience in the background.

![](https://631883580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBdhnsg0wyBQ1RrM9wHPt%2Fuploads%2F4kuvshoOaUiF6lNC6hQ0%2FVisualCue.gif?alt=media\&token=226950dc-f0de-48df-be78-6bba1f8e931c)

When the interactive 3D experience is ready, have visual cues that let the user know the model can be interacted with.

![](https://631883580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBdhnsg0wyBQ1RrM9wHPt%2Fuploads%2FfKuvMUI23qNfkSNMhiwf%2FTurntable.gif?alt=media\&token=8d85a913-7e14-40df-8de4-f6e7eea7de51)

Rotation animation that rotates the product until you interact with it.

![](https://631883580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBdhnsg0wyBQ1RrM9wHPt%2Fuploads%2FpIwrE3Oy4sWXfNG79axn%2FBreathing.gif?alt=media\&token=a175d898-dd2f-480f-b512-723b12e0979b)

Breathing animation that slowly moves the product up and down until you interact with it.

![](https://631883580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBdhnsg0wyBQ1RrM9wHPt%2Fuploads%2Fvp6NDFEeCglSl2aonlna%2FSkeletonUI.gif?alt=media\&token=122ed0a7-c79b-46f6-a1fc-eac67b8c902d)

Reduce Cumulative Layout Shift (CLS) and improve your Google SEO rankings using the new configurator skeleton component.

**The player loading toolkit is only supported when using Treble.**

<br>