Uilora Orbit
Uilora Orbit — space/tech dark masonry grid with electric blue accents, scan-line overlays, HUD corner brackets, and animated system status.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [/* 5 Unsplash URLs */] | Array of 5 image URLs for the orbit tiles. |
| backgroundColor | string | "#000000" | Pure black background for maximum contrast. |
| accentColor | string | "#00A1FF" | Electric blue accent for HUD brackets, labels, and data cards. |
| heading | string | "UILORA ORBIT" | Main heading in the header section. |
| subheading | string | "Visual intelligence from above." | Tagline displayed below the heading. |
When to Use
Use Uilora Orbit for SaaS dashboards, developer tools, space tech brands, and any interface that needs to communicate precision, intelligence, and technical authority. The scan-line overlays and HUD brackets create an immersive command-center aesthetic.
Best Practices
Use high-contrast photography — the scan-line filter and dark gradient overlay work best with subjects that have clear focal points. Keep the accentColor consistent with your brand's primary interactive color.
Why This Component Matters
Uilora Orbit helps you build premium Uilora-powered tech interfaces that feel like mission control. The animated LIVE dot and progress bar add kinetic energy that makes the interface feel alive and operational.
FAQ
QWhat are the scan lines on the images?
They are a CSS repeating-linear-gradient overlay — thin 1px dark horizontal stripes every 4px — creating a CRT monitor / HUD aesthetic without JavaScript.
QWhat do the corner brackets indicate?
Four absolute-positioned divs with border-color matching accentColor form L-shaped corners on each image — inspired by military targeting systems and satellite camera frames.
QHow does the animated LIVE dot work?
It uses Framer Motion's animate prop cycling opacity 1 → 0.2 → 1 on a 1.4s infinite loop with easeInOut — a minimal pulsing effect that signals live data.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.