Загрузка...
Mockup темного режима входа с глитч-эффектом и монохромными паттернами. Минималистичная форма, анимация, стилизация под Cipher Dither.
# Cipher Dither Login
Create a dithering glitch login mockup in dark mode following the Cipher Dither aesthetic:
- Dark background (#050505) with monochromatic dither patterns and scanlines
- Login card with subtle border and glitch distortion effects
- Clean minimalist form: email input, password input, sign in button
- Use your PXEL Labs logo in top corner of card
- Add glitchy text artifacts and dither overlays throughout
- Mysterious vibe with minimal technical metadata labels
- Animate the dithering patterns and scanlines subtly
- Include hover/focus states with glitch effects on inputs
- Keep it showcase-ready for Twitter - sleek and modern but with that signal glitch aesthetic
- No excessive text, just the essentials: "Sign In" heading, input labels, button
- Apply pixelated noise textures and harsh contrast dithering
Here is a reference implementation:
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cipher Dither Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #050505;
--card: #0a0a0a;
--border: rgba(255,255,255,0.08);
--border-hover: rgba(255,255,255,0.15);
--input-bg: rgba(255,255,255,0.03);
--input-bg-focus: rgba(255,255,255,0.06);
--text-primary: #ffffff;
--text-secondary: rgba(255,255,255,0.4);
--text-ghost: rgba(255,255,255,0.15);
}
/* Dither overlay */
.dither-overlay {
position: fixed;
inset: 0;
background-image: repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%) 50% / 2px 2px;
pointer-events: none;
z-index: 100;
mix-blend-mode: overlay;
animation: dither-shift 0.15s steps(2) infinite;
}
.dither-overlay-card {
position: absolute;
inset: 0;
background-image: repeating-conic-gradient(rgba(255,255,255,0.06) 0% 25%, transparent 0% 50%) 50% / 2px 2px;
pointer-events: none;
z-index: 10;
mix-blend-mode: overlay;
animation: dither-shift 0.12s steps(3) infinite;
border-radius: inherit;
}
@keyframes dither-shift {
0% { background-position: 0 0; }
33% { background-position: 1px 0; }
66% { background-position: 0 1px; }
100% { background-position: 1px 1px; }
}
/* Scanlines */
.scanlines {
position: fixed;
inset: 0;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 3px,
rgba(0,0,0,0.15) 3px,
rgba(0,0,0,0.15) 4px
);
pointer-events: none;
z-index: 101;
}
/* CRT vignette */
.crt-vignette {
position: fixed;
inset: 0;
background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
pointer-events: none;
z-index: 99;
}
/* Glitch container */
@keyframes glitch-micro {
0%, 95%, 100% { transform: translate(0); filter: none; }
96% { transform: translate(-1px, 1px); filter: hue-rotate(10deg); }
97% { transform: translate(1px, -1px) skewX(0.5deg); }
98% { transform: translate(-1px, 0); }
99% { transform: translate(1px, 1px) skewX(-0.3deg); }
}
@keyframes glitch-flicker {
0%, 94%, 100% { opacity: 1; }
95% { opacity: 0.85; }
96% { opacity: 1; }
97% { opacity: 0.9; }
98% { opacity: 1; }
}
.glitch-container {
animation: glitch-micro 6s infinite, glitch-flicker 4s infinite;
}
/* Glitch line artifact */
@keyframes glitch-line {
0%, 90%, 100% { transform: scaleX(0); opacity: 0; }
92% { transform: scaleX(1); opacity: 1; }
95% { transform: scaleX(0.6); opacity: 0.6; }
97% { transform: scaleX(0); opacity: 0; }
}
.glitch-artifact-1 {
position: absolute;
left: 0; right: 0;
top: 28%;
height: 1px;
background: rgba(255,255,255,0.3);
transform-origin: left;
animation: glitch-line 5s infinite 1s;
z-index: 20;
}
.glitch-artifact-2 {
position: absolute;
left: 10%; right: 30%;
top: 62%;
height: 1px;
background: rgba(255,255,255,0.15);
transform-origin: right;
animation: glitch-line 7s infinite 3s;
z-index: 20;
}
.glitch-artifact-3 {
position: absolute;
left: 40%; right: 0;
top: 85%;
height: 2px;
background: rgba(255,255,255,0.08);
transform-origin: left;
animation: glitch-line 4s infinite 0.5s;
z-index: 20;
}
/* Scanner bar */
@keyframes scan-down {
0% { top: -2px; opacity: 0; }
10% { opacity: 0.4; }
90% { opacity: 0.4; }
100% { top: 100%; opacity: 0; }
}
.scanner-bar {
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
animation: scan-down 8s linear infinite;
z-index: 15;
}
/* Input focus glitch */
@keyframes input-glitch {
0%, 100% { transform: translate(0); }
25% { transform: translate(1px, 0); }
50% { transform: translate(-1px, 0); }
75% { transform: translate(0.5px, 0); }
}
input:focus {
animation: input-glitch 0.1s steps(2) 1;
}
/* Button hover */
@keyframes btn-glitch {
0%, 100% { transform: translate(0) skewX(0); }
20% { transform: translate(-2px, 1px) skewX(-1deg); }
40% { transform: translate(2px, -1px) skewX(1deg); }
60% { transform: translate(-1px, 0) skewX(0.5deg); }
80% { transform: translate(1px, 1px) skewX(-0.5deg); }
}
.sign-in-btn:hover {
animation: btn-glitch 0.3s steps(3) 1;
box-shadow: 0 0 20px rgba(255,255,255,0.1), inset 0 0 20px rgba(255,255,255,0.03);
}
/* Floating pixel noise */
@keyframes pixel-float {
0%, 100% { opacity: 0.15; transform: translateY(0); }
50% { opacity: 0.4; transform: translateY(-2px); }
}
.pixel-dot {
width: 2px;
height: 2px;
background: rgba(255,255,255,0.2);
position: absolute;
animation: pixel-float 3s ease-in-out infinite;
}
/* Subtle background grid */
.bg-grid {
background-image:
linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Card inner glow */
.card-glow {
background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 60%);
}
/* Typing cursor blink */
@keyframes cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.cursor-blink {
animation: cursor-blink 1s step-end infinite;
}
</style>
</head>
<body>
<div class="min-h-screen flex items-center justify-center bg-grid relative overflow-hidden" style="background-color: var(--bg); font-family: 'Space Grotesk', sans-serif;">
<!-- Global overlays -->
<div class="dither-overlay"></div>
<div class="scanlines"></div>
<div class="crt-vignette"></div>
<!-- Ambient background glow -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full opacity-[0.03]" style="background: radial-gradient(circle, white 0%, transparent 70%);"></div>
<!-- Scattered pixel noise -->
<div class="pixel-dot" style="top: 15%; left: 20%; animation-delay: 0s;"></div>
<div class="pixel-dot" style="top: 30%; left: 75%; animation-delay: 0.8s;"></div>
<div class="pixel-dot" style="top: 70%; left: 15%; animation-delay: 1.5s;"></div>
<div class="pixel-dot" style="top: 80%; left: 80%; animation-delay: 2.1s;"></div>
<div class="pixel-dot" style="top: 45%; left: 90%; animation-delay: 0.4s;"></div>
<div class="pixel-dot" style="top: 60%; left: 8%; animation-delay: 1.8s;"></div>
<!-- Main Card -->
<div class="relative z-10 glitch-container">
<!-- Outer glow -->
<div class="absolute -inset-8 rounded-[40px] opacity-30" style="background: radial-gradient(ellipse at center, rgba(255,255,255,0.03), transparent 70%);"></div>
<!-- Card -->
<div class="relative w-[460px] rounded-[24px] overflow-hidden" style="background: var(--card); border: 1px solid var(--border);">
<!-- Card dither overlay -->
<div class="dither-overlay-card"></div>
<!-- Scanner bar -->
<div class="scanner-bar"></div>
<!-- Glitch artifacts -->
<div class="glitch-artifact-1"></div>
<div class="glitch-artifact-2"></div>
<div class="glitch-artifact-3"></div>
<!-- Inner glow -->
<div class="absolute inset-0 card-glow pointer-events-none z-0"></div>
<!-- Content -->
<div class="relative z-10 p-10 pt-8">
<!-- Logo -->
<div class="mb-10">
<div class="w-12 h-12 rounded-xl overflow-hidden flex items-center justify-center" style="border: 1px solid var(--border); background: rgba(255,255,255,0.03);">
<img src="https://vgbujcuwptvheqijyjbe.supabase.co/storage/v1/object/public/hmac-uploads/uploads/6658be05-edae-4866-8fae-91a70473db00/1770856675050-34f67fe3/PXEL-Labs-Logo.png" alt="PXEL Labs" class="w-8 h-8 object-contain" style="filter: invert(1) brightness(0.9);">
</div>
</div>
<!-- Heading -->
<div class="mb-10">
<h1 class="text-[28px] font-bold tracking-tight" style="color: var(--text-primary);">Sign In</h1>
<p class="text-sm mt-1" style="color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 12px;">Welcome Back</p>
</div>
<!-- Form -->
<div class="space-y-6">
<!-- Email -->
<div>
<label class="block mb-2 uppercase tracking-[0.15em]" style="font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-secondary);">
Email <span style="color: rgba(255,80,80,0.7);">*</span>
</label>
<input
type="email"
placeholder="signal@pxel-labs.io"
class="w-full px-4 py-3.5 rounded-xl text-sm outline-none transition-all duration-200"
style="background: var(--input-bg); border: 1px solid var(--border); color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: 13px;"
onfocus="this.style.background='var(--input-bg-focus)'; this.style.borderColor='var(--border-hover)'; this.style.boxShadow='0 0 15px rgba(255,255,255,0.03)'"
onblur="this.style.background='var(--input-bg)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'"
>
</div>
<!-- Password -->
<div>
<label class="block mb-2 uppercase tracking-[0.15em]" style="font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-secondary);">
Password <span style="color: rgba(255,80,80,0.7);">*</span>
</label>
<div class="relative">
<input
type="password"
value="cipherdither2025"
class="w-full px-4 py-3.5 rounded-xl text-sm outline-none transition-all duration-200"
style="background: var(--input-bg); border: 1px solid var(--border); color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: 13px;"
onfocus="this.style.background='var(--input-bg-focus)'; this.style.borderColor='var(--border-hover)'; this.style.boxShadow='0 0 15px rgba(255,255,255,0.03)'"
onblur="this.style.background='var(--input-bg)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'"
>
<div class="absolute right-4 top-1/2 -translate-y-1/2">
<iconify-icon icon="lucide:eye-off" style="color: var(--text-ghost); font-size: 16px; cursor: pointer;"></iconify-icon>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="mt-10">
<button class="sign-in-btn w-full py-3.5 rounded-xl font-semibold text-sm tracking-wide transition-all duration-200 cursor-pointer" style="background: var(--text-primary); color: var(--bg); border: none;">
Sign In
</button>
</div>
<!-- Footer links -->
<div class="mt-6 flex items-center justify-between">
<a id="trouble-link" href="#" class="text-xs transition-colors duration-200 hover:opacity-70" style="color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 11px;">Trouble Signing In?</a>
<a id="reset-link" href="#" class="text-xs flex items-center gap-1 transition-colors duration-200 hover:opacity-70" style="color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: 11px; text-decoration: underline; text-underline-offset: 3px;">
Reset Password <span>→</span>
</a>
</div>
<!-- Technical metadata -->
<div class="mt-10 pt-6" style="border-top: 1px solid var(--border);">
<div class="flex items-center justify-between">
<span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-ghost); letter-spacing: 0.1em;">[AUTH_PROTOCOL_v2.1]</span>
<div class="flex items-center gap-2">
<span class="w-1 h-1 rounded-full" style="background: rgba(255,255,255,0.3); animation: pixel-float 2s ease-in-out infinite;"></span>
<span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-ghost); letter-spacing: 0.1em;">CIPHER_DITHER</span>
</div>
</div>
</div>
</div>
</div>
<!-- Copyright -->
<div class="text-center mt-8">
<span style="font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-ghost); letter-spacing: 0.1em;">© PXEL LABS 2025. All Rights Reserved.</span>
</div>
</div>
<!-- Corner markers -->
<div class="fixed top-6 left-6 flex flex-col gap-1 opacity-20 z-50">
<div class="w-8 h-px bg-white"></div>
<div class="w-4 h-px bg-white"></div>
</div>
<div class="fixed top-6 right-6 flex flex-col items-end gap-1 opacity-20 z-50">
<div class="w-8 h-px bg-white"></div>
<div class="w-4 h-px bg-white"></div>
</div>
<div class="fixed bottom-6 left-6 flex flex-col gap-1 opacity-20 z-50">
<div class="w-4 h-px bg-white"></div>
<div class="w-8 h-px bg-white"></div>
</div>
<div class="fixed bottom-6 right-6 flex flex-col items-end gap-1 opacity-20 z-50">
<div class="w-4 h-px bg-white"></div>
<div class="w-8 h-px bg-white"></div>
</div>
<!-- Edge metadata -->
<div class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-6 opacity-20">
<span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: white; letter-spacing: 0.15em;">SIGNAL_INTEGRITY: 98.7%</span>
<span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: white;">•</span>
<span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: white; letter-spacing: 0.15em;">DITHER_DEPTH: 8BIT</span>
</div>
</div>
</body>
</html>
~~~