The Holographic Menu is a premium, high-performance navigation component designed to wow your users. It combines standard DOM elements with a powerful WebGL 3D scene (using Three.js) to create a futuristic, holographic effect that is fully interactive and responsive.
• Next-Level Aesthetics: Adds a high-end, "Awwwards" style feel to your portfolio, agency site, or creative landing page.
• Fully Customizable: Control every color, font, spacing, and interaction directly from the Framer sidebar. No code required.
• Performance First: Built with optimized 3D layering and createPortal to ensure it doesn't slow down your site or clip incorrectly.
• Zero-Config Responsiveness: It Just Works on Mobile and Tablet, with granular override controls if you need them.
1. Menu Items Setup
The core of your navigation. Add as many items as you need (recommended 4-6 for best visual impact).
Text & Number: Set the display text (e.g., "Home") and an optional index number (e.g., "01.").
Link: Supports internal Framer pages (/about) and external URLs (https://...).
Typography: New! Full control over Font Family, Weight, Size, and Line Height for each item.
3D Shape: Assign a shape to appear when hovering this item. Choose from Primitives (Sphere, Box, Cone, Icosahedron) or upload your own Custom .glb model.
2. Typography & Layout (Responsive)
Fine-tune the look and feel across all devices without complex breakpoints.
Font Scaling: Use the "Mobile Font Scale" (e.g., 0.5) and "Tablet Font Scale" sliders to automatically resize your massive desktop typography for smaller screens.
Padding & Spacing: Key controls for Navbar Padding X/Y and Item Spacing allow you to align the menu perfectly.
Bottom Text Font: A global typography setting for your Social Links, Copyright, Email, and Phone text.
3. Visuals & Colors
Match your brand identity with the holographic shader settings.
Menu Background: The solid color behind the menu (usually dark).
Hologram Colors: Customize the Primary Glow, Accent Color, and Highlight Flicker to create your unique look.
Shape Settings: Control the Shape Size, Rotation Speed, and Animation Duration to make the hologram feel calm or energetic.
4. Social & Footer
A complete footer solution built right into the menu.
Social Links: Add icons pointing to your profiles. Supports Custom SVG uploads that automatically inherit your color settings.
Contact Options: Toggle "Show Email" and "Show Phone" to display clickable contact links alongside your copyright text.
5. Interactive Buttons
Customizing the trigger buttons.
Open/Close Icons: Upload custom images or SVGs for the "Menu" hamburger and "Close" X buttons.
Button Styles: Radius, Padding, Background Color, and Text Color are all configurable.
Custom Models: For optimal performance, keep your .glb files extremely low-poly (ideally under 100KB).
No Textures/Materials: The component applies its own holographic wireframe shader, so specific materials or textures are unnecessary.
Topology Matters: Since it renders as a wireframe, the edge flow of your model is what creates the visual effect.
Centering: Ensure your model is centered at (0,0,0) in your 3D software before exporting.
Z-Index: The menu renders with a high z-index (9999) to ensure it sits on top of sticky headers.
Fonts: Ensure the fonts you select in the Menu Items are loaded in your Framer project assets.
On mobile devices, the 3D scene automatically moves to the background, lowers its opacity for readability, and scales down 30% to fit narrow screens. You don't need to do anything—it happens automatically!
TROUBLESHOOTING
"My 3D shape isn't showing up!"
Check if you uploaded a valid .glb file.
Ensure "Shape Size" isn't set to 0.
If using a custom model, try scaling it up or down in the property controls.
"The font size is too big on mobile."
Lower the "Mobile Font Scale" property (default is 0.5, try 0.4 or 0.3).
Saif
