Vectary Documentation
ChangelogFeedbackHelpOpen Studio
  • Welcome to Vectary Docs
  • Documentation
    • Getting started
      • System requirements
      • User interface
      • Rendering
      • Dashboard
      • Account settings
      • Roles
      • Scene orientation
      • Units
    • Importing
      • Import formats
      • Figma frames import
      • CAD files
      • Vectary Processor
    • Design process
      • Design mode
        • Selections tools
        • Primitives
        • 3D Text
        • Light sources
        • Modifiers
          • Array Linear
          • Array Radial
          • Array Grid
          • Array Object
          • Subdivide
          • Bevel
          • Randomize
          • Symmetry
          • Boolean
        • Deformers
          • Bend
          • Twist
          • Taper
          • Skew
          • Stretch
          • Spherify
          • Noise
          • Simplify
        • Setup
          • Group
          • Empty
          • Camera
          • Backdrop
          • Smooth normals
          • Clipping plane
        • Interactive elements
      • Materials and Textures
        • Basic materials
          • Color
          • Roughness
          • Metalness
          • Opacity
          • Emission
          • Normal map
        • Advanced materials
          • Subsurface
          • Refraction
          • Clearcoat
          • Thinfilm
          • Reflectivity
          • Double sided material
        • Baked textures
          • Ambient occlusion (texture)
          • Lightmap
          • Texture remapping
        • Importing own textures
      • Animated materials
      • Decals
      • Camera
      • Environment
      • Background
      • Ground plane
      • Effects
        • Reflections
        • Ambient Occlusion
        • Soft Shadows
        • Fading
        • Smooth edges
        • Adjustments
        • Color Balance
        • Vignette
        • Grain
        • Bloom
      • Control bar
        • Fit View
        • Viewport display modes
        • Gizmo & Origin
        • Snapping
        • Download image
      • Libraries
        • Asset library
        • Materials library
        • Environments library
      • Edit mode
        • Selection tools
        • New object
        • Draw
        • Primitives
        • Extrude
        • Bevel
        • Make circle
        • Bridge
        • Slide
        • Cut
        • Collapse
        • Cap open boundaries
        • Merge faces
        • Mesh Tools
        • Normals
    • 3D configurator
      • Variants
      • Interactions
        • Triggers
        • Conditions
        • Actions
          • Animated texture
          • Animation
          • Cameras
          • Download image
          • Highlight
          • Interactions
          • Materials
          • Link
          • Sounds
          • Transformation
          • Upload image
          • Variants
          • Visibility
          • Send event
          • Set variable
        • Events (for API)
      • Animations
      • Floating UI
        • Floating UI settings
        • Container
        • Materials (UI)
        • Variants (UI)
        • Text
        • Image
        • Button
        • Slider
        • Input
        • Tips
      • Hotspots
      • Variables & Expressions
        • Syntax
        • Functions
        • List of inputs
        • Data import (.csv)
    • Project settings
      • Version history
      • Augmented Reality (WebAR)
      • WebXR (beta)
      • Loading screen
      • Mouse controls
      • Interaction prompt
      • Menu - Settings
    • Sharing, exporting, embedding
      • Sharing
      • Performance analyzer
      • Optimizing a shared project
        • Geometry
        • Textures
        • Materials
        • Effects
        • Light and shadows
        • HDRI
        • Ground plane
        • Tips
      • Project cloning
      • Embedding to other software
      • Export options
    • Other
      • Vectary Plugin for Figma
      • 2D to 3D
      • Selections
      • Comments
      • Shortcuts
  • API
    • Model API
      • Quick Start
      • API Reference
      • Type Definitions
      • Events & Listeners
      • Floating UI
      • Ecommerce
        • Webflow
        • Shopify
        • Custom code
Powered by GitBook
LogoLogo

Website

  • Pricing
  • Blog
  • Security
  • Website

Social

  • YouTube
  • LinkedIn
  • Discord

Copyright © 2025 Vectary Inc. All rights reserved

On this page
  • Floating or Docked
  • Positioning & Layout
  • Size & Layout
  • Fill
  • Stroke
  • Effects
Export as PDF
  1. Documentation
  2. 3D configurator
  3. Floating UI

Floating UI settings

PreviousFloating UINextContainer

Last updated 1 month ago

Floating or Docked

Before configuring the Floating UI, determine its type: Floating or Docked. These two types function differently:

  • Floating — this type of UI overlays the 3D canvas, appearing above the scene.

  • Docked — this type of UI is placed adjacent to the 3D canvas instead of overlapping it. This prevents interference with 3D objects and ensures a more seamless interaction experience when adjusting the camera view.

Positioning & Layout

  • Position — Defines the Floating UI’s position relative to the canvas. If the appearance of Floating UI has been set up within Interactions relative to an object or pointer, this setting will also be applied.

  • Offset — Adjusts the horizontal and vertical offset of the Floating UI. If the appearance of Floating UI has been set up within Interactions relative to an object or pointer, this setting will also be applied.

  • Stacking — Controls the direction in which UI elements inside the Floating UI are arranged.

  • Align elements — Sets alignment for elements within the Floating UI.

  • Spacing — Adjusts the spacing between UI elements inside the Floating UI.

Size & Layout

  • W — Defines the width of the Floating UI.

  • H — Defines the height of the Floating UI.

  • Fixed — A fixed size set in pixels.

  • Fill — Adjusts the size based on the parent element (for Floating UI, the parent is the Canvas).

  • Hug — Adapts the size based on the largest element inside (available only for Floating UI and Container elements).

  • Padding — Defines the horizontal and vertical padding inside the Floating UI.

  • Corner radius — Sets the border rounding of the Floating UI.

Fill

  • Default color — The background color of the Floating UI. If disabled, the Floating UI will be transparent.

  • Hover color — The background color when hovering over the Floating UI.

Stroke

  • Thickness — Defines the thickness of the Floating UI's border.

  • Default color — The color of the border. If disabled, the stroke will be transparent.

  • Hover color — The border color when hovering over the Floating UI.

Effects

  • Shadow — Adds a shadow effect to the Floating UI.

  • Background Blur — Applies a blur effect. This effect is visible when the Floating UI background has transparency (Fill → Default color < 100%).