Genie Gallary

The Iconic macOS Animation, Rebuilt for Framer Give your users a delightful, nostalgic, and incredibly premium interaction. The Genie Gallery uses advanced WebGL mathematics to recreate the famous "vacuum funnel" effect from macOS, allowing full-screen images to gracefully squish and curve into a floating glass dock.

Features:

• Zero CSS Distortion: The object-fit cover matrix prevents the image texture from squishing or stretching regardless of screen size.

• Dynamic Backdrop Blur: The environmental background blur and dimming are physically tied to the 3D animation loop, staying in perfect sync frame-by-frame.

• Flexible Content: Upload local image files directly or paste external URLs for dynamic content mapping.

You have total control over the component without ever looking at the code.

• Dock Aesthetics: Modify the dock color, padding, gap, and icon sizes.

• Expanded View: Control exactly how large the image expands in the center of the screen.

• Radii Control: Set independent border radii for the small dock icons and the large expanded images.

• Environment: Change the overlay tint color, maximum opacity, and background blur amount.

• Animation Speed: Dial in the exact speed of the physics easing curve.