WebX 3D Navigation

WebX 3D Navigation combines functional links with an interactive WebGL model that reacts as visitors move between navigation items.

Bring depth, movement and character into your website navigation. WebX 3D Navigation combines functional links with an interactive WebGL model that reacts as visitors move between navigation items. It is built for portfolios, agencies, creative studios and websites that want navigation to become part of the experience. Choose from the included WebX shapes or upload your own SVG or GLB model. Customize the material, lighting, depth, bevel, scale, rotation, typography and hover behaviour directly inside Framer. Key features • Responsive horizontal and vertical navigation • Built-in collection of 3D shapes • Custom SVG and GLB support • Chrome, gold, glass and iridescent materials • Custom colour, metalness and roughness • Adjustable extrusion depth and bevel • Balanced, Smooth and Ultra Smooth quality • Custom reflections and lighting • X, Y and Z hover rotation • Adjustable hover depth, lift and scale • Pointer-driven resting motion • Custom fonts, sizes and colours • Underline, fade and slide hover effects • Separate desktop and mobile typography • Responsive mobile stacking • Reduced-motion support • Automatic offscreen optimization • No coding required How to use Install the component in your Framer project. Add your navigation labels and links. Choose a built-in shape, SVG or GLB source. Select a material and adjust the lighting. Customize the hover motion and responsive layout. Preview and publish. For the best result, use clean SVG artwork with filled paths. Convert text and strokes to outlines before exporting. GLB files should be below 6MB, with fewer than 40 meshes and 180,000 vertices. A fixed component height between 600px and 900px works well for full-width hero navigation. Need help? Contact hello@bodilum.com .

Interactive 3D navigation