Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +316 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: headertmtmatrix
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: pink
|
| 5 |
+
colorTo: pink
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,316 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>TMT — Traffic Monsters Team</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
|
| 9 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 10 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 11 |
+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
| 12 |
+
<style>
|
| 13 |
+
body {
|
| 14 |
+
margin: 0;
|
| 15 |
+
padding: 0;
|
| 16 |
+
background-color: #000;
|
| 17 |
+
overflow: hidden;
|
| 18 |
+
font-family: 'JetBrains Mono', monospace;
|
| 19 |
+
color: #00FF00;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
.matrix-bg {
|
| 23 |
+
position: fixed;
|
| 24 |
+
top: 0;
|
| 25 |
+
left: 0;
|
| 26 |
+
width: 100%;
|
| 27 |
+
height: 100%;
|
| 28 |
+
z-index: 0;
|
| 29 |
+
opacity: 0.3;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
.content {
|
| 33 |
+
position: relative;
|
| 34 |
+
z-index: 1;
|
| 35 |
+
height: 100vh;
|
| 36 |
+
display: flex;
|
| 37 |
+
flex-direction: column;
|
| 38 |
+
justify-content: center;
|
| 39 |
+
align-items: center;
|
| 40 |
+
text-align: center;
|
| 41 |
+
padding: 0 20px;
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.main-title {
|
| 45 |
+
font-family: 'Space Grotesk', sans-serif;
|
| 46 |
+
font-weight: 700;
|
| 47 |
+
font-size: clamp(2rem, 8vw, 5rem);
|
| 48 |
+
margin-bottom: 1.5rem;
|
| 49 |
+
text-transform: uppercase;
|
| 50 |
+
letter-spacing: 0.1em;
|
| 51 |
+
text-shadow: 0 0 10px #00FF00;
|
| 52 |
+
}
|
| 53 |
+
|
| 54 |
+
.subtitle {
|
| 55 |
+
font-size: clamp(1rem, 3vw, 1.8rem);
|
| 56 |
+
margin-bottom: 3rem;
|
| 57 |
+
max-width: 800px;
|
| 58 |
+
line-height: 1.5;
|
| 59 |
+
opacity: 0.9;
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
.buttons-container {
|
| 63 |
+
display: flex;
|
| 64 |
+
gap: 2rem;
|
| 65 |
+
flex-wrap: wrap;
|
| 66 |
+
justify-content: center;
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
.matrix-btn {
|
| 70 |
+
background: rgba(0, 0, 0, 0.6);
|
| 71 |
+
border: 2px solid #00FF00;
|
| 72 |
+
color: white;
|
| 73 |
+
padding: 1rem 2rem;
|
| 74 |
+
font-family: 'JetBrains Mono', monospace;
|
| 75 |
+
font-size: 1.1rem;
|
| 76 |
+
cursor: pointer;
|
| 77 |
+
transition: all 0.3s ease;
|
| 78 |
+
position: relative;
|
| 79 |
+
overflow: hidden;
|
| 80 |
+
text-transform: uppercase;
|
| 81 |
+
letter-spacing: 0.1em;
|
| 82 |
+
}
|
| 83 |
+
|
| 84 |
+
.matrix-btn:hover {
|
| 85 |
+
text-shadow: 0 0 5px #fff;
|
| 86 |
+
box-shadow: 0 0 15px #00FF00;
|
| 87 |
+
transform: scale(1.05);
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
+
.matrix-btn:active {
|
| 91 |
+
box-shadow: 0 0 20px #00FF00;
|
| 92 |
+
}
|
| 93 |
+
|
| 94 |
+
.matrix-btn::before {
|
| 95 |
+
content: '';
|
| 96 |
+
position: absolute;
|
| 97 |
+
top: 0;
|
| 98 |
+
left: -100%;
|
| 99 |
+
width: 100%;
|
| 100 |
+
height: 100%;
|
| 101 |
+
background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
|
| 102 |
+
transition: all 0.5s ease;
|
| 103 |
+
}
|
| 104 |
+
|
| 105 |
+
.matrix-btn:hover::before {
|
| 106 |
+
left: 100%;
|
| 107 |
+
}
|
| 108 |
+
|
| 109 |
+
.char {
|
| 110 |
+
opacity: 0;
|
| 111 |
+
}
|
| 112 |
+
|
| 113 |
+
.cursor {
|
| 114 |
+
display: inline-block;
|
| 115 |
+
width: 3px;
|
| 116 |
+
height: 1em;
|
| 117 |
+
background-color: #00FF00;
|
| 118 |
+
animation: blink 1s infinite;
|
| 119 |
+
vertical-align: middle;
|
| 120 |
+
margin-left: 2px;
|
| 121 |
+
}
|
| 122 |
+
|
| 123 |
+
@keyframes blink {
|
| 124 |
+
0%, 100% { opacity: 1; }
|
| 125 |
+
50% { opacity: 0; }
|
| 126 |
+
}
|
| 127 |
+
|
| 128 |
+
.neon-pulse {
|
| 129 |
+
animation: neonPulse 2s infinite alternate;
|
| 130 |
+
}
|
| 131 |
+
|
| 132 |
+
@keyframes neonPulse {
|
| 133 |
+
from {
|
| 134 |
+
text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00;
|
| 135 |
+
}
|
| 136 |
+
to {
|
| 137 |
+
text-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00, 0 0 30px #00FF00;
|
| 138 |
+
}
|
| 139 |
+
}
|
| 140 |
+
|
| 141 |
+
@media (max-width: 768px) {
|
| 142 |
+
.buttons-container {
|
| 143 |
+
flex-direction: column;
|
| 144 |
+
gap: 1rem;
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
.main-title {
|
| 148 |
+
font-size: 2.5rem;
|
| 149 |
+
}
|
| 150 |
+
|
| 151 |
+
.subtitle {
|
| 152 |
+
font-size: 1.2rem;
|
| 153 |
+
}
|
| 154 |
+
}
|
| 155 |
+
</style>
|
| 156 |
+
</head>
|
| 157 |
+
<body>
|
| 158 |
+
<canvas id="matrix-bg" class="matrix-bg"></canvas>
|
| 159 |
+
|
| 160 |
+
<div class="content">
|
| 161 |
+
<h1 id="main-title" class="main-title"></h1>
|
| 162 |
+
<p id="subtitle" class="subtitle"></p>
|
| 163 |
+
<div class="buttons-container">
|
| 164 |
+
<button id="enter-btn" class="matrix-btn opacity-0">▶️ ENTER THE NETWORK</button>
|
| 165 |
+
<button id="cases-btn" class="matrix-btn opacity-0">🎞️ VIEW CASE STUDIES</button>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
|
| 169 |
+
<script>
|
| 170 |
+
// Matrix background effect
|
| 171 |
+
const canvas = document.getElementById('matrix-bg');
|
| 172 |
+
const ctx = canvas.getContext('2d');
|
| 173 |
+
|
| 174 |
+
canvas.width = window.innerWidth;
|
| 175 |
+
canvas.height = window.innerHeight;
|
| 176 |
+
|
| 177 |
+
const katakana = '01AF9Ω∞';
|
| 178 |
+
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
| 179 |
+
const nums = '0123456789';
|
| 180 |
+
|
| 181 |
+
const alphabet = katakana + latin + nums;
|
| 182 |
+
|
| 183 |
+
const fontSize = 16;
|
| 184 |
+
const columns = canvas.width / fontSize;
|
| 185 |
+
|
| 186 |
+
const rainDrops = [];
|
| 187 |
+
|
| 188 |
+
for (let x = 0; x < columns; x++) {
|
| 189 |
+
rainDrops[x] = 1;
|
| 190 |
+
}
|
| 191 |
+
|
| 192 |
+
const draw = () => {
|
| 193 |
+
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
| 194 |
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
| 195 |
+
|
| 196 |
+
ctx.fillStyle = '#00FF00';
|
| 197 |
+
ctx.font = fontSize + 'px monospace';
|
| 198 |
+
|
| 199 |
+
for (let i = 0; i < rainDrops.length; i++) {
|
| 200 |
+
const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
|
| 201 |
+
ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
|
| 202 |
+
|
| 203 |
+
if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
|
| 204 |
+
rainDrops[i] = 0;
|
| 205 |
+
}
|
| 206 |
+
rainDrops[i]++;
|
| 207 |
+
}
|
| 208 |
+
};
|
| 209 |
+
|
| 210 |
+
setInterval(draw, 30);
|
| 211 |
+
|
| 212 |
+
// Text animation
|
| 213 |
+
const mainTitle = "TMT — TRAFFIC MONSTERS TEAM";
|
| 214 |
+
const subtitle = "We decode markets. We rewire performance.";
|
| 215 |
+
|
| 216 |
+
const mainTitleElement = document.getElementById('main-title');
|
| 217 |
+
const subtitleElement = document.getElementById('subtitle');
|
| 218 |
+
const enterBtn = document.getElementById('enter-btn');
|
| 219 |
+
const casesBtn = document.getElementById('cases-btn');
|
| 220 |
+
|
| 221 |
+
// Type main title
|
| 222 |
+
function typeMainTitle() {
|
| 223 |
+
return new Promise((resolve) => {
|
| 224 |
+
let i = 0;
|
| 225 |
+
const typing = setInterval(() => {
|
| 226 |
+
if (i < mainTitle.length) {
|
| 227 |
+
const charElement = document.createElement('span');
|
| 228 |
+
charElement.classList.add('char');
|
| 229 |
+
charElement.textContent = mainTitle[i];
|
| 230 |
+
mainTitleElement.appendChild(charElement);
|
| 231 |
+
|
| 232 |
+
gsap.to(charElement, {
|
| 233 |
+
opacity: 1,
|
| 234 |
+
duration: 0.1,
|
| 235 |
+
ease: 'power2.out'
|
| 236 |
+
});
|
| 237 |
+
|
| 238 |
+
i++;
|
| 239 |
+
} else {
|
| 240 |
+
clearInterval(typing);
|
| 241 |
+
resolve();
|
| 242 |
+
}
|
| 243 |
+
}, 100);
|
| 244 |
+
});
|
| 245 |
+
}
|
| 246 |
+
|
| 247 |
+
// Type subtitle
|
| 248 |
+
function typeSubtitle() {
|
| 249 |
+
return new Promise((resolve) => {
|
| 250 |
+
let i = 0;
|
| 251 |
+
const typing = setInterval(() => {
|
| 252 |
+
if (i < subtitle.length) {
|
| 253 |
+
const charElement = document.createElement('span');
|
| 254 |
+
charElement.classList.add('char');
|
| 255 |
+
charElement.textContent = subtitle[i];
|
| 256 |
+
subtitleElement.appendChild(charElement);
|
| 257 |
+
|
| 258 |
+
gsap.to(charElement, {
|
| 259 |
+
opacity: 1,
|
| 260 |
+
duration: 0.1,
|
| 261 |
+
ease: 'power2.out'
|
| 262 |
+
});
|
| 263 |
+
|
| 264 |
+
i++;
|
| 265 |
+
} else {
|
| 266 |
+
clearInterval(typing);
|
| 267 |
+
resolve();
|
| 268 |
+
}
|
| 269 |
+
}, 50);
|
| 270 |
+
});
|
| 271 |
+
}
|
| 272 |
+
|
| 273 |
+
// Show buttons
|
| 274 |
+
function showButtons() {
|
| 275 |
+
gsap.to([enterBtn, casesBtn], {
|
| 276 |
+
opacity: 1,
|
| 277 |
+
duration: 1,
|
| 278 |
+
ease: 'power2.out'
|
| 279 |
+
});
|
| 280 |
+
|
| 281 |
+
// Add neon pulse effect to subtitle
|
| 282 |
+
subtitleElement.classList.add('neon-pulse');
|
| 283 |
+
}
|
| 284 |
+
|
| 285 |
+
// Start animations
|
| 286 |
+
async function startAnimations() {
|
| 287 |
+
await typeMainTitle();
|
| 288 |
+
await typeSubtitle();
|
| 289 |
+
showButtons();
|
| 290 |
+
}
|
| 291 |
+
|
| 292 |
+
// Start animations after a short delay
|
| 293 |
+
setTimeout(startAnimations, 500);
|
| 294 |
+
|
| 295 |
+
// Button actions
|
| 296 |
+
enterBtn.addEventListener('click', () => {
|
| 297 |
+
// Replace with your actual Telegram link
|
| 298 |
+
window.location.href = 'https://t.me/trafficmonstersteam';
|
| 299 |
+
});
|
| 300 |
+
|
| 301 |
+
casesBtn.addEventListener('click', () => {
|
| 302 |
+
// Smooth scroll to case studies section
|
| 303 |
+
// You'll need to add the ID to your case studies section
|
| 304 |
+
document.getElementById('case-studies')?.scrollIntoView({
|
| 305 |
+
behavior: 'smooth'
|
| 306 |
+
});
|
| 307 |
+
});
|
| 308 |
+
|
| 309 |
+
// Handle window resize
|
| 310 |
+
window.addEventListener('resize', () => {
|
| 311 |
+
canvas.width = window.innerWidth;
|
| 312 |
+
canvas.height = window.innerHeight;
|
| 313 |
+
});
|
| 314 |
+
</script>
|
| 315 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=timoon811/headertmtmatrix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 316 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
✅ PROMPT: TMT — First Block (Header) в стиле “The Matrix” ⸻ 🎥 ОБЩАЯ ИДЕЯ: Create the Hero Section (Header) for the Traffic Monsters Team landing page, fully replicating the atmosphere of the original “The Matrix” intro. The user must feel like they have entered the digital core of a living system, not a website. ⸻ 🧱 КОМПОЗИЦИЯ БЛОКА: ⸻ 1. Background (Фон) • Цвет: Полный глубокий чёрный (#000000). • Анимация: • Matrix Code Rain: • Зелёные вертикальные потоки символов (0 1 A F 9 Ω ∞) бегут сверху вниз. • Разные скорости движения для разных столбцов. • Плавное мерцание и расфокусировка у некоторых символов. • Коды выглядят “живыми”, слегка дрожат. • Фон должен быть живым, но не отвлекать от контента. ⸻ 2. Central Text (Центральный текст) Элемент Текст Стиль Главный заголовок TMT — TRAFFIC MONSTERS TEAM Большой, жирный, моноширинный шрифт Подзаголовок We decode markets. We rewire performance. Чуть меньше размером, светящееся зелёным • Шрифт: • Headlines: Monument Extended или Space Grotesk Bold • Альтернативный стиль: Monospace (типа JetBrains Mono), с растяжкой символов • Цвет текста: • Чистый неоново-зелёный #00FF00 • Анимация текста: • Плавное “напечатание” текста буквами (letter-by-letter). • Без моргания курсора. • Без скачков. • После полной печати — лёгкий неоновый пульс эффект. ⸻ 3. Buttons (Кнопки) Кнопка Надпись Действие Первая кнопка ▶️ Enter the Network Переход на Telegram или в начало скролла Вторая кнопка 🎞️ View Case Studies Скроллинг вниз к блоку “Кейсы” • Стиль кнопок: • Прямоугольная форма. • Неоновая зелёная обводка. • Полупрозрачный чёрный фон (rgba(0,0,0,0.6)). • Текст белый или светло-зелёный. • Эффекты кнопок: • При наведении: • Обводка начинает мягко пульсировать. • Текст чуть увеличивается (на 3–5%). • При нажатии: • Быстрая короткая вспышка обводки. • Переход без задержки. ⸻ 4. Additional Visual Effects Элемент Как должно выглядеть Плавность появления Все элементы появляются после полной загрузки кода Курсор В начале нет стандартного мигающего курсора Реалистичность Кодовый дождь работает параллельно, не останавливается ⸻ 5. Звуки (опционально) • Очень лёгкий фоновый шорох цифрового дождя (едва слышимый). • При появлении текста — короткие приглушённые клики, как набор на старой клавиатуре. ⸻ 📜 ИТОГОВЫЙ ПЛАН ПЕРВОГО БЛОКА: 1. Старт — тёмный экран, бегущий код. 2. Через 0.5 сек — начинается напечатание текста: TMT — TRAFFIC MONSTERS TEAM 3. Следом печатается подзаголовок: We decode markets. We rewire performance. 4. Появляются две кнопки с плавным неоновым эффектом: • ▶️ Enter the Network • 🎞️ View Case Studies 5. Кодовый дождь продолжает бежать всё время. ⸻ 📌 Технические детали для разработки: Технология Рекомендация Canvas / WebGL Для рендеринга живого кода без лагов CSS Animation Для плавности появления текста и кнопок GSAP / Anime.js Для контроля сложной анимации текста
|