Glass+

Bring a premium feel to your Framer Site!

Glass+ simulates realistic glass textures and refraction to deliver a refreshing, interactive experience to your site. With support for scroll-based animations and Variants, plus a wide range of adjustable properties, creating unique effects is just a few tweaks away.

Glass+ deeply integrates WebGL into Framer, delivering refined visuals while preserving performance. Focus on your creative vision — then publish it with ease.

Features

• Supports custom images and videos.
• Up to 10 adjustable properties to help you create unique effects.
• Supports scroll animations and scroll-based transformations.
• Works with Framer Variants for engaging sequence animations.
• Compatible with Framer’s native Transition controller.
• Additional helper settings for mobile-specific optimization.
• High-performance animation engine built for production-level pages.
• Precise control over animation endpoints — fully or partially reveal media content.
  
  

Key Property Controls

• Stripe (Number: 0 - 200)
  Number of stripes
• Angle (Number: 0 - 360)
  Angle of the stripes
• Distortion (Number: 0 - 1)
  Stripe distortion intensity. Increase this value to create wave-like effects.
• Drift (Number: -1 - 1)
  Stripe drift intensity. Increase this value to create a fractured visual effect.
• Advance - Contortion (Number: -1 - 1)
  Stripe bending intensity. Adjust this value to curve the stripes.
• Advance - Disturbance (Number: 0 - 1)
  Stripe spacing disturbance. Introduces randomness to stripe spacing.
• Advance - Offset (Number: -1 - 1)
  Stripe position offset. This significantly alters the stripe layout.
• Advance - Shadow (Number: 0 - 1)
  Shadow intensity along the stripes. Stronger near distorted areas and affected by Drift.
• Advance - Dispersion (Number: 0 - 1)
  Color dispersion intensity. Stronger near distortion and influenced by Distortion/Drift.
• Advance - Reflection (Number: 0 - 1)
  Highlight intensity. Stronger near distorted areas, affected by Distortion/Drift.
• Advance - Blend (Boolean: Yes/No)
  Blend highlight effect. Toggles whether highlights overlay on media content.
• Animation - Custom (Boolean: Yes/No)
  Custom animation endpoint. When enabled, final animation values can be manually adjusted.
  
  
  

For support, please contact x.com/jayzhushi.