Skip to content

component

Mascot 3D

By Visual Mess Studio

Details

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 Want to use your own HDRI? Download an HDRI from Poly Haven . Convert the .hdr to JPEG using the free Gainmap Creator . Download the converted JPEG. Upload it directly into the Mascot 3D component. Inspired by the beautiful experiments from sabosugi (thank you for the inspiration) - https://codepen.io/sabosugi

Introduction

Customizable 3D glass mascot

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400146508/148/228/309/79/15
  • All · #2152