Orb Layer

Orb layers bring the elegant simplicity of circles and ellipses to your Component.Studio designs. Whether you need a perfect circle, a stretched oval, or anything in between, orb layers provide smooth, curved shapes that work beautifully as icons, decorative elements, backgrounds, buttons, and badges. With the same powerful fill and border options as box layers but without the complexity of corners, orbs are your go-to choice whenever you need a curved, organic shape.

Position and Size

Like all layers, orbs start with fundamental positioning and sizing controls. These properties determine where your orb appears and its dimensions.

Fill Properties

The fill determines what your orb looks like on the inside. Orbs support the same versatile fill options as box layers, from simple solid colors to complex gradients.

Fill Types

Fill Properties

Border Properties

Borders add definition and visual weight to your orbs. The curved border follows the elliptical or circular shape perfectly.

Border Types

Border Controls

Visual Effects

Orb layers support the complete Component.Studio effects pipeline. These effects can transform simple circles into stunning visual elements.

Working with Orb Layers

Common Use Cases

Adding Text to Orbs

Orb layers include an "Add Text to Orb" button that automatically creates a text layer centered within the orb. This is incredibly useful for:

• Badge numbers: Small numbers on notification badges
• Icon labels: Letters or symbols centered in circular icons
• Initials: Two-letter initials for avatar placeholders
• Button text: Labels on pill-shaped buttons

The text automatically starts with center horizontal alignment and middle vertical alignment, ensuring perfect centering within the orb shape.

Dynamic Orb Designs

Like all Component.Studio layers, orbs become incredibly powerful when combined with template variables:

• Status colors: Use {{row.statusColor}} in Fill Color 1 to make orb colors match data status (green for healthy, red for critical, etc.)
• Variable sizing: Use {{row.importanceLevel * 20}} in both Width and Height to create orbs that scale based on data values
• Team colors: Use dataset values to pull team colors, making each card's orbs match team branding

Rotation and Orbs

Performance Considerations

Orb layers are very efficient to render. The ellipse shape is drawn using PIXI.js graphics primitives, which are fast and lightweight. Even designs with dozens of orbs render smoothly.

• Gradients are efficient: Radial, horizontal, vertical, and diagonal gradients are generated programmatically and cached. Use them freely.
• Textures require loading: If using texture fills or borders, remember that each unique URL requires loading an image. Reuse textures when possible.
• Effects stack: Multiple effects on a single orb increase rendering complexity slightly, but it's rarely noticeable unless you have hundreds of orbs each with many effects.

Design Tips and Best Practices

General Orb Design Tips

• Odd numbers look better: When placing multiple orbs, odd numbers (3, 5, 7) often look more balanced than even numbers.
• Size variety creates interest: Don't make all orbs the same size. Vary diameters to create visual hierarchy and rhythm.
• Use radial gradients liberally: Radial gradients are almost always more interesting on orbs than solid colors, and they're just as efficient.
• Mind your borders: Very thick borders on very small orbs can overwhelm the shape. Keep border thickness proportional to orb size.
• Center alignment is your friend: When positioning orbs, center anchor points often work better than corner anchors because the orb is drawn from its center.
• Layer orbs for depth: Overlapping orbs of different sizes and opacities creates beautiful depth effects, especially for backgrounds.

Color Combinations That Work

Troubleshooting

My orb isn't perfectly round

Check that Width and Height are exactly the same value. Even a difference of 1 pixel will create an ellipse instead of a circle. Use the same value for both properties to guarantee perfect circularity.

My gradient looks wrong or unexpected

• For sphere effects, make sure you're using Radial gradient, not horizontal or vertical
• Check your Color Stop values - if they're very close together, the gradient will be abrupt rather than smooth
• Verify Fill Color 1 and Fill Color 2 are actually different colors
• Try adjusting Color Stop 1 to a value between 0-30 for typical center-highlight effects

My border looks too thick or thin

• Border thickness is in pixels - adjust the value up or down
• For small orbs (under 50px), keep borders thin (1-3px)
• For medium orbs (50-150px), borders of 3-8px usually work well
• For large orbs (over 150px), you can use thicker borders (8-20px)
• Check Border Alignment - changing from center to inside/outside affects the visual thickness

Rotation doesn't seem to do anything

If your orb is a perfect circle with a radial gradient or solid fill, rotation won't produce any visible change because the shape and fill are symmetrical in all directions. Rotation will be visible on ellipses with directional gradients (horizontal, vertical, diagonal) or if there are child layers like text inside the orb.

My texture fill looks distorted

Textures repeat to fill the orb shape. If your orb is an ellipse (not a circle), the texture will be stretched to match the elliptical shape, which can cause distortion. For best texture results, use circular orbs (equal width and height) or choose textures that work well when stretched.

Orb layers bring curves and softness to your Component.Studio designs. From tiny status dots to large decorative circles, from simple solid colors to complex radial gradients, orbs are versatile building blocks for beautiful designs. Experiment with gradients, embrace the curves, and have fun creating!