f9ec2879ba
Complete deployment of unified Light Trinity system: 🔴 RedLight: Template & brand system (18 HTML templates) 💚 GreenLight: Project & collaboration (14 layers, 103 templates) 💛 YellowLight: Infrastructure & deployment 🌈 Trinity: Unified compliance & testing Includes: - 12 documentation files - 8 shell scripts - 18 HTML brand templates - Trinity compliance workflow Built by: Cece + Alexa Date: December 23, 2025 Source: blackroad-os/blackroad-os-infra 🌸✨
1959 lines
63 KiB
HTML
1959 lines
63 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BlackRoad OS — Animation System</title>
|
|
<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=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
/* Primary */
|
|
--black: #000000;
|
|
--white: #FFFFFF;
|
|
|
|
/* Supporting Colors - Warm */
|
|
--amber: #F5A623;
|
|
--orange: #F26522;
|
|
--hot-pink: #FF1D6C;
|
|
--magenta: #E91E63;
|
|
|
|
/* Supporting Colors - Cool */
|
|
--electric-blue: #2979FF;
|
|
--sky-blue: #448AFF;
|
|
--violet: #9C27B0;
|
|
--deep-purple: #5E35B1;
|
|
|
|
/* Gradients */
|
|
--gradient-sunset: linear-gradient(135deg, var(--amber) 0%, var(--hot-pink) 50%, var(--violet) 100%);
|
|
--gradient-ocean: linear-gradient(135deg, var(--violet) 0%, var(--electric-blue) 50%, var(--amber) 100%);
|
|
--gradient-aurora: linear-gradient(180deg, var(--orange) 0%, var(--hot-pink) 33%, var(--violet) 66%, var(--electric-blue) 100%);
|
|
--gradient-radial: radial-gradient(circle at center, var(--amber) 0%, var(--hot-pink) 40%, var(--violet) 70%, var(--electric-blue) 100%);
|
|
|
|
/* Timing */
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
|
|
--spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
background: var(--black);
|
|
color: var(--white);
|
|
overflow-x: hidden;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Global smooth rendering for animations */
|
|
svg, .loader-spinner, .loader-pulse, .morph-blob, .morph-square, .morph-star {
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
padding: 24px 48px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.logo-mark {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.logo-mark svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.logo-mark .nav-road-hashes {
|
|
animation: road-spin 8s linear infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 40px;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
letter-spacing: 0.05em;
|
|
opacity: 0.7;
|
|
transition: opacity 0.3s ease, transform 0.3s var(--ease-out-back);
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
opacity: 1;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Section Styling */
|
|
section {
|
|
padding: 120px 48px;
|
|
position: relative;
|
|
background: var(--black);
|
|
}
|
|
|
|
.section-header {
|
|
max-width: 900px;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 12px;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--hot-pink);
|
|
margin-bottom: 16px;
|
|
display: block;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(32px, 5vw, 56px);
|
|
line-height: 1.1;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 16px;
|
|
opacity: 0.7;
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 120px 48px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--black);
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.hero-orb-1 {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: var(--hot-pink);
|
|
top: -200px;
|
|
right: -200px;
|
|
animation: orb-float-1 15s ease-in-out infinite;
|
|
}
|
|
|
|
.hero-orb-2 {
|
|
width: 500px;
|
|
height: 500px;
|
|
background: var(--electric-blue);
|
|
bottom: -150px;
|
|
left: -150px;
|
|
animation: orb-float-2 18s ease-in-out infinite;
|
|
}
|
|
|
|
.hero-orb-3 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: var(--amber);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: orb-pulse 10s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes orb-float-1 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(-50px, 50px) scale(1.05); }
|
|
50% { transform: translate(-100px, 100px) scale(1.1); }
|
|
75% { transform: translate(25px, -25px) scale(0.95); }
|
|
}
|
|
|
|
@keyframes orb-float-2 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(40px, -40px) scale(0.95); }
|
|
50% { transform: translate(80px, -80px) scale(0.9); }
|
|
75% { transform: translate(-30px, 30px) scale(1.05); }
|
|
}
|
|
|
|
@keyframes orb-pulse {
|
|
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
|
|
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.45; }
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-logo {
|
|
width: 180px;
|
|
height: 180px;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.hero-logo svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.logo-ring {
|
|
animation: ring-breathe 4s ease-in-out infinite;
|
|
transform-origin: center;
|
|
}
|
|
|
|
@keyframes ring-breathe {
|
|
0%, 100% { stroke-width: 8; opacity: 1; }
|
|
50% { stroke-width: 10; opacity: 0.9; }
|
|
}
|
|
|
|
.road-hashes {
|
|
animation: road-spin 8s linear infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
@keyframes road-spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.logo-top {
|
|
animation: eye-blink-top 6s ease-in-out infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
.logo-bottom {
|
|
animation: eye-blink-bottom 6s ease-in-out infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
@keyframes eye-blink-top {
|
|
0%, 45%, 55%, 100% { transform: scaleY(1); }
|
|
50% { transform: scaleY(0.1); }
|
|
}
|
|
|
|
@keyframes eye-blink-bottom {
|
|
0%, 45%, 55%, 100% { transform: scaleY(1); }
|
|
50% { transform: scaleY(0.1); }
|
|
}
|
|
|
|
.logo-pupil {
|
|
animation: pupil-look 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
@keyframes pupil-look {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
15% { transform: translate(6px, -4px); }
|
|
30% { transform: translate(-4px, 3px); }
|
|
45% { transform: translate(0, 0); }
|
|
60% { transform: translate(5px, 5px); }
|
|
75% { transform: translate(-6px, -2px); }
|
|
90% { transform: translate(2px, 0); }
|
|
}
|
|
|
|
.pupil-highlight {
|
|
animation: highlight-shimmer 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes highlight-shimmer {
|
|
0%, 100% { opacity: 0.3; transform: translate(0, 0); }
|
|
50% { opacity: 0.6; transform: translate(2px, 2px); }
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(40px, 8vw, 100px);
|
|
line-height: 1;
|
|
margin-bottom: 24px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero h1 .line {
|
|
display: block;
|
|
animation: slide-up 1s var(--ease-out-expo) forwards;
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.hero h1 .line:nth-child(1) { animation-delay: 0.2s; }
|
|
.hero h1 .line:nth-child(2) { animation-delay: 0.35s; }
|
|
.hero h1 .line:nth-child(3) { animation-delay: 0.5s; }
|
|
|
|
@keyframes slide-up {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.hero h1 span {
|
|
background: var(--gradient-sunset);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 18px;
|
|
max-width: 500px;
|
|
opacity: 0;
|
|
animation: fade-in 1s var(--ease-out-expo) 0.8s forwards;
|
|
margin: 0 auto 40px;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
to { opacity: 0.7; }
|
|
}
|
|
|
|
/* Easing Showcase */
|
|
.easing-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.easing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 32px;
|
|
}
|
|
|
|
.easing-card {
|
|
padding: 32px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.easing-preview {
|
|
height: 120px;
|
|
position: relative;
|
|
margin-bottom: 24px;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.easing-dot {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--hot-pink);
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.easing-card:hover .easing-dot {
|
|
animation: easing-demo 1.5s infinite;
|
|
}
|
|
|
|
.easing-card:nth-child(1):hover .easing-dot {
|
|
animation-timing-function: linear;
|
|
}
|
|
.easing-card:nth-child(2):hover .easing-dot {
|
|
animation-timing-function: var(--ease-out-expo);
|
|
}
|
|
.easing-card:nth-child(3):hover .easing-dot {
|
|
animation-timing-function: var(--ease-out-back);
|
|
}
|
|
.easing-card:nth-child(4):hover .easing-dot {
|
|
animation-timing-function: var(--spring);
|
|
}
|
|
|
|
@keyframes easing-demo {
|
|
0%, 100% { left: 16px; }
|
|
50% { left: calc(100% - 40px); }
|
|
}
|
|
|
|
.easing-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.easing-value {
|
|
font-size: 11px;
|
|
opacity: 0.5;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Morphing Shapes */
|
|
.morph-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.morph-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 80px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.morph-shape {
|
|
width: 200px;
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.morph-blob {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: var(--gradient-sunset);
|
|
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
|
animation: morph-blob 12s ease-in-out infinite;
|
|
will-change: border-radius;
|
|
}
|
|
|
|
@keyframes morph-blob {
|
|
0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
|
|
14% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
|
|
28% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
|
|
42% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
|
|
56% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
|
|
70% { border-radius: 40% 60% 50% 40% / 60% 50% 40% 60%; }
|
|
84% { border-radius: 50% 50% 40% 60% / 50% 40% 60% 50%; }
|
|
}
|
|
|
|
.morph-square {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: var(--electric-blue);
|
|
animation: morph-square 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
will-change: border-radius, transform;
|
|
}
|
|
|
|
@keyframes morph-square {
|
|
0%, 100% { border-radius: 0; transform: rotate(0deg); }
|
|
20% { border-radius: 30% 0 30% 0; transform: rotate(72deg); }
|
|
40% { border-radius: 50% 0 50% 0; transform: rotate(144deg); }
|
|
60% { border-radius: 50%; transform: rotate(216deg); }
|
|
80% { border-radius: 0 50% 0 50%; transform: rotate(288deg); }
|
|
}
|
|
|
|
.morph-star {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: var(--amber);
|
|
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
|
animation: morph-star 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
will-change: clip-path, transform;
|
|
}
|
|
|
|
@keyframes morph-star {
|
|
0%, 100% {
|
|
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
25% {
|
|
clip-path: polygon(50% 5%, 63% 38%, 95% 38%, 70% 58%, 78% 88%, 50% 68%, 22% 88%, 30% 58%, 5% 38%, 37% 38%);
|
|
transform: rotate(18deg) scale(1.05);
|
|
}
|
|
50% {
|
|
clip-path: polygon(50% 10%, 58% 40%, 90% 40%, 65% 60%, 75% 85%, 50% 65%, 25% 85%, 35% 60%, 10% 40%, 42% 40%);
|
|
transform: rotate(36deg) scale(1);
|
|
}
|
|
75% {
|
|
clip-path: polygon(50% 5%, 60% 37%, 93% 37%, 67% 58%, 77% 87%, 50% 67%, 23% 87%, 33% 58%, 7% 37%, 40% 37%);
|
|
transform: rotate(54deg) scale(0.95);
|
|
}
|
|
}
|
|
|
|
/* Loading Animations */
|
|
.loaders-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.loaders-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 48px;
|
|
}
|
|
|
|
.loader-card {
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
padding: 32px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.loader-name {
|
|
font-size: 12px;
|
|
opacity: 0.6;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* Spinner */
|
|
.loader-spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 3px solid rgba(255, 255, 255, 0.1);
|
|
border-top-color: var(--hot-pink);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Pulse */
|
|
.loader-pulse {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--electric-blue);
|
|
border-radius: 50%;
|
|
animation: pulse-loader 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-loader {
|
|
0%, 100% { transform: scale(0.8); opacity: 0.5; }
|
|
50% { transform: scale(1.2); opacity: 1; }
|
|
}
|
|
|
|
/* Dots */
|
|
.loader-dots {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.loader-dots span {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--amber);
|
|
border-radius: 50%;
|
|
animation: dots-bounce 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.loader-dots span:nth-child(1) { animation-delay: 0s; }
|
|
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
|
|
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
@keyframes dots-bounce {
|
|
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
|
|
40% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
/* Bars */
|
|
.loader-bars {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: flex-end;
|
|
height: 48px;
|
|
}
|
|
|
|
.loader-bars span {
|
|
width: 8px;
|
|
background: var(--violet);
|
|
border-radius: 4px;
|
|
animation: bars-wave 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.loader-bars span:nth-child(1) { animation-delay: 0s; }
|
|
.loader-bars span:nth-child(2) { animation-delay: 0.1s; }
|
|
.loader-bars span:nth-child(3) { animation-delay: 0.2s; }
|
|
.loader-bars span:nth-child(4) { animation-delay: 0.3s; }
|
|
.loader-bars span:nth-child(5) { animation-delay: 0.4s; }
|
|
|
|
@keyframes bars-wave {
|
|
0%, 100% { height: 16px; }
|
|
50% { height: 48px; }
|
|
}
|
|
|
|
/* Ring */
|
|
.loader-ring {
|
|
width: 48px;
|
|
height: 48px;
|
|
position: relative;
|
|
}
|
|
|
|
.loader-ring::before,
|
|
.loader-ring::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
border: 3px solid transparent;
|
|
}
|
|
|
|
.loader-ring::before {
|
|
border-top-color: var(--hot-pink);
|
|
border-right-color: var(--hot-pink);
|
|
animation: ring-spin 1.5s linear infinite;
|
|
}
|
|
|
|
.loader-ring::after {
|
|
border-bottom-color: var(--electric-blue);
|
|
border-left-color: var(--electric-blue);
|
|
animation: ring-spin 1.5s linear infinite reverse;
|
|
}
|
|
|
|
@keyframes ring-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Orbit */
|
|
.loader-orbit {
|
|
width: 48px;
|
|
height: 48px;
|
|
position: relative;
|
|
}
|
|
|
|
.orbit-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--white);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.orbit-ring {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
animation: orbit 2s linear infinite;
|
|
}
|
|
|
|
.orbit-dot {
|
|
position: absolute;
|
|
top: -4px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--hot-pink);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@keyframes orbit {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* DNA */
|
|
.loader-dna {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.loader-dna span {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
animation: dna-wave 2s ease-in-out infinite;
|
|
}
|
|
|
|
.loader-dna span:nth-child(odd) {
|
|
background: var(--hot-pink);
|
|
}
|
|
|
|
.loader-dna span:nth-child(even) {
|
|
background: var(--electric-blue);
|
|
animation-delay: -1s;
|
|
}
|
|
|
|
.loader-dna span:nth-child(1) { animation-delay: 0s; }
|
|
.loader-dna span:nth-child(2) { animation-delay: -0.9s; }
|
|
.loader-dna span:nth-child(3) { animation-delay: 0.2s; }
|
|
.loader-dna span:nth-child(4) { animation-delay: -0.7s; }
|
|
.loader-dna span:nth-child(5) { animation-delay: 0.4s; }
|
|
|
|
@keyframes dna-wave {
|
|
0%, 100% { transform: translateY(-12px) scale(0.8); }
|
|
50% { transform: translateY(12px) scale(1.2); }
|
|
}
|
|
|
|
/* Cube */
|
|
.loader-cube {
|
|
width: 48px;
|
|
height: 48px;
|
|
perspective: 100px;
|
|
}
|
|
|
|
.cube-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--gradient-sunset);
|
|
animation: cube-flip 2s ease-in-out infinite;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
@keyframes cube-flip {
|
|
0% { transform: rotateX(0) rotateY(0); }
|
|
25% { transform: rotateX(180deg) rotateY(0); }
|
|
50% { transform: rotateX(180deg) rotateY(180deg); }
|
|
75% { transform: rotateX(0) rotateY(180deg); }
|
|
100% { transform: rotateX(0) rotateY(360deg); }
|
|
}
|
|
|
|
/* Ripple */
|
|
.loader-ripple {
|
|
width: 48px;
|
|
height: 48px;
|
|
position: relative;
|
|
}
|
|
|
|
.loader-ripple span {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 2px solid var(--amber);
|
|
border-radius: 50%;
|
|
animation: ripple 1.5s ease-out infinite;
|
|
}
|
|
|
|
.loader-ripple span:nth-child(2) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
@keyframes ripple {
|
|
0% { transform: scale(0.5); opacity: 1; }
|
|
100% { transform: scale(1.5); opacity: 0; }
|
|
}
|
|
|
|
/* Text Animations */
|
|
.text-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.text-demos {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 80px;
|
|
}
|
|
|
|
.text-demo {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-demo-label {
|
|
font-size: 12px;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--hot-pink);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Typewriter */
|
|
.typewriter {
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
border-right: 3px solid var(--hot-pink);
|
|
white-space: nowrap;
|
|
animation: typing 4s steps(20) infinite, blink 0.75s step-end infinite;
|
|
max-width: fit-content;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@keyframes typing {
|
|
0%, 100% { width: 0; }
|
|
50%, 90% { width: 100%; }
|
|
}
|
|
|
|
@keyframes blink {
|
|
50% { border-color: transparent; }
|
|
}
|
|
|
|
/* Glitch */
|
|
.glitch {
|
|
font-size: 64px;
|
|
font-weight: 700;
|
|
position: relative;
|
|
}
|
|
|
|
.glitch::before,
|
|
.glitch::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.glitch::before {
|
|
color: var(--hot-pink);
|
|
animation: glitch-1 2s infinite linear alternate-reverse;
|
|
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
|
|
}
|
|
|
|
.glitch::after {
|
|
color: var(--electric-blue);
|
|
animation: glitch-2 2s infinite linear alternate-reverse;
|
|
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
|
|
}
|
|
|
|
@keyframes glitch-1 {
|
|
0%, 100% { transform: translate(0); }
|
|
20% { transform: translate(-3px, 3px); }
|
|
40% { transform: translate(3px, -3px); }
|
|
60% { transform: translate(-3px, -3px); }
|
|
80% { transform: translate(3px, 3px); }
|
|
}
|
|
|
|
@keyframes glitch-2 {
|
|
0%, 100% { transform: translate(0); }
|
|
20% { transform: translate(3px, -3px); }
|
|
40% { transform: translate(-3px, 3px); }
|
|
60% { transform: translate(3px, 3px); }
|
|
80% { transform: translate(-3px, -3px); }
|
|
}
|
|
|
|
/* Wave */
|
|
.wave-text {
|
|
font-size: 56px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.wave-text span {
|
|
display: inline-block;
|
|
animation: wave 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
background: var(--gradient-sunset);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.wave-text span:nth-child(1) { animation-delay: 0s; }
|
|
.wave-text span:nth-child(2) { animation-delay: 0.08s; }
|
|
.wave-text span:nth-child(3) { animation-delay: 0.16s; }
|
|
.wave-text span:nth-child(4) { animation-delay: 0.24s; }
|
|
.wave-text span:nth-child(5) { animation-delay: 0.32s; }
|
|
.wave-text span:nth-child(6) { animation-delay: 0.40s; }
|
|
.wave-text span:nth-child(7) { animation-delay: 0.48s; }
|
|
.wave-text span:nth-child(8) { animation-delay: 0.56s; }
|
|
.wave-text span:nth-child(9) { animation-delay: 0.64s; }
|
|
|
|
@keyframes wave {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-16px); }
|
|
}
|
|
|
|
/* Gradient Flow */
|
|
.gradient-text {
|
|
font-size: 72px;
|
|
font-weight: 700;
|
|
background: linear-gradient(90deg, var(--amber), var(--hot-pink), var(--violet), var(--electric-blue), var(--amber));
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: gradient-flow 3s linear infinite;
|
|
}
|
|
|
|
@keyframes gradient-flow {
|
|
to { background-position: 200% center; }
|
|
}
|
|
|
|
/* Hover Cards */
|
|
.hover-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.hover-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 32px;
|
|
}
|
|
|
|
.hover-card {
|
|
aspect-ratio: 1;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-card-label {
|
|
font-size: 12px;
|
|
opacity: 0.6;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Scale */
|
|
.hover-scale {
|
|
transition: transform 0.4s var(--ease-out-back);
|
|
}
|
|
|
|
.hover-scale:hover {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
/* Lift */
|
|
.hover-lift {
|
|
transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-12px);
|
|
box-shadow: 0 20px 40px rgba(255, 29, 108, 0.2);
|
|
}
|
|
|
|
/* Glow */
|
|
.hover-glow {
|
|
transition: box-shadow 0.4s ease;
|
|
}
|
|
|
|
.hover-glow:hover {
|
|
box-shadow: 0 0 0 2px var(--hot-pink), 0 0 40px rgba(255, 29, 108, 0.4);
|
|
}
|
|
|
|
/* Shine */
|
|
.hover-shine::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transition: left 0.6s ease;
|
|
}
|
|
|
|
.hover-shine:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Fill */
|
|
.hover-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--gradient-sunset);
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.hover-fill:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-fill .hover-card-label {
|
|
transition: color 0.4s ease;
|
|
}
|
|
|
|
/* Rotate */
|
|
.hover-rotate {
|
|
transition: transform 0.6s var(--ease-out-expo);
|
|
}
|
|
|
|
.hover-rotate:hover {
|
|
transform: rotate(5deg) scale(1.05);
|
|
}
|
|
|
|
/* Border */
|
|
.hover-border {
|
|
border: 2px solid transparent;
|
|
background: linear-gradient(var(--black), var(--black)) padding-box,
|
|
var(--gradient-sunset) border-box;
|
|
transition: border-width 0.3s ease;
|
|
}
|
|
|
|
.hover-border:hover {
|
|
border-width: 4px;
|
|
}
|
|
|
|
/* Flip */
|
|
.hover-flip {
|
|
transition: transform 0.6s var(--ease-out-expo);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.hover-flip:hover {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
/* Particles */
|
|
.particles-section {
|
|
background: var(--black);
|
|
min-height: 80vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.particle-1 { width: 8px; height: 8px; background: var(--hot-pink); animation: float-particle 15s infinite; left: 10%; top: 20%; }
|
|
.particle-2 { width: 12px; height: 12px; background: var(--electric-blue); animation: float-particle 18s infinite reverse; left: 20%; top: 60%; }
|
|
.particle-3 { width: 6px; height: 6px; background: var(--amber); animation: float-particle 12s infinite; left: 80%; top: 30%; }
|
|
.particle-4 { width: 10px; height: 10px; background: var(--violet); animation: float-particle 20s infinite reverse; left: 70%; top: 70%; }
|
|
.particle-5 { width: 14px; height: 14px; background: var(--hot-pink); animation: float-particle 16s infinite; left: 50%; top: 10%; }
|
|
.particle-6 { width: 8px; height: 8px; background: var(--electric-blue); animation: float-particle 14s infinite reverse; left: 30%; top: 80%; }
|
|
.particle-7 { width: 6px; height: 6px; background: var(--amber); animation: float-particle 22s infinite; left: 90%; top: 50%; }
|
|
.particle-8 { width: 10px; height: 10px; background: var(--violet); animation: float-particle 17s infinite reverse; left: 5%; top: 40%; }
|
|
.particle-9 { width: 8px; height: 8px; background: var(--hot-pink); animation: float-particle 19s infinite; left: 60%; top: 90%; }
|
|
.particle-10 { width: 12px; height: 12px; background: var(--electric-blue); animation: float-particle 13s infinite reverse; left: 40%; top: 25%; }
|
|
|
|
@keyframes float-particle {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
|
|
20% { transform: translate(30px, -50px) rotate(72deg); opacity: 0.8; }
|
|
40% { transform: translate(-20px, -100px) rotate(144deg); opacity: 0.4; }
|
|
60% { transform: translate(50px, -80px) rotate(216deg); opacity: 0.9; }
|
|
80% { transform: translate(10px, -30px) rotate(288deg); opacity: 0.6; }
|
|
}
|
|
|
|
.particles-content {
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.particles-content h2 {
|
|
font-size: 64px;
|
|
margin-bottom: 16px;
|
|
background: var(--gradient-sunset);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.particles-content p {
|
|
font-size: 18px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Scroll Indicator */
|
|
.scroll-indicator {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 3px;
|
|
background: var(--gradient-sunset);
|
|
z-index: 9999;
|
|
width: 0%;
|
|
transition: width 0.1s linear;
|
|
}
|
|
|
|
/* Button Animations */
|
|
.buttons-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.buttons-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 32px;
|
|
}
|
|
|
|
.btn-demo {
|
|
padding: 20px 40px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
border: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Pulse Button */
|
|
.btn-pulse {
|
|
background: var(--hot-pink);
|
|
color: var(--white);
|
|
border-radius: 8px;
|
|
animation: btn-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes btn-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 29, 108, 0.4); }
|
|
50% { box-shadow: 0 0 0 15px rgba(255, 29, 108, 0); }
|
|
}
|
|
|
|
/* Slide Button */
|
|
.btn-slide {
|
|
background: transparent;
|
|
color: var(--white);
|
|
border: 2px solid var(--electric-blue);
|
|
border-radius: 8px;
|
|
transition: color 0.4s ease;
|
|
}
|
|
|
|
.btn-slide::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
background: var(--electric-blue);
|
|
transition: width 0.4s var(--ease-out-expo);
|
|
z-index: -1;
|
|
}
|
|
|
|
.btn-slide:hover::before {
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-slide:hover {
|
|
color: var(--black);
|
|
}
|
|
|
|
/* Ripple Button */
|
|
.btn-ripple {
|
|
background: var(--violet);
|
|
color: var(--white);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.btn-ripple span {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-ripple::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s ease, height 0.6s ease;
|
|
}
|
|
|
|
.btn-ripple:hover::after {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
/* Gradient Button */
|
|
.btn-gradient {
|
|
background: var(--gradient-sunset);
|
|
background-size: 200% 200%;
|
|
color: var(--white);
|
|
border-radius: 8px;
|
|
animation: gradient-shift 3s ease infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
/* Icon Gallery */
|
|
.icons-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.animated-icons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 64px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.animated-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Bouncing Arrow */
|
|
.icon-arrow {
|
|
font-size: 48px;
|
|
animation: bounce-arrow 1s ease-in-out infinite;
|
|
color: var(--hot-pink);
|
|
}
|
|
|
|
@keyframes bounce-arrow {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-15px); }
|
|
}
|
|
|
|
/* Spinning Gear */
|
|
.icon-gear {
|
|
font-size: 48px;
|
|
animation: spin-gear 4s linear infinite;
|
|
color: var(--electric-blue);
|
|
}
|
|
|
|
@keyframes spin-gear {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Pulsing Heart */
|
|
.icon-heart {
|
|
font-size: 48px;
|
|
animation: pulse-heart 1s ease-in-out infinite;
|
|
color: var(--magenta);
|
|
}
|
|
|
|
@keyframes pulse-heart {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.2); }
|
|
}
|
|
|
|
/* Wiggle Bell */
|
|
.icon-bell {
|
|
font-size: 48px;
|
|
animation: wiggle-bell 0.5s ease-in-out infinite;
|
|
color: var(--amber);
|
|
transform-origin: top center;
|
|
}
|
|
|
|
@keyframes wiggle-bell {
|
|
0%, 100% { transform: rotate(-10deg); }
|
|
50% { transform: rotate(10deg); }
|
|
}
|
|
|
|
/* Floating Cloud */
|
|
.icon-cloud {
|
|
font-size: 48px;
|
|
animation: float-cloud 3s ease-in-out infinite;
|
|
color: var(--sky-blue);
|
|
}
|
|
|
|
@keyframes float-cloud {
|
|
0%, 100% { transform: translateY(0) translateX(0); }
|
|
50% { transform: translateY(-10px) translateX(5px); }
|
|
}
|
|
|
|
/* Code Block Animation */
|
|
.code-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.code-block {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.code-line {
|
|
opacity: 0;
|
|
animation: code-appear 0.5s ease forwards;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.code-line:nth-child(1) { animation-delay: 0.2s; }
|
|
.code-line:nth-child(2) { animation-delay: 0.4s; }
|
|
.code-line:nth-child(3) { animation-delay: 0.6s; }
|
|
.code-line:nth-child(4) { animation-delay: 0.8s; }
|
|
.code-line:nth-child(5) { animation-delay: 1s; }
|
|
.code-line:nth-child(6) { animation-delay: 1.2s; }
|
|
.code-line:nth-child(7) { animation-delay: 1.4s; }
|
|
.code-line:nth-child(8) { animation-delay: 1.6s; }
|
|
|
|
@keyframes code-appear {
|
|
from { opacity: 0; transform: translateX(-20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
.code-keyword { color: var(--hot-pink); }
|
|
.code-string { color: var(--amber); }
|
|
.code-property { color: var(--electric-blue); }
|
|
.code-value { color: var(--violet); }
|
|
.code-comment { color: rgba(255, 255, 255, 0.4); }
|
|
|
|
/* Timeline Animation */
|
|
.timeline-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-left: 72px;
|
|
padding-bottom: 48px;
|
|
opacity: 0;
|
|
animation: timeline-appear 0.6s var(--ease-out-expo) forwards;
|
|
}
|
|
|
|
.timeline-item:nth-child(1) { animation-delay: 0.2s; }
|
|
.timeline-item:nth-child(2) { animation-delay: 0.4s; }
|
|
.timeline-item:nth-child(3) { animation-delay: 0.6s; }
|
|
.timeline-item:nth-child(4) { animation-delay: 0.8s; }
|
|
|
|
@keyframes timeline-appear {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.timeline-dot {
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 4px;
|
|
width: 18px;
|
|
height: 18px;
|
|
background: var(--hot-pink);
|
|
border-radius: 50%;
|
|
animation: dot-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.timeline-item:nth-child(2) .timeline-dot { background: var(--electric-blue); animation-delay: 0.5s; }
|
|
.timeline-item:nth-child(3) .timeline-dot { background: var(--amber); animation-delay: 1s; }
|
|
.timeline-item:nth-child(4) .timeline-dot { background: var(--violet); animation-delay: 1.5s; }
|
|
|
|
@keyframes dot-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 currentColor; }
|
|
50% { box-shadow: 0 0 0 8px transparent; }
|
|
}
|
|
|
|
.timeline-content h4 {
|
|
font-size: 18px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.timeline-content p {
|
|
font-size: 14px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background: var(--black);
|
|
padding: 80px 48px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-logo {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 24px;
|
|
}
|
|
|
|
.footer-logo svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.footer-logo .footer-road-hashes {
|
|
animation: road-spin 8s linear infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
footer p {
|
|
font-size: 14px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1200px) {
|
|
.easing-grid,
|
|
.hover-grid,
|
|
.buttons-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.loaders-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
nav {
|
|
padding: 16px 24px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
section {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.easing-grid,
|
|
.hover-grid,
|
|
.buttons-grid,
|
|
.loaders-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.morph-container {
|
|
gap: 40px;
|
|
}
|
|
|
|
.animated-icons {
|
|
gap: 32px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Scroll Indicator -->
|
|
<div class="scroll-indicator" id="scrollIndicator"></div>
|
|
|
|
<!-- Navigation -->
|
|
<nav>
|
|
<div class="logo">
|
|
<div class="logo-mark">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="50" cy="50" r="46" stroke="#FF1D6C" stroke-width="8"/>
|
|
<g class="nav-road-hashes">
|
|
<rect x="48" y="2" width="4" height="10" fill="#000" rx="1"/>
|
|
<rect x="48" y="88" width="4" height="10" fill="#000" rx="1"/>
|
|
<rect x="88" y="48" width="10" height="4" fill="#000" rx="1"/>
|
|
<rect x="2" y="48" width="10" height="4" fill="#000" rx="1"/>
|
|
<rect x="76" y="14" width="4" height="10" fill="#000" rx="1" transform="rotate(45 78 19)"/>
|
|
<rect x="20" y="76" width="4" height="10" fill="#000" rx="1" transform="rotate(45 22 81)"/>
|
|
<rect x="76" y="76" width="4" height="10" fill="#000" rx="1" transform="rotate(-45 78 81)"/>
|
|
<rect x="20" y="14" width="4" height="10" fill="#000" rx="1" transform="rotate(-45 22 19)"/>
|
|
</g>
|
|
<path d="M50 8C26.8 8 8 26.8 8 50H92C92 26.8 73.2 8 50 8Z" fill="#F5A623"/>
|
|
<path d="M8 50C8 73.2 26.8 92 50 92C73.2 92 92 73.2 92 50H8Z" fill="#2979FF"/>
|
|
<circle cx="50" cy="50" r="16" fill="#000"/>
|
|
</svg>
|
|
</div>
|
|
<span class="logo-text">BlackRoad OS</span>
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#easing">Easing</a></li>
|
|
<li><a href="#loaders">Loaders</a></li>
|
|
<li><a href="#text">Text</a></li>
|
|
<li><a href="#hover">Hover</a></li>
|
|
<li><a href="#buttons">Buttons</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-bg">
|
|
<div class="hero-orb hero-orb-1"></div>
|
|
<div class="hero-orb hero-orb-2"></div>
|
|
<div class="hero-orb hero-orb-3"></div>
|
|
</div>
|
|
<div class="hero-content">
|
|
<div class="hero-logo">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Outer pink ring (the road) -->
|
|
<circle class="logo-ring" cx="50" cy="50" r="46" stroke="#FF1D6C" stroke-width="8"/>
|
|
|
|
<!-- Road hash marks on the pink ring -->
|
|
<g class="road-hashes">
|
|
<rect x="48" y="2" width="4" height="10" fill="#000" rx="1"/>
|
|
<rect x="48" y="88" width="4" height="10" fill="#000" rx="1"/>
|
|
<rect x="88" y="48" width="10" height="4" fill="#000" rx="1"/>
|
|
<rect x="2" y="48" width="10" height="4" fill="#000" rx="1"/>
|
|
|
|
<!-- Diagonal hashes -->
|
|
<rect x="76" y="14" width="4" height="10" fill="#000" rx="1" transform="rotate(45 78 19)"/>
|
|
<rect x="20" y="76" width="4" height="10" fill="#000" rx="1" transform="rotate(45 22 81)"/>
|
|
<rect x="76" y="76" width="4" height="10" fill="#000" rx="1" transform="rotate(-45 78 81)"/>
|
|
<rect x="20" y="14" width="4" height="10" fill="#000" rx="1" transform="rotate(-45 22 19)"/>
|
|
|
|
<!-- More hash marks for fuller road effect -->
|
|
<rect x="65" y="6" width="4" height="8" fill="#000" rx="1" transform="rotate(22.5 67 10)"/>
|
|
<rect x="31" y="86" width="4" height="8" fill="#000" rx="1" transform="rotate(22.5 33 90)"/>
|
|
<rect x="86" y="31" width="8" height="4" fill="#000" rx="1" transform="rotate(22.5 90 33)"/>
|
|
<rect x="6" y="65" width="8" height="4" fill="#000" rx="1" transform="rotate(22.5 10 67)"/>
|
|
|
|
<rect x="31" y="6" width="4" height="8" fill="#000" rx="1" transform="rotate(-22.5 33 10)"/>
|
|
<rect x="65" y="86" width="4" height="8" fill="#000" rx="1" transform="rotate(-22.5 67 90)"/>
|
|
<rect x="86" y="65" width="8" height="4" fill="#000" rx="1" transform="rotate(-22.5 90 67)"/>
|
|
<rect x="6" y="31" width="8" height="4" fill="#000" rx="1" transform="rotate(-22.5 10 33)"/>
|
|
</g>
|
|
|
|
<!-- Inner eye halves -->
|
|
<path class="logo-top" d="M50 8C26.8 8 8 26.8 8 50H92C92 26.8 73.2 8 50 8Z" fill="#F5A623"/>
|
|
<path class="logo-bottom" d="M8 50C8 73.2 26.8 92 50 92C73.2 92 92 73.2 92 50H8Z" fill="#2979FF"/>
|
|
|
|
<!-- Pupil -->
|
|
<circle class="logo-pupil" cx="50" cy="50" r="16" fill="#000"/>
|
|
|
|
<!-- Pupil highlight -->
|
|
<circle class="pupil-highlight" cx="45" cy="45" r="4" fill="rgba(255,255,255,0.3)"/>
|
|
</svg>
|
|
</div>
|
|
<h1>
|
|
<span class="line">Animation</span>
|
|
<span class="line">System</span>
|
|
<span class="line"><span>Preview</span></span>
|
|
</h1>
|
|
<p>A comprehensive library of motion patterns, easing functions, and micro-interactions for the Schematiq design system.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Easing Functions -->
|
|
<section class="easing-section" id="easing">
|
|
<div class="section-header">
|
|
<span class="section-label">Timing Functions</span>
|
|
<h2 class="section-title">Easing Curves</h2>
|
|
<p class="section-desc">Hover over each card to see the easing function in action. The right curve makes all the difference.</p>
|
|
</div>
|
|
|
|
<div class="easing-grid">
|
|
<div class="easing-card">
|
|
<div class="easing-preview">
|
|
<div class="easing-dot"></div>
|
|
</div>
|
|
<div class="easing-name">Linear</div>
|
|
<div class="easing-value">linear</div>
|
|
</div>
|
|
<div class="easing-card">
|
|
<div class="easing-preview">
|
|
<div class="easing-dot"></div>
|
|
</div>
|
|
<div class="easing-name">Ease Out Expo</div>
|
|
<div class="easing-value">cubic-bezier(0.16, 1, 0.3, 1)</div>
|
|
</div>
|
|
<div class="easing-card">
|
|
<div class="easing-preview">
|
|
<div class="easing-dot"></div>
|
|
</div>
|
|
<div class="easing-name">Ease Out Back</div>
|
|
<div class="easing-value">cubic-bezier(0.34, 1.56, 0.64, 1)</div>
|
|
</div>
|
|
<div class="easing-card">
|
|
<div class="easing-preview">
|
|
<div class="easing-dot"></div>
|
|
</div>
|
|
<div class="easing-name">Spring</div>
|
|
<div class="easing-value">cubic-bezier(0.175, 0.885, 0.32, 1.275)</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Morphing Shapes -->
|
|
<section class="morph-section">
|
|
<div class="section-header">
|
|
<span class="section-label">Shape Morphing</span>
|
|
<h2 class="section-title">Organic Motion</h2>
|
|
<p class="section-desc">Fluid shape transformations that bring interfaces to life with organic, natural movement.</p>
|
|
</div>
|
|
|
|
<div class="morph-container">
|
|
<div class="morph-shape">
|
|
<div class="morph-blob"></div>
|
|
</div>
|
|
<div class="morph-shape">
|
|
<div class="morph-square"></div>
|
|
</div>
|
|
<div class="morph-shape">
|
|
<div class="morph-star"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Loading Animations -->
|
|
<section class="loaders-section" id="loaders">
|
|
<div class="section-header">
|
|
<span class="section-label">Loading States</span>
|
|
<h2 class="section-title">Loaders & Spinners</h2>
|
|
<p class="section-desc">Keep users engaged while content loads with these delightful loading animations.</p>
|
|
</div>
|
|
|
|
<div class="loaders-grid">
|
|
<div class="loader-card">
|
|
<div class="loader-spinner"></div>
|
|
<span class="loader-name">Spinner</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-pulse"></div>
|
|
<span class="loader-name">Pulse</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<span class="loader-name">Dots</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-bars">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<span class="loader-name">Bars</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-ring"></div>
|
|
<span class="loader-name">Ring</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-orbit">
|
|
<div class="orbit-center"></div>
|
|
<div class="orbit-ring">
|
|
<div class="orbit-dot"></div>
|
|
</div>
|
|
</div>
|
|
<span class="loader-name">Orbit</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-dna">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<span class="loader-name">DNA</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-cube">
|
|
<div class="cube-inner"></div>
|
|
</div>
|
|
<span class="loader-name">Cube</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-ripple">
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<span class="loader-name">Ripple</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-spinner" style="border-top-color: var(--amber); border-right-color: var(--hot-pink); border-bottom-color: var(--violet); border-left-color: var(--electric-blue);"></div>
|
|
<span class="loader-name">Rainbow</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Text Animations -->
|
|
<section class="text-section" id="text">
|
|
<div class="section-header">
|
|
<span class="section-label">Typography</span>
|
|
<h2 class="section-title">Text Animations</h2>
|
|
<p class="section-desc">Dynamic text effects that add personality and draw attention to key messaging.</p>
|
|
</div>
|
|
|
|
<div class="text-demos">
|
|
<div class="text-demo">
|
|
<div class="text-demo-label">Typewriter</div>
|
|
<div class="typewriter">Hello, BlackRoad.</div>
|
|
</div>
|
|
|
|
<div class="text-demo">
|
|
<div class="text-demo-label">Glitch</div>
|
|
<div class="glitch" data-text="GLITCH">GLITCH</div>
|
|
</div>
|
|
|
|
<div class="text-demo">
|
|
<div class="text-demo-label">Wave</div>
|
|
<div class="wave-text">
|
|
<span>B</span>
|
|
<span>L</span>
|
|
<span>A</span>
|
|
<span>C</span>
|
|
<span>K</span>
|
|
<span>R</span>
|
|
<span>O</span>
|
|
<span>A</span>
|
|
<span>D</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-demo">
|
|
<div class="text-demo-label">Gradient Flow</div>
|
|
<div class="gradient-text">MOTION</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Hover Effects -->
|
|
<section class="hover-section" id="hover">
|
|
<div class="section-header">
|
|
<span class="section-label">Interactions</span>
|
|
<h2 class="section-title">Hover Effects</h2>
|
|
<p class="section-desc">Micro-interactions that provide feedback and delight users on every interaction.</p>
|
|
</div>
|
|
|
|
<div class="hover-grid">
|
|
<div class="hover-card hover-scale">
|
|
<span class="hover-card-label">Scale</span>
|
|
</div>
|
|
<div class="hover-card hover-lift">
|
|
<span class="hover-card-label">Lift</span>
|
|
</div>
|
|
<div class="hover-card hover-glow">
|
|
<span class="hover-card-label">Glow</span>
|
|
</div>
|
|
<div class="hover-card hover-shine">
|
|
<span class="hover-card-label">Shine</span>
|
|
</div>
|
|
<div class="hover-card hover-fill">
|
|
<span class="hover-card-label">Fill</span>
|
|
</div>
|
|
<div class="hover-card hover-rotate">
|
|
<span class="hover-card-label">Rotate</span>
|
|
</div>
|
|
<div class="hover-card hover-border">
|
|
<span class="hover-card-label">Border</span>
|
|
</div>
|
|
<div class="hover-card hover-flip">
|
|
<span class="hover-card-label">Flip</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Button Animations -->
|
|
<section class="buttons-section" id="buttons">
|
|
<div class="section-header">
|
|
<span class="section-label">Components</span>
|
|
<h2 class="section-title">Button Animations</h2>
|
|
<p class="section-desc">Call-to-action buttons that demand attention and encourage interaction.</p>
|
|
</div>
|
|
|
|
<div class="buttons-grid">
|
|
<button class="btn-demo btn-pulse">Pulse Effect</button>
|
|
<button class="btn-demo btn-slide">Slide Fill</button>
|
|
<button class="btn-demo btn-ripple"><span>Ripple Click</span></button>
|
|
<button class="btn-demo btn-gradient">Gradient Shift</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Animated Icons -->
|
|
<section class="icons-section">
|
|
<div class="section-header">
|
|
<span class="section-label">Iconography</span>
|
|
<h2 class="section-title">Animated Icons</h2>
|
|
<p class="section-desc">Icons that move with purpose, adding life to your interface.</p>
|
|
</div>
|
|
|
|
<div class="animated-icons">
|
|
<div class="animated-icon">
|
|
<span class="icon-arrow">↓</span>
|
|
</div>
|
|
<div class="animated-icon">
|
|
<span class="icon-gear">⚙</span>
|
|
</div>
|
|
<div class="animated-icon">
|
|
<span class="icon-heart">♥</span>
|
|
</div>
|
|
<div class="animated-icon">
|
|
<span class="icon-bell">🔔</span>
|
|
</div>
|
|
<div class="animated-icon">
|
|
<span class="icon-cloud">☁</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Particles -->
|
|
<section class="particles-section">
|
|
<div class="particle particle-1"></div>
|
|
<div class="particle particle-2"></div>
|
|
<div class="particle particle-3"></div>
|
|
<div class="particle particle-4"></div>
|
|
<div class="particle particle-5"></div>
|
|
<div class="particle particle-6"></div>
|
|
<div class="particle particle-7"></div>
|
|
<div class="particle particle-8"></div>
|
|
<div class="particle particle-9"></div>
|
|
<div class="particle particle-10"></div>
|
|
|
|
<div class="particles-content">
|
|
<h2>Particles</h2>
|
|
<p>Ambient motion creates atmosphere and depth</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Code Animation -->
|
|
<section class="code-section">
|
|
<div class="section-header">
|
|
<span class="section-label">Implementation</span>
|
|
<h2 class="section-title">Code Preview</h2>
|
|
<p class="section-desc">Watch your code come to life with sequential reveal animations.</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-line"><span class="code-keyword">const</span> animation = {</div>
|
|
<div class="code-line"> <span class="code-property">duration</span>: <span class="code-value">0.6</span>,</div>
|
|
<div class="code-line"> <span class="code-property">easing</span>: <span class="code-string">'ease-out-expo'</span>,</div>
|
|
<div class="code-line"> <span class="code-property">delay</span>: <span class="code-value">0.1</span>,</div>
|
|
<div class="code-line"> <span class="code-property">stagger</span>: <span class="code-value">0.05</span>,</div>
|
|
<div class="code-line">};</div>
|
|
<div class="code-line"></div>
|
|
<div class="code-line"><span class="code-comment">// Apply motion with intention</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Timeline -->
|
|
<section class="timeline-section">
|
|
<div class="section-header" style="text-align: center;">
|
|
<span class="section-label">Sequence</span>
|
|
<h2 class="section-title">Timeline Animation</h2>
|
|
</div>
|
|
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<h4>Initial State</h4>
|
|
<p>Elements begin hidden or in their starting position</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<h4>Trigger Event</h4>
|
|
<p>Scroll, click, or time-based activation</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<h4>Animation</h4>
|
|
<p>Smooth transition with appropriate easing</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<h4>Final State</h4>
|
|
<p>Elements settle into their destination</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="footer-logo">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="50" cy="50" r="46" stroke="#FF1D6C" stroke-width="8"/>
|
|
<g class="footer-road-hashes">
|
|
<rect x="48" y="2" width="4" height="10" fill="#000" rx="1"/>
|
|
<rect x="48" y="88" width="4" height="10" fill="#000" rx="1"/>
|
|
<rect x="88" y="48" width="10" height="4" fill="#000" rx="1"/>
|
|
<rect x="2" y="48" width="10" height="4" fill="#000" rx="1"/>
|
|
<rect x="76" y="14" width="4" height="10" fill="#000" rx="1" transform="rotate(45 78 19)"/>
|
|
<rect x="20" y="76" width="4" height="10" fill="#000" rx="1" transform="rotate(45 22 81)"/>
|
|
<rect x="76" y="76" width="4" height="10" fill="#000" rx="1" transform="rotate(-45 78 81)"/>
|
|
<rect x="20" y="14" width="4" height="10" fill="#000" rx="1" transform="rotate(-45 22 19)"/>
|
|
</g>
|
|
<path d="M50 8C26.8 8 8 26.8 8 50H92C92 26.8 73.2 8 50 8Z" fill="#F5A623"/>
|
|
<path d="M8 50C8 73.2 26.8 92 50 92C73.2 92 92 73.2 92 50H8Z" fill="#2979FF"/>
|
|
<circle cx="50" cy="50" r="16" fill="#000"/>
|
|
</svg>
|
|
</div>
|
|
<p>© 2030 BlackRoad OS Animation System. Motion with intention.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Scroll indicator
|
|
window.addEventListener('scroll', () => {
|
|
const scrollIndicator = document.getElementById('scrollIndicator');
|
|
const scrollTop = document.documentElement.scrollTop;
|
|
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
|
const scrollPercent = (scrollTop / scrollHeight) * 100;
|
|
scrollIndicator.style.width = scrollPercent + '%';
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|