About Component
GlassShowcasePro is a scroll-driven 3D glass box for Framer, built with WebGL and Three.js. As users scroll, images transition through a particle explosion — particles burst outward, mix colors between frames and reform into the next image. Encased in a physically accurate glass with transmission, IOR refraction and optional HDR environment lighting. Premium, smooth and unlike anything on the marketplace.
Perfect for luxury product reveals, portfolio storytelling and brands that demand visual depth.
Cinematic particle explosion between up to 8 images
Physically accurate glass — transmission, IOR and thickness
Optional HDR environment map for realistic glass reflections
Float animation with configurable amplitude and speed
Particle grid W × H controls (up to 256×256)
Scroll direction — Left → Right or Right → Left
Image Fill — controls particle coverage on box face
Explosion Power — subtle scatter to dramatic burst
Fade Range — crossfade overlap and timing control
Alt text prop for SEO and screen reader accessibility
Respects prefers-reduced-motion automatically
Static fallback with img tag for crawlers and Framer export
Use Cases
Luxury watch and jewelry product pages
Perfume and cosmetics brand launches
Fashion and lifestyle landing pages
Portfolio and personal branding sites
Creative agency hero and feature sections
Photography and visual storytelling pages
SaaS premium feature highlight sections
Architecture and interior design portfolios
Event and product launch showcases
E-commerce premium product reveal pages
Keywords
3D glass box, particle explosion, scroll animation framer, WebGL framer component, glass material, product showcase framer, particle transition, scroll-driven animation, Three.js, HDR lighting, luxury product reveal, glass effect, particle reveal, image transition framer, cinematic scroll, glass showcase, particle burst, framer 3D, scroll image gallery, product presentation
About Component
GlassShowcasePro is a scroll-driven 3D glass box for Framer, built with WebGL and Three.js. As users scroll, images transition through a particle explosion — particles burst outward, mix colors between frames and reform into the next image. Encased in a physically accurate glass with transmission, IOR refraction and optional HDR environment lighting. Premium, smooth and unlike anything on the marketplace.
Perfect for luxury product reveals, portfolio storytelling and brands that demand visual depth.
Cinematic particle explosion between up to 8 images
Physically accurate glass — transmission, IOR and thickness
Optional HDR environment map for realistic glass reflections
Float animation with configurable amplitude and speed
Particle grid W × H controls (up to 256×256)
Scroll direction — Left → Right or Right → Left
Image Fill — controls particle coverage on box face
Explosion Power — subtle scatter to dramatic burst
Fade Range — crossfade overlap and timing control
Alt text prop for SEO and screen reader accessibility
Respects prefers-reduced-motion automatically
Static fallback with img tag for crawlers and Framer export
Use Cases
Luxury watch and jewelry product pages
Perfume and cosmetics brand launches
Fashion and lifestyle landing pages
Portfolio and personal branding sites
Creative agency hero and feature sections
Photography and visual storytelling pages
SaaS premium feature highlight sections
Architecture and interior design portfolios
Event and product launch showcases
E-commerce premium product reveal pages
Keywords
3D glass box, particle explosion, scroll animation framer, WebGL framer component, glass material, product showcase framer, particle transition, scroll-driven animation, Three.js, HDR lighting, luxury product reveal, glass effect, particle reveal, image transition framer, cinematic scroll, glass showcase, particle burst, framer 3D, scroll image gallery, product presentation
Ahmet Loca
