# Armillary Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. A WebGPU armillary sphere for React: polished bands turning round one center in chrome, gold, glass, foil or pearl, with rounded or crisp edges. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does Armillary turns up to five bands round one center, each on its own axis, as the rings of an armillary sphere do, so they cross, part and now and then fall into line. Every band is traced exactly with its real thickness, and its edges are as round or as crisp as you set them. Choose the finish: polished chrome, gold, copper, brushed aluminum with its streaked highlight, holographic foil whose rainbow walks with the angle, clear glass, pearl or matte. A dark studio lights them: long softboxes mirrored along each band, a warm panel low on one side and a cool light that catches the rims. Move the pointer and the sphere turns toward it. ## Choose it for Hold a product launch, an astronomy-themed brand or a premium hero: the sphere to one side, the words on the other, on a dark page. ## Limits Armillary draws its own rings in its own studio; it does not load 3D models, reflect your page or cast shadows onto other elements. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/armillary/edit?look=default&scene=landing) ## Landing scene This preview uses `position`: [0.74,0.5], `size`: 0.4. The editor link carries these settings with your Look, except the placement: the editor keeps the shader centred. Direct editor visits use the product defaults; Reset all restores those defaults. ## Install Armillary is part of Aperveil Shaders and Aperveil Pro, coming soon. Its live demo is open; installation and downloads open in a later release. Free shaders install today: see the [Aperveil integration guide](https://www.aperveil.com/docs). ## Controls - Finish (`material`, select): What the bands are made of. - Studio light (`metalColor`, color): The colour of the studio's softboxes, which the finishes mirror or gather; white keeps them true. - Accent panel (`accentColor`, color): The coloured panel low on one side, seen in the bands' inner faces. - Rim light (`rimColor`, color): The faint light the rims catch as thin lines. - Background (`background`, color): The studio's dark ground. - Rings (`rings`, slider): How many bands turn round the centre. - Size (`size`, slider): The radius of the largest band. - Band width (`band`, slider): How tall each band is, against its radius. - Thickness (`thickness`, slider): How thick the metal is; its rims show as thin bright lines. Thicker bands draw the inner ones in, so they never touch. - Edge roundness (`roundness`, slider): How round the bands' edges are: 0 cuts them square, 1 rounds a band's whole edge into a half circle. - Tilt (`tilt`, slider): How far the sphere leans toward you. - Speed (`speed`, slider): How fast the bands turn. - Studio turn (`studio`, slider): Where the softboxes stand round the gimbal. - Pointer response (`interaction`, slider): How far the sphere turns toward the pointer. - Position (`position`, xy): Where the gimbal stands in the frame. - Opacity (`opacity`, slider): Opacity of the whole effect, including its background. - Background opacity (`backgroundOpacity`, slider): Fade the background on its own, for a transparent overlay. ## Compatibility WebGPU rendering requires a supported browser and secure context: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out (checked October 2026). The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. ## Performance 6.423 ms GPU timestamp median; p95 6.947 ms. 1440x900 @ dpr 1.25; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-20. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee. ## Questions ### Can I change what the rings are made of? Yes. Finish switches between chrome, gold, copper, brushed aluminum, holographic foil, glass, pearl and matte; Studio light, Accent panel and Rim light color the light they reflect. ### Can the edges be rounded? Yes. Edge roundness takes them from square-cut to fully rounded, and Thickness and Band width set the bands' cross-section; the shape is traced exactly, not faked with shading. ### What does the pointer do? It turns the whole sphere a little toward itself; Pointer response sets how far. ### What happens without WebGPU? This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component. ### Can I use this shader commercially? Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects. ## License Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects. ## Related shaders - [Liquid Chrome](https://www.aperveil.com/shaders/liquid-chrome) - [Glass Facets](https://www.aperveil.com/shaders/glass-facets) - [Chroma Orbit](https://www.aperveil.com/shaders/chroma-orbit)