311 lines
11 KiB
Markdown
311 lines
11 KiB
Markdown
---
|
|
name: holographic-ui
|
|
description: Web and App implementation guide for Holographic UI. Trigger when user wants light-based appearance, projected interfaces, and transparent floating elements.
|
|
date_added: "2026-06-17"
|
|
risk: safe
|
|
source: self
|
|
source_type: self
|
|
---
|
|
|
|
# Holographic UI
|
|
|
|
> "Made of light. Interfaces projected into thin air, visible but completely translucent."
|
|
|
|
|
|
## When to Use
|
|
Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
|
|
|
|
## Core Principles
|
|
1. **Zero Opacity Backgrounds**: Elements are never fully solid. Everything is semi-transparent, allowing the background to show through.
|
|
2. **Scanlines and Interference**: The illusion of a projection is sold by horizontal scanlines, slight chromatic aberration, or flickering.
|
|
3. **Luminous Edges**: The borders of elements are brighter than the centers, mimicking how lasers or light projections focus at the edges.
|
|
|
|
## Visual DNA
|
|
- **Colors**: Almost exclusively monochrome Cyan, Blue, or Green, with white core highlights.
|
|
- **Typography**: Thin, technical sans-serifs. Must have a glowing `text-shadow`.
|
|
- **Styling**: Intensive use of `rgba()`, `mix-blend-mode: screen` or `add`, and CSS filters.
|
|
|
|
## Web Implementation
|
|
- **CSS Example**:
|
|
```css
|
|
body {
|
|
background-color: #020202; /* Must be dark for holograms to show */
|
|
background-image: url('dark-lab-background.jpg');
|
|
background-size: cover;
|
|
color: #88ffff;
|
|
}
|
|
|
|
.hologram-panel {
|
|
background: rgba(0, 200, 255, 0.05); /* Extremely sheer */
|
|
border: 1px solid rgba(136, 255, 255, 0.5);
|
|
border-radius: 4px;
|
|
padding: 30px;
|
|
|
|
/* The glowing edge */
|
|
box-shadow:
|
|
inset 0 0 20px rgba(0, 200, 255, 0.2),
|
|
0 0 15px rgba(0, 200, 255, 0.3);
|
|
|
|
/* Scanline effect */
|
|
background-image: linear-gradient(
|
|
rgba(136, 255, 255, 0.1) 1px,
|
|
transparent 1px
|
|
);
|
|
background-size: 100% 4px;
|
|
}
|
|
|
|
.holo-text {
|
|
font-family: 'Rajdhani', sans-serif;
|
|
text-transform: uppercase;
|
|
text-shadow: 0 0 8px rgba(136, 255, 255, 0.8);
|
|
mix-blend-mode: screen;
|
|
}
|
|
|
|
/* Subtle flicker */
|
|
.holo-flicker {
|
|
animation: hologramFlicker 4s infinite;
|
|
}
|
|
|
|
@keyframes hologramFlicker {
|
|
0%, 100% { opacity: 1; }
|
|
92% { opacity: 1; }
|
|
93% { opacity: 0.4; }
|
|
94% { opacity: 0.9; }
|
|
96% { opacity: 0.2; }
|
|
98% { opacity: 1; }
|
|
}
|
|
```
|
|
|
|
## App Implementation
|
|
|
|
### SwiftUI
|
|
```swift
|
|
struct HolographicUIView: View {
|
|
@State private var isFlickering = false
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
Color.black.ignoresSafeArea()
|
|
|
|
VStack {
|
|
Text("HOLOGRAM ACTIVE")
|
|
.font(.custom("Courier", size: 24))
|
|
.foregroundColor(Color(hex: "88FFFF"))
|
|
.shadow(color: Color(hex: "88FFFF"), radius: 10)
|
|
.blendMode(.screen) // Critical for light UI
|
|
|
|
Spacer().frame(height: 40)
|
|
|
|
VStack {
|
|
Text("SYSTEM DIAGNOSTICS")
|
|
.foregroundColor(Color(hex: "88FFFF"))
|
|
}
|
|
.padding(30)
|
|
.frame(maxWidth: .infinity)
|
|
.background(Color(hex: "88FFFF").opacity(0.05))
|
|
.border(Color(hex: "88FFFF").opacity(0.5), width: 1)
|
|
// The glowing edge effect
|
|
.shadow(color: Color(hex: "88FFFF").opacity(0.5), radius: 15)
|
|
.blendMode(.screen)
|
|
.opacity(isFlickering ? 0.4 : 1.0)
|
|
}
|
|
.padding()
|
|
|
|
// Scanline Overlay
|
|
LinearGradient(
|
|
stops: [
|
|
.init(color: Color(hex: "88FFFF").opacity(0.1), location: 0),
|
|
.init(color: .clear, location: 0.5)
|
|
],
|
|
startPoint: .top, endPoint: .bottom
|
|
)
|
|
.frame(height: 4)
|
|
.background(Color.clear)
|
|
// You would tile this in a real app using an Image or custom shape
|
|
.blendMode(.screen)
|
|
}
|
|
.onAppear {
|
|
// Simulate flicker
|
|
Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { _ in
|
|
if Int.random(in: 1...100) > 95 {
|
|
isFlickering.toggle()
|
|
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
|
|
isFlickering = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
- `.blendMode(.screen)` is absolutely critical. It makes elements act like projected light.
|
|
- Stack multiple `.shadow()` modifiers to create a bloom effect around text and borders.
|
|
|
|
### Flutter
|
|
```dart
|
|
class HolographicScreen extends StatelessWidget {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.black, // Dark lab background
|
|
body: Stack(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.all(24.0),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// Glowing Text
|
|
const Text(
|
|
'HOLOGRAM ACTIVE',
|
|
style: TextStyle(
|
|
fontFamily: 'Courier',
|
|
fontSize: 24,
|
|
color: Color(0xFF88FFFF),
|
|
shadows: [Shadow(color: Color(0xFF88FFFF), blurRadius: 10)],
|
|
),
|
|
),
|
|
const SizedBox(height: 40),
|
|
|
|
// Hologram Panel
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(30),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF88FFFF).withOpacity(0.05),
|
|
border: Border.all(color: const Color(0xFF88FFFF).withOpacity(0.5)),
|
|
boxShadow: [
|
|
BoxShadow(color: const Color(0xFF88FFFF).withOpacity(0.2), blurRadius: 15, spreadRadius: 5),
|
|
],
|
|
),
|
|
child: const Text(
|
|
'SYSTEM DIAGNOSTICS',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(color: Color(0xFF88FFFF)),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// Scanlines (IgnorePointer so it doesn't block taps)
|
|
IgnorePointer(
|
|
child: ShaderMask(
|
|
blendMode: BlendMode.screen, // Makes it act like light
|
|
shaderCallback: (bounds) => const LinearGradient(
|
|
begin: Alignment.topCenter, end: Alignment.bottomCenter,
|
|
stops: [0.0, 0.5, 0.5, 1.0],
|
|
colors: [Colors.black12, Colors.black12, Colors.transparent, Colors.transparent],
|
|
).createShader(bounds),
|
|
// To actually tile in Flutter, you often need a CustomPainter.
|
|
// Here we simulate the blend mode.
|
|
child: Container(color: const Color(0xFF88FFFF).withOpacity(0.1)),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
- The `Shadow` array inside `TextStyle` creates the glowing text.
|
|
- `BoxShadow` with `spreadRadius` creates the glowing panel border.
|
|
- `ShaderMask` with `BlendMode.screen` layered over the UI gives it that light-projection quality.
|
|
|
|
### React Native
|
|
```jsx
|
|
const HolographicScreen = () => {
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: '#020202', padding: 24, justifyContent: 'center' }}>
|
|
|
|
<Text style={{
|
|
fontFamily: 'monospace', fontSize: 24, textAlign: 'center', color: '#88FFFF',
|
|
textShadowColor: '#88FFFF', textShadowRadius: 10, marginBottom: 40
|
|
}}>
|
|
HOLOGRAM ACTIVE
|
|
</Text>
|
|
|
|
<View style={{
|
|
backgroundColor: 'rgba(0, 200, 255, 0.05)',
|
|
borderWidth: 1, borderColor: 'rgba(136, 255, 255, 0.5)',
|
|
padding: 30, borderRadius: 4,
|
|
// The glowing edge
|
|
shadowColor: '#88FFFF', shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.5, shadowRadius: 15, elevation: 10
|
|
}}>
|
|
<Text style={{ color: '#88FFFF', textAlign: 'center', fontFamily: 'monospace' }}>
|
|
SYSTEM DIAGNOSTICS
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Pseudo-scanlines overlay. In a real app, use an repeating Image background. */}
|
|
<View pointerEvents="none" style={{
|
|
position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
|
|
backgroundColor: 'rgba(136, 255, 255, 0.03)',
|
|
}} />
|
|
|
|
</View>
|
|
);
|
|
};
|
|
```
|
|
- React Native doesn't support `mix-blend-mode` out of the box, so you must rely heavily on low-opacity backgrounds and intense `textShadow` / `shadowRadius`.
|
|
- Use `pointerEvents="none"` on scanline overlays so they don't block user interactions.
|
|
|
|
### Jetpack Compose
|
|
```kotlin
|
|
@Composable
|
|
fun HolographicScreen() {
|
|
Box(modifier = Modifier.fillMaxSize().background(Color(0xFF020202))) {
|
|
Column(
|
|
modifier = Modifier.fillMaxSize().padding(24.dp),
|
|
verticalArrangement = Arrangement.Center,
|
|
horizontalAlignment = Alignment.CenterHorizontally
|
|
) {
|
|
// Glowing Text
|
|
Text(
|
|
text = "HOLOGRAM ACTIVE",
|
|
fontFamily = FontFamily.Monospace,
|
|
fontSize = 24.sp,
|
|
color = Color(0xFF88FFFF),
|
|
style = TextStyle(
|
|
shadow = Shadow(color = Color(0xFF88FFFF), blurRadius = 10f)
|
|
),
|
|
modifier = Modifier.graphicsLayer { blendMode = BlendMode.Screen }
|
|
)
|
|
|
|
Spacer(Modifier.height(40.dp))
|
|
|
|
// Glowing Panel
|
|
Box(
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.graphicsLayer { blendMode = BlendMode.Screen }
|
|
.shadow(15.dp, ambientColor = Color(0xFF88FFFF), spotColor = Color(0xFF88FFFF))
|
|
.background(Color(0xFF88FFFF).copy(alpha = 0.05f))
|
|
.border(1.dp, Color(0xFF88FFFF).copy(alpha = 0.5f))
|
|
.padding(30.dp),
|
|
contentAlignment = Alignment.Center
|
|
) {
|
|
Text("SYSTEM DIAGNOSTICS", color = Color(0xFF88FFFF), fontFamily = FontFamily.Monospace)
|
|
}
|
|
}
|
|
|
|
// Simulating scanlines overlay
|
|
Box(
|
|
modifier = Modifier
|
|
.fillMaxSize()
|
|
.background(Color(0xFF88FFFF).copy(alpha = 0.03f))
|
|
)
|
|
}
|
|
}
|
|
```
|
|
- `Modifier.graphicsLayer { blendMode = BlendMode.Screen }` is exactly what you need in Compose to make elements act like projected light.
|
|
- Use Compose's `shadow` modifier with `ambientColor` and `spotColor` set to cyan to make the panels emit light.
|
|
|
|
## Do's and Don'ts
|
|
- **DO**: Use `mix-blend-mode: screen` (web) or additive blending so overlapping holographic panels get brighter where they intersect.
|
|
- **DON'T**: Use any dark colors or drop shadows for the UI elements. Shadows don't exist in light projections.
|
|
|
|
## Limitations
|
|
- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
|
|
- Ensure appropriate contrast ratios and responsive behaviors are verified separately.
|