---
title: "Mascot 3D — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Visual Mess Studio · Effects. Mascot 3D lets you showcase a photo inside a translucent, reflective 3D object, with multiple shape options (square, circle, oval,…"
canonical: "https://framer.elliotli.dev/component/mascot-3d"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Mascot 3D

# Mascot 3D

Customizable 3D glass mascot

[View on Framer](https://framer.com/marketplace/components/mascot-3d/?via=elliot-li)

![Mascot 3D preview image 1](https://framer.elliotli.dev/og/component/mascot-3d/560cf2dfe3657a35/1600x1200.jpg)

## Summary

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

## Description

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](https://drive.google.com/drive/folders/1s1nG5trSU0vk3QSbpMvTwjf3JrzZWAWc?usp=sharing)

Want to use your own HDRI?

1.  Download an HDRI from [Poly Haven](https://polyhaven.com/hdris).
    
2.  Convert the `.hdr` to JPEG using the free [Gainmap Creator](https://gainmap-creator.monogrid.com/en/).
    
3.  Download the converted JPEG.
    
4.  Upload it directly into the Mascot 3D component.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ge7ulae9-PIDAVomsVZNvDIMxfmJHPHgDowKV5R)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ge7ulae9-hSNyzEFs43h1eWE9fPUrZdTUaKUaSz)

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #2821

## Details

- **Author**: Visual Mess Studio
- **Price**: $10.00
- **Published**: 2026-03-17
- **Updated**: 2026-08-22
- **Added**: 2026-03-08
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows