Weaving Ribbons
Primary Use Cases
Hero Sections: Create a dynamic, branded first impression for portfolios or agencies.
Announcement Bars: Highlight multiple calls to action or features in a visually layered way.
Sponsor/Logo Marquees: Showcase partners with a unique 3D depth effect.
Key Features
High-Fidelity Rendering: Utilizes 6x scale factor canvas textures for razor-sharp typography and logos.
Orthographic 3D Space: Ensures zero perspective distortion, maintaining perfectly parallel ribbon layouts.
Interactive Motion: Supports both continuous Auto Play and scroll-reactive movement with smooth lerping.
Infinite Customization: Add unlimited ribbons with independent control over angle, height, color, and Z-stacking.
Optimized Performance: Features a built-in ResizeObserver and strict WebGL memory cleanup to prevent browser leaks.
Framer-Native Controls: Fully adjustable through the Framer property panel, including image uploads for logos.
Mariam Munawar
