Mascot 3D

Mascot 3D lets you showcase a photo inside a translucent, reflective 3D object, with multiple shape options (square, circle, oval, heart, hexagon, octagon).

You can customize the scene background, switch HDR environments to change the reflection style, and fine-tune the glass look with tint, refraction (IOR), and opacity.

It also includes built-in animation controls for a continuous spin or a subtle swing, with optional X and Z motion for extra depth.

If you want it to be interactive, enable Orbit controls so users can smoothly drag and explore the mascot in real time.

Framer 3.0 Compatibility

Framer 3.0 no longer supports loading external .hdr environment files at runtime. To make Mascot 3D fully compatible, the included HDR environments have been converted to JPEG using a gainmap workflow.

Ready-to-use HDR environments: https://drive.google.com/drive/folders/1s1nG5trSU0vk3QSbpMvTwjf3JrzZWAWc?usp=sharing

Want to use your own HDRI?

1. Download an HDRI from Poly Haven.

2. Convert the .hdr to JPEG using the free Gainmap Creator.

3. Download the converted JPEG.

4. Upload it directly into the Mascot 3D component.

Inspired by the beautiful experiments from sabosugi (thank you for the inspiration) - https://codepen.io/sabosugi