269 lines
10 KiB
Markdown
269 lines
10 KiB
Markdown
---
|
|
name: y2k-design
|
|
description: Web and App implementation guide for Y2K Design. Trigger when user wants chrome effects, futuristic 2000s look, blob shapes, and tech optimism.
|
|
date_added: "2026-06-17"
|
|
risk: safe
|
|
source: self
|
|
source_type: self
|
|
---
|
|
|
|
# Y2K Design
|
|
|
|
> "The optimistic, shiny future as imagined in 1999. Chrome, blobs, and alien tech."
|
|
|
|
|
|
## 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. **Metallic & Chrome Effects**: Extensive use of silver, chrome, and shiny metallic gradients.
|
|
2. **Organic, Amorphous Shapes**: "Blob" architecture, curved intersecting lines, and liquid-like forms.
|
|
3. **Tech-Optimism**: Circuit board motifs, target crosshairs, and digital grid backgrounds.
|
|
|
|
## Visual DNA
|
|
- **Colors**: Silver/chrome, bright cyan, hot pink, lime green. **Industrial Chic** mixed with neon accents works well.
|
|
- **Typography**: Extended (wide) sans-serifs, pixel fonts, or futuristic/alien display fonts (e.g., `Orbitron`, `Syncopate`).
|
|
- **Styling**: Outer glows, metallic bevels, and starry glints (sparkles).
|
|
|
|
## Web Implementation
|
|
- Rely heavily on complex linear and radial gradients to simulate shiny metal.
|
|
- **CSS Example**:
|
|
```css
|
|
body {
|
|
background-color: #000000;
|
|
/* Digital grid background */
|
|
background-image: linear-gradient(#333 1px, transparent 1px),
|
|
linear-gradient(90deg, #333 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
color: #ffffff;
|
|
font-family: 'Syncopate', sans-serif;
|
|
}
|
|
|
|
.y2k-chrome-text {
|
|
font-size: 4rem;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
|
|
/* Chrome gradient effect */
|
|
background: linear-gradient(
|
|
to bottom,
|
|
#ffffff 0%,
|
|
#999999 45%,
|
|
#222222 50%,
|
|
#cccccc 55%,
|
|
#ffffff 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
/* Outer glow */
|
|
filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
|
|
}
|
|
|
|
.y2k-blob-btn {
|
|
background: linear-gradient(135deg, #00FFFF, #FF00FF);
|
|
border: none;
|
|
border-radius: 50% 20% / 10% 40%; /* Amorphous blob shape */
|
|
padding: 20px 40px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px 2px #000;
|
|
box-shadow: 0 0 15px #FF00FF;
|
|
}
|
|
```
|
|
|
|
## App Implementation
|
|
|
|
### SwiftUI
|
|
```swift
|
|
struct Y2KDesignView: View {
|
|
// Chrome Gradient
|
|
let chromeGradient = LinearGradient(
|
|
colors: [Color.white, Color(white: 0.6), Color(white: 0.2), Color(white: 0.8), Color.white],
|
|
startPoint: .top,
|
|
endPoint: .bottom
|
|
)
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
Color.black.ignoresSafeArea()
|
|
|
|
VStack(spacing: 40) {
|
|
// Chrome Text
|
|
Text("Y2K FUTURE")
|
|
.font(.custom("Syncopate-Bold", size: 48))
|
|
.foregroundStyle(chromeGradient)
|
|
// Cyan glow
|
|
.shadow(color: Color(hex: "00FFFF"), radius: 10, x: 0, y: 0)
|
|
|
|
// Blob Button (Faked with Capsule in standard SwiftUI, requires Path for true blob)
|
|
Button(action: {}) {
|
|
Text("ENTER CORE")
|
|
.font(.custom("Orbitron-Bold", size: 20))
|
|
.foregroundColor(.white)
|
|
.padding(.vertical, 20)
|
|
.padding(.horizontal, 40)
|
|
.background(LinearGradient(colors: [Color(hex: "00FFFF"), Color(hex: "FF00FF")], startPoint: .topLeading, endPoint: .bottomTrailing))
|
|
.clipShape(Capsule())
|
|
// Glow
|
|
.shadow(color: Color(hex: "FF00FF").opacity(0.8), radius: 15, x: 0, y: 0)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
- SwiftUI's `.foregroundStyle()` makes applying a complex multi-stop `LinearGradient` to text trivial, which is exactly how you build the Chrome Text effect.
|
|
- Add an un-offset `.shadow()` with a neon color to create the Y2K outer glow.
|
|
|
|
### Flutter
|
|
```dart
|
|
class Y2KDesignScreen extends StatelessWidget {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.black,
|
|
body: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// Chrome Text via ShaderMask
|
|
ShaderMask(
|
|
shaderCallback: (bounds) => const LinearGradient(
|
|
begin: Alignment.topCenter, end: Alignment.bottomCenter,
|
|
colors: [Colors.white, Color(0xFF999999), Color(0xFF222222), Color(0xFFCCCCCC), Colors.white],
|
|
stops: [0.0, 0.45, 0.5, 0.55, 1.0],
|
|
).createShader(bounds),
|
|
child: const Text(
|
|
'Y2K FUTURE',
|
|
style: TextStyle(
|
|
fontFamily: 'Syncopate', fontSize: 48, fontWeight: FontWeight.w900, color: Colors.white,
|
|
shadows: [Shadow(color: Color(0xFF00FFFF), blurRadius: 20)], // Glow
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 40),
|
|
|
|
// Neon Button
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
gradient: const LinearGradient(colors: [Color(0xFF00FFFF), Color(0xFFFF00FF)]),
|
|
borderRadius: BorderRadius.circular(50),
|
|
boxShadow: const [BoxShadow(color: Color(0xFFFF00FF), blurRadius: 20)],
|
|
),
|
|
child: ElevatedButton(
|
|
onPressed: () {},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: Colors.transparent, shadowColor: Colors.transparent,
|
|
padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
|
|
),
|
|
child: const Text('ENTER CORE', style: TextStyle(fontFamily: 'Orbitron', fontSize: 20, color: Colors.white)),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
- You MUST use `ShaderMask` with a complex multi-stop `LinearGradient` to render the metallic chrome effect on text in Flutter.
|
|
- The `stops` property `[0.0, 0.45, 0.5, 0.55, 1.0]` is the secret to a good metal gradient: a sharp contrast right in the middle simulates the horizon reflection on a cylinder.
|
|
|
|
### React Native
|
|
```jsx
|
|
// REQUIRES: @react-native-masked-view/masked-view and react-native-linear-gradient
|
|
import MaskedView from '@react-native-masked-view/masked-view';
|
|
import LinearGradient from 'react-native-linear-gradient';
|
|
|
|
const Y2KDesignScreen = () => {
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
|
|
|
|
{/* Chrome Text */}
|
|
<View style={{ height: 60, width: '100%', marginBottom: 40, shadowColor: '#00FFFF', shadowOffset: {width: 0, height: 0}, shadowOpacity: 1, shadowRadius: 10 }}>
|
|
<MaskedView
|
|
style={{ flex: 1 }}
|
|
maskElement={<Text style={{ fontFamily: 'Syncopate-Bold', fontSize: 48, color: '#FFF', textAlign: 'center' }}>Y2K FUTURE</Text>}
|
|
>
|
|
<LinearGradient
|
|
colors={['#FFFFFF', '#999999', '#222222', '#CCCCCC', '#FFFFFF']}
|
|
locations={[0, 0.45, 0.5, 0.55, 1]}
|
|
style={{ flex: 1 }}
|
|
/>
|
|
</MaskedView>
|
|
</View>
|
|
|
|
{/* Neon Gradient Button */}
|
|
<View style={{ shadowColor: '#FF00FF', shadowOffset: {width: 0, height: 0}, shadowOpacity: 1, shadowRadius: 15 }}>
|
|
<LinearGradient
|
|
colors={['#00FFFF', '#FF00FF']} start={{x: 0, y: 0}} end={{x: 1, y: 1}}
|
|
style={{ borderRadius: 50, paddingHorizontal: 40, paddingVertical: 20 }}
|
|
>
|
|
<Text style={{ fontFamily: 'Orbitron-Bold', fontSize: 20, color: '#FFF' }}>ENTER CORE</Text>
|
|
</LinearGradient>
|
|
</View>
|
|
|
|
</View>
|
|
);
|
|
};
|
|
```
|
|
- In React Native, you need the community `MaskedView` to apply a gradient to text. Create the `<Text>` in the `maskElement` prop, and put the `<LinearGradient>` inside as a child.
|
|
- Pass `locations` to the gradient to create the sharp metallic reflection line.
|
|
|
|
### Jetpack Compose
|
|
```kotlin
|
|
@Composable
|
|
fun Y2KDesignScreen() {
|
|
Box(
|
|
modifier = Modifier.fillMaxSize().background(Color.Black),
|
|
contentAlignment = Alignment.Center
|
|
) {
|
|
Column(horizontalAlignment = Alignment.CenterHorizontally) {
|
|
|
|
// Chrome Text
|
|
Text(
|
|
text = "Y2K FUTURE",
|
|
fontSize = 48.sp,
|
|
fontFamily = FontFamily.SansSerif, // Replace with Syncopate
|
|
fontWeight = FontWeight.Black,
|
|
style = TextStyle(
|
|
// Apply Chrome Gradient to Text
|
|
brush = Brush.verticalGradient(
|
|
0.0f to Color.White,
|
|
0.45f to Color(0xFF999999),
|
|
0.5f to Color(0xFF222222),
|
|
0.55f to Color(0xFFCCCCCC),
|
|
1.0f to Color.White
|
|
),
|
|
shadow = Shadow(color = Color(0xFF00FFFF), blurRadius = 20f) // Glow
|
|
)
|
|
)
|
|
|
|
Spacer(Modifier.height(40.dp))
|
|
|
|
// Neon Button
|
|
Box(
|
|
modifier = Modifier
|
|
.shadow(20.dp, CircleShape, ambientColor = Color(0xFFFF00FF), spotColor = Color(0xFFFF00FF))
|
|
.background(Brush.linearGradient(listOf(Color(0xFF00FFFF), Color(0xFFFF00FF))), CircleShape)
|
|
.clickable { }
|
|
.padding(horizontal = 40.dp, vertical = 20.dp)
|
|
) {
|
|
Text("ENTER CORE", color = Color.White, fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Bold, fontSize = 20.sp)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
- Jetpack Compose makes gradient text incredibly easy via `TextStyle(brush = ...)`.
|
|
- Provide specific color stops (`0.45f to ...`) to the `verticalGradient` to create the hard reflection line characteristic of 2000s chrome.
|
|
|
|
## Do's and Don'ts
|
|
- **DO**: Use sparkles (✨) as decorative elements around headers and buttons.
|
|
- **DON'T**: Make it minimal. Y2K is fundamentally maximalist and flashy.
|
|
|
|
## 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.
|