Reeded Glass — Animatable Reeded Glass Effect

About This Component

The Reeded Glass Layer lets you create highly realistic, fully animatable reeded‑glass effects with deep control over distortion, fluting patterns, masking, and optical behaviour. Designed as a flexible, layout‑adaptive layer, it scales to any frame size and supports fixed, fill, relative, viewport, and fit‑content sizing, making it ideal for modern interactive sections, hero visuals, and premium UI surfaces.

With adjustable stripe width, curvature, dispersion, refraction, masking, and waveform‑driven animation, the effect blends naturally with your image input to create a rich, dimensional, and immersive visual experience.

Usage Tips

Adjust stripe width depending on your layout size and the density of your design.

Use z‑index to place the glass layer above or below other elements depending on your composition.

Experiment with masks (radial or linear) to create spotlight, vignette, or directional fade effects.

Enable animation for dynamic, fluid motion using sine, cosine, pulse, sawtooth, square, or noise waveforms.

Key Features

1. Image & Background Controls

   • Image input, fit modes, solid/gradient backgrounds, preview toggle.

2. Effect Types

   • Vertical, horizontal, both, concave, radial, tapered, curved, zigzag, seigaiha.

3. Masking System

   • Radial/linear masks, intensity, feather, center controls, invert option.

4. Advanced Optics

   • Distortion, curvature, dispersion, refraction, blur.

5. Animation Engine

   • Waveform types, speed, amplitude, frequency.

Layout & Integration

The component is built to integrate seamlessly into any layout.

This makes it ideal for:

• Hero sections

• UI cards

• Background textures

• Interactive surfaces

• Hover/scroll‑based effects

How to Set Up

1. Drag Reeded Glass Layer onto your canvas.

2. Place it inside your target stack or frame.

3. Adjust size and positioning to match your layout.

4. Layer your content above or below using z‑index.

5. Configure the reeded‑glass properties to achieve your desired look.

6. Publish.

🔒 Refund Policy

All digital product sales are final and non‑refundable.

If you have questions before purchasing, feel free to reach out at dacostaroyce@gmail.com — I’m happy to help.

Enjoy creating!