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 🌸✨
1472 lines
48 KiB
HTML
1472 lines
48 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 — Motion</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=SF+Pro+Display:wght@200;300;400;500;600;700&family=SF+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
/* Primary */
|
|
--black: #000000;
|
|
--white: #FFFFFF;
|
|
|
|
/* Brand Colors - Exact Palette */
|
|
--amber: #F5A623;
|
|
--orange: #F26522;
|
|
--hot-pink: #FF1D6C;
|
|
--magenta: #E91E63;
|
|
--electric-blue: #2979FF;
|
|
--sky-blue: #448AFF;
|
|
--violet: #9C27B0;
|
|
--deep-purple: #5E35B1;
|
|
|
|
/* Gradients */
|
|
--gradient-brand: linear-gradient(135deg, var(--amber) 0%, var(--hot-pink) 38.2%, var(--violet) 61.8%, var(--electric-blue) 100%);
|
|
--gradient-subtle: linear-gradient(135deg, rgba(245,166,35,0.1) 0%, rgba(255,29,108,0.1) 38.2%, rgba(156,39,176,0.05) 100%);
|
|
|
|
/* Golden Ratio */
|
|
--phi: 1.618;
|
|
--phi-inverse: 0.618;
|
|
|
|
/* Spacing based on Golden Ratio (base 8px) */
|
|
--space-xs: 8px;
|
|
--space-sm: 13px;
|
|
--space-md: 21px;
|
|
--space-lg: 34px;
|
|
--space-xl: 55px;
|
|
--space-2xl: 89px;
|
|
--space-3xl: 144px;
|
|
|
|
/* Apple-style easing */
|
|
--ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--black);
|
|
color: var(--white);
|
|
overflow-x: hidden;
|
|
line-height: var(--phi);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
/* 3D Scene Setup */
|
|
.scene {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* Typography - Golden Ratio Scale */
|
|
h1 { font-size: 89px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
|
|
h2 { font-size: 55px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
|
|
h3 { font-size: 34px; font-weight: 500; letter-spacing: -0.01em; }
|
|
h4 { font-size: 21px; font-weight: 500; }
|
|
p { font-size: 17px; font-weight: 400; }
|
|
.caption { font-size: 13px; font-weight: 400; opacity: 0.5; }
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
padding: var(--space-md) var(--space-xl);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
backdrop-filter: saturate(180%) blur(20px);
|
|
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.logo-mark {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.logo-mark svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.logo-mark .road-hashes {
|
|
animation: spin-smooth 12s linear infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
@keyframes spin-smooth {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: var(--space-lg);
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
opacity: 0.8;
|
|
transition: opacity 0.3s var(--ease-apple);
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Sections */
|
|
section {
|
|
padding: var(--space-3xl) var(--space-2xl);
|
|
background: var(--black);
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.section-header {
|
|
max-width: 800px;
|
|
margin-bottom: var(--space-2xl);
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
background: var(--gradient-brand);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: var(--space-sm);
|
|
display: block;
|
|
}
|
|
|
|
.section-title {
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.section-desc {
|
|
opacity: 0.6;
|
|
max-width: 610px; /* Golden ratio of 987px */
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: var(--space-3xl) var(--space-xl);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* 3D Floating Orbs */
|
|
.hero-orbs {
|
|
position: absolute;
|
|
inset: 0;
|
|
transform-style: preserve-3d;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
animation: orb-float 20s var(--ease-smooth) infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.orb-1 {
|
|
width: 500px;
|
|
height: 500px;
|
|
background: var(--hot-pink);
|
|
opacity: 0.15;
|
|
top: 10%;
|
|
right: 10%;
|
|
animation-delay: 0s;
|
|
transform: translateZ(-100px);
|
|
}
|
|
|
|
.orb-2 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: var(--electric-blue);
|
|
opacity: 0.12;
|
|
bottom: 20%;
|
|
left: 5%;
|
|
animation-delay: -7s;
|
|
transform: translateZ(-150px);
|
|
}
|
|
|
|
.orb-3 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: var(--amber);
|
|
opacity: 0.1;
|
|
top: 50%;
|
|
left: 50%;
|
|
animation-delay: -14s;
|
|
transform: translateZ(-200px) translate(-50%, -50%);
|
|
}
|
|
|
|
@keyframes orb-float {
|
|
0%, 100% {
|
|
transform: translateZ(-100px) translate(0, 0) scale(1);
|
|
}
|
|
25% {
|
|
transform: translateZ(-80px) translate(30px, -40px) scale(1.05);
|
|
}
|
|
50% {
|
|
transform: translateZ(-120px) translate(-20px, 20px) scale(0.95);
|
|
}
|
|
75% {
|
|
transform: translateZ(-90px) translate(10px, 30px) scale(1.02);
|
|
}
|
|
}
|
|
|
|
/* 3D Hero Logo */
|
|
.hero-logo {
|
|
width: 233px; /* Golden ratio */
|
|
height: 233px;
|
|
margin-bottom: var(--space-xl);
|
|
transform-style: preserve-3d;
|
|
animation: logo-float 8s var(--ease-smooth) infinite;
|
|
position: relative;
|
|
}
|
|
|
|
@keyframes logo-float {
|
|
0%, 100% {
|
|
transform: translateY(0) rotateX(0deg) rotateY(0deg);
|
|
}
|
|
25% {
|
|
transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-5px) rotateX(0deg) rotateY(-5deg);
|
|
}
|
|
75% {
|
|
transform: translateY(-15px) rotateX(-5deg) rotateY(0deg);
|
|
}
|
|
}
|
|
|
|
.hero-logo svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: drop-shadow(0 20px 40px rgba(255, 29, 108, 0.3));
|
|
}
|
|
|
|
.hero-logo .road-hashes {
|
|
animation: spin-smooth 10s linear infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
.hero-logo .logo-ring {
|
|
animation: ring-glow 4s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
@keyframes ring-glow {
|
|
0%, 100% {
|
|
stroke-width: 8;
|
|
filter: drop-shadow(0 0 10px rgba(255, 29, 108, 0.5));
|
|
}
|
|
50% {
|
|
stroke-width: 9;
|
|
filter: drop-shadow(0 0 20px rgba(255, 29, 108, 0.8));
|
|
}
|
|
}
|
|
|
|
.hero-logo .eye-top {
|
|
animation: eye-breathe-top 6s var(--ease-smooth) infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
.hero-logo .eye-bottom {
|
|
animation: eye-breathe-bottom 6s var(--ease-smooth) infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
@keyframes eye-breathe-top {
|
|
0%, 40%, 60%, 100% { transform: scaleY(1); }
|
|
50% { transform: scaleY(0.05); }
|
|
}
|
|
|
|
@keyframes eye-breathe-bottom {
|
|
0%, 40%, 60%, 100% { transform: scaleY(1); }
|
|
50% { transform: scaleY(0.05); }
|
|
}
|
|
|
|
.hero-logo .pupil {
|
|
animation: pupil-gaze 10s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
@keyframes pupil-gaze {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
20% { transform: translate(4px, -2px); }
|
|
40% { transform: translate(-3px, 2px); }
|
|
60% { transform: translate(2px, 3px); }
|
|
80% { transform: translate(-2px, -1px); }
|
|
}
|
|
|
|
.hero-logo .pupil-highlight {
|
|
animation: highlight-twinkle 3s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
@keyframes highlight-twinkle {
|
|
0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(1); }
|
|
50% { opacity: 0.7; transform: translate(1px, 1px) scale(1.2); }
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(55px, 10vw, 89px);
|
|
margin-bottom: var(--space-md);
|
|
opacity: 0;
|
|
animation: fade-up 1s var(--ease-out) 0.3s forwards;
|
|
}
|
|
|
|
.hero h1 span {
|
|
background: var(--gradient-brand);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 21px;
|
|
opacity: 0;
|
|
max-width: 610px;
|
|
margin: 0 auto;
|
|
animation: fade-up 1s var(--ease-out) 0.5s forwards;
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
@keyframes fade-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* 3D Card Grid */
|
|
.cards-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--space-lg);
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.card-3d {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: var(--space-md);
|
|
padding: var(--space-xl);
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.6s var(--ease-apple), box-shadow 0.6s var(--ease-apple);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-3d::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--gradient-subtle);
|
|
opacity: 0;
|
|
transition: opacity 0.6s var(--ease-apple);
|
|
}
|
|
|
|
.card-3d:hover {
|
|
transform: translateZ(20px) rotateX(5deg) rotateY(-5deg);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.5),
|
|
0 0 0 1px rgba(255, 29, 108, 0.1);
|
|
}
|
|
|
|
.card-3d:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-icon {
|
|
font-size: 55px;
|
|
margin-bottom: var(--space-md);
|
|
display: block;
|
|
transform-style: preserve-3d;
|
|
animation: icon-idle 4s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
@keyframes icon-idle {
|
|
0%, 100% { transform: translateZ(0) rotateY(0deg); }
|
|
25% { transform: translateZ(10px) rotateY(5deg); }
|
|
75% { transform: translateZ(5px) rotateY(-5deg); }
|
|
}
|
|
|
|
.card-3d:nth-child(1) .card-icon { animation-delay: 0s; }
|
|
.card-3d:nth-child(2) .card-icon { animation-delay: -1s; }
|
|
.card-3d:nth-child(3) .card-icon { animation-delay: -2s; }
|
|
.card-3d:nth-child(4) .card-icon { animation-delay: -0.5s; }
|
|
.card-3d:nth-child(5) .card-icon { animation-delay: -1.5s; }
|
|
.card-3d:nth-child(6) .card-icon { animation-delay: -2.5s; }
|
|
|
|
.card-3d h4 {
|
|
margin-bottom: var(--space-xs);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.card-3d p {
|
|
opacity: 0.5;
|
|
font-size: 15px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Animated Emoji Icons Section */
|
|
.emoji-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.emoji-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--space-2xl);
|
|
flex-wrap: wrap;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.emoji-3d {
|
|
font-size: 89px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform-style: preserve-3d;
|
|
cursor: default;
|
|
position: relative;
|
|
}
|
|
|
|
/* Individual emoji animations */
|
|
.emoji-eye {
|
|
animation: eye-look 5s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
@keyframes eye-look {
|
|
0%, 100% { transform: rotateY(0deg) rotateX(0deg) scale(1); }
|
|
25% { transform: rotateY(15deg) rotateX(5deg) scale(1.05); }
|
|
50% { transform: rotateY(-10deg) rotateX(-5deg) scale(1); }
|
|
75% { transform: rotateY(5deg) rotateX(10deg) scale(1.02); }
|
|
}
|
|
|
|
.emoji-rocket {
|
|
animation: rocket-launch 4s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
@keyframes rocket-launch {
|
|
0%, 100% {
|
|
transform: translateY(0) rotate(-45deg) scale(1);
|
|
filter: drop-shadow(0 10px 20px rgba(245, 166, 35, 0.3));
|
|
}
|
|
50% {
|
|
transform: translateY(-20px) rotate(-45deg) scale(1.1);
|
|
filter: drop-shadow(0 30px 40px rgba(245, 166, 35, 0.5));
|
|
}
|
|
}
|
|
|
|
.emoji-sparkle {
|
|
animation: sparkle-spin 6s linear infinite;
|
|
}
|
|
|
|
@keyframes sparkle-spin {
|
|
0% { transform: rotateY(0deg) rotateZ(0deg) scale(1); }
|
|
25% { transform: rotateY(90deg) rotateZ(90deg) scale(1.1); }
|
|
50% { transform: rotateY(180deg) rotateZ(180deg) scale(1); }
|
|
75% { transform: rotateY(270deg) rotateZ(270deg) scale(1.1); }
|
|
100% { transform: rotateY(360deg) rotateZ(360deg) scale(1); }
|
|
}
|
|
|
|
.emoji-fire {
|
|
animation: fire-flicker 0.5s var(--ease-smooth) infinite alternate;
|
|
}
|
|
|
|
@keyframes fire-flicker {
|
|
0% {
|
|
transform: scaleX(1) scaleY(1) translateY(0);
|
|
filter: drop-shadow(0 5px 15px rgba(242, 101, 34, 0.5));
|
|
}
|
|
100% {
|
|
transform: scaleX(1.05) scaleY(1.1) translateY(-3px);
|
|
filter: drop-shadow(0 10px 25px rgba(242, 101, 34, 0.7));
|
|
}
|
|
}
|
|
|
|
.emoji-heart {
|
|
animation: heart-beat 1.2s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
@keyframes heart-beat {
|
|
0%, 100% { transform: scale(1); }
|
|
15% { transform: scale(1.15); }
|
|
30% { transform: scale(1); }
|
|
45% { transform: scale(1.1); }
|
|
}
|
|
|
|
.emoji-bolt {
|
|
animation: bolt-strike 3s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
@keyframes bolt-strike {
|
|
0%, 90%, 100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
filter: drop-shadow(0 0 20px rgba(245, 166, 35, 0.8));
|
|
}
|
|
93% {
|
|
opacity: 0.5;
|
|
transform: translateY(-5px) scale(1.2);
|
|
filter: drop-shadow(0 0 40px rgba(245, 166, 35, 1));
|
|
}
|
|
96% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.emoji-gem {
|
|
animation: gem-rotate 8s linear infinite;
|
|
}
|
|
|
|
@keyframes gem-rotate {
|
|
0% { transform: rotateY(0deg) rotateX(10deg); }
|
|
100% { transform: rotateY(360deg) rotateX(10deg); }
|
|
}
|
|
|
|
.emoji-globe {
|
|
animation: globe-spin 20s linear infinite;
|
|
}
|
|
|
|
@keyframes globe-spin {
|
|
0% { transform: rotateY(0deg); }
|
|
100% { transform: rotateY(360deg); }
|
|
}
|
|
|
|
/* Loaders with 3D */
|
|
.loaders-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.loaders-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.loader-card {
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-md);
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
border-radius: var(--space-md);
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.4s var(--ease-apple);
|
|
}
|
|
|
|
.loader-card:hover {
|
|
transform: translateZ(10px) scale(1.02);
|
|
}
|
|
|
|
.loader-name {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* 3D Spinner */
|
|
.loader-3d-spinner {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
border-top-color: var(--hot-pink);
|
|
animation: spin-3d 1s var(--ease-smooth) infinite;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
@keyframes spin-3d {
|
|
0% { transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg); }
|
|
100% { transform: rotateX(20deg) rotateY(360deg) rotateZ(360deg); }
|
|
}
|
|
|
|
/* 3D Pulse */
|
|
.loader-3d-pulse {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: var(--electric-blue);
|
|
border-radius: 50%;
|
|
animation: pulse-3d 2s var(--ease-smooth) infinite;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
@keyframes pulse-3d {
|
|
0%, 100% {
|
|
transform: scale(0.8) translateZ(0);
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
transform: scale(1.1) translateZ(20px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 3D Dots */
|
|
.loader-3d-dots {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.loader-3d-dots span {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--amber);
|
|
border-radius: 50%;
|
|
animation: dots-3d 1.4s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
.loader-3d-dots span:nth-child(1) { animation-delay: 0s; }
|
|
.loader-3d-dots span:nth-child(2) { animation-delay: 0.15s; }
|
|
.loader-3d-dots span:nth-child(3) { animation-delay: 0.3s; }
|
|
|
|
@keyframes dots-3d {
|
|
0%, 80%, 100% {
|
|
transform: scale(0.6) translateZ(0);
|
|
opacity: 0.4;
|
|
}
|
|
40% {
|
|
transform: scale(1) translateZ(15px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 3D Ring */
|
|
.loader-3d-ring {
|
|
width: 44px;
|
|
height: 44px;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
animation: ring-3d 3s linear infinite;
|
|
}
|
|
|
|
.loader-3d-ring::before,
|
|
.loader-3d-ring::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.loader-3d-ring::before {
|
|
border-top-color: var(--hot-pink);
|
|
border-right-color: var(--hot-pink);
|
|
animation: ring-inner 1.5s linear infinite;
|
|
}
|
|
|
|
.loader-3d-ring::after {
|
|
border-bottom-color: var(--electric-blue);
|
|
border-left-color: var(--electric-blue);
|
|
animation: ring-inner 1.5s linear infinite reverse;
|
|
}
|
|
|
|
@keyframes ring-3d {
|
|
0% { transform: rotateX(60deg) rotateZ(0deg); }
|
|
100% { transform: rotateX(60deg) rotateZ(360deg); }
|
|
}
|
|
|
|
@keyframes ring-inner {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 3D Cube */
|
|
.loader-3d-cube {
|
|
width: 34px;
|
|
height: 34px;
|
|
transform-style: preserve-3d;
|
|
animation: cube-rotate 4s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
.cube-face {
|
|
position: absolute;
|
|
width: 34px;
|
|
height: 34px;
|
|
background: var(--gradient-brand);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.cube-face:nth-child(1) { transform: translateZ(17px); }
|
|
.cube-face:nth-child(2) { transform: rotateY(180deg) translateZ(17px); }
|
|
.cube-face:nth-child(3) { transform: rotateY(90deg) translateZ(17px); }
|
|
.cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(17px); }
|
|
.cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(17px); }
|
|
.cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(17px); }
|
|
|
|
@keyframes cube-rotate {
|
|
0% { transform: rotateX(0deg) rotateY(0deg); }
|
|
25% { transform: rotateX(90deg) rotateY(90deg); }
|
|
50% { transform: rotateX(180deg) rotateY(180deg); }
|
|
75% { transform: rotateX(270deg) rotateY(270deg); }
|
|
100% { transform: rotateX(360deg) rotateY(360deg); }
|
|
}
|
|
|
|
/* Text Animations */
|
|
.text-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.text-demos {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3xl);
|
|
align-items: center;
|
|
}
|
|
|
|
.text-demo {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.text-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
opacity: 0.4;
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
/* Gradient Flow Text */
|
|
.gradient-flow {
|
|
font-size: clamp(55px, 8vw, 89px);
|
|
font-weight: 600;
|
|
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-shift 4s linear infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
to { background-position: 200% center; }
|
|
}
|
|
|
|
/* 3D Wave Text */
|
|
.wave-3d {
|
|
font-size: clamp(34px, 6vw, 55px);
|
|
font-weight: 600;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
perspective: 500px;
|
|
}
|
|
|
|
.wave-3d span {
|
|
display: inline-block;
|
|
background: var(--gradient-brand);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: wave-3d 3s var(--ease-smooth) infinite;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.wave-3d span:nth-child(1) { animation-delay: 0s; }
|
|
.wave-3d span:nth-child(2) { animation-delay: 0.06s; }
|
|
.wave-3d span:nth-child(3) { animation-delay: 0.12s; }
|
|
.wave-3d span:nth-child(4) { animation-delay: 0.18s; }
|
|
.wave-3d span:nth-child(5) { animation-delay: 0.24s; }
|
|
.wave-3d span:nth-child(6) { animation-delay: 0.30s; }
|
|
.wave-3d span:nth-child(7) { animation-delay: 0.36s; }
|
|
.wave-3d span:nth-child(8) { animation-delay: 0.42s; }
|
|
.wave-3d span:nth-child(9) { animation-delay: 0.48s; }
|
|
.wave-3d span:nth-child(10) { animation-delay: 0.54s; }
|
|
.wave-3d span:nth-child(11) { animation-delay: 0.60s; }
|
|
|
|
@keyframes wave-3d {
|
|
0%, 100% {
|
|
transform: translateY(0) translateZ(0) rotateX(0deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-15px) translateZ(20px) rotateX(10deg);
|
|
}
|
|
}
|
|
|
|
/* Morphing Shapes */
|
|
.morph-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.morph-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--space-3xl);
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.morph-3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.morph-blob {
|
|
width: 144px;
|
|
height: 144px;
|
|
background: var(--gradient-brand);
|
|
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
|
animation: blob-morph 15s var(--ease-smooth) infinite, blob-3d 10s var(--ease-smooth) infinite;
|
|
filter: drop-shadow(0 20px 40px rgba(255, 29, 108, 0.3));
|
|
}
|
|
|
|
@keyframes blob-morph {
|
|
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%; }
|
|
}
|
|
|
|
@keyframes blob-3d {
|
|
0%, 100% { transform: rotateX(0deg) rotateY(0deg); }
|
|
25% { transform: rotateX(10deg) rotateY(15deg); }
|
|
50% { transform: rotateX(-5deg) rotateY(-10deg); }
|
|
75% { transform: rotateX(5deg) rotateY(-5deg); }
|
|
}
|
|
|
|
.morph-ring {
|
|
width: 144px;
|
|
height: 144px;
|
|
border: 8px solid transparent;
|
|
border-radius: 50%;
|
|
background: linear-gradient(var(--black), var(--black)) padding-box,
|
|
var(--gradient-brand) border-box;
|
|
animation: ring-morph 8s var(--ease-smooth) infinite;
|
|
filter: drop-shadow(0 20px 40px rgba(41, 121, 255, 0.3));
|
|
}
|
|
|
|
@keyframes ring-morph {
|
|
0%, 100% {
|
|
transform: rotateX(0deg) rotateY(0deg) scale(1);
|
|
border-width: 8px;
|
|
}
|
|
25% {
|
|
transform: rotateX(30deg) rotateY(0deg) scale(1.05);
|
|
border-width: 12px;
|
|
}
|
|
50% {
|
|
transform: rotateX(0deg) rotateY(30deg) scale(1);
|
|
border-width: 6px;
|
|
}
|
|
75% {
|
|
transform: rotateX(-30deg) rotateY(-30deg) scale(0.95);
|
|
border-width: 10px;
|
|
}
|
|
}
|
|
|
|
.morph-square {
|
|
width: 89px;
|
|
height: 89px;
|
|
background: var(--violet);
|
|
animation: square-morph 12s var(--ease-smooth) infinite;
|
|
filter: drop-shadow(0 20px 40px rgba(156, 39, 176, 0.3));
|
|
}
|
|
|
|
@keyframes square-morph {
|
|
0%, 100% {
|
|
border-radius: 0;
|
|
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
|
|
}
|
|
25% {
|
|
border-radius: 30% 0 30% 0;
|
|
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
|
|
}
|
|
50% {
|
|
border-radius: 50%;
|
|
transform: rotateX(0deg) rotateY(45deg) rotateZ(90deg);
|
|
}
|
|
75% {
|
|
border-radius: 0 30% 0 30%;
|
|
transform: rotateX(-45deg) rotateY(45deg) rotateZ(135deg);
|
|
}
|
|
}
|
|
|
|
/* Hover Cards */
|
|
.hover-section {
|
|
background: var(--black);
|
|
}
|
|
|
|
.hover-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--space-md);
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.hover-card {
|
|
aspect-ratio: var(--phi);
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
border-radius: var(--space-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transform-style: preserve-3d;
|
|
transition: all 0.5s var(--ease-apple);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-card span {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
opacity: 0.5;
|
|
transition: opacity 0.3s var(--ease-apple);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hover-card:hover span {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-10px) translateZ(30px);
|
|
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.hover-tilt:hover {
|
|
transform: rotateX(10deg) rotateY(-10deg) translateZ(20px);
|
|
}
|
|
|
|
.hover-glow:hover {
|
|
box-shadow:
|
|
0 0 0 1px var(--hot-pink),
|
|
0 0 30px rgba(255, 29, 108, 0.3),
|
|
0 0 60px rgba(255, 29, 108, 0.1);
|
|
}
|
|
|
|
.hover-scale:hover {
|
|
transform: scale(1.05) translateZ(10px);
|
|
}
|
|
|
|
.hover-shine::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
105deg,
|
|
transparent 40%,
|
|
rgba(255, 255, 255, 0.1) 45%,
|
|
rgba(255, 255, 255, 0.2) 50%,
|
|
rgba(255, 255, 255, 0.1) 55%,
|
|
transparent 60%
|
|
);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.6s var(--ease-apple);
|
|
}
|
|
|
|
.hover-shine:hover::after {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.hover-border {
|
|
border: 1px solid transparent;
|
|
background:
|
|
linear-gradient(var(--black), var(--black)) padding-box,
|
|
linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0)) border-box;
|
|
}
|
|
|
|
.hover-border:hover {
|
|
background:
|
|
linear-gradient(var(--black), var(--black)) padding-box,
|
|
var(--gradient-brand) border-box;
|
|
}
|
|
|
|
.hover-flip:hover {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.hover-depth:hover {
|
|
transform: translateZ(40px) rotateX(5deg);
|
|
box-shadow:
|
|
0 40px 80px rgba(0, 0, 0, 0.5),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background: var(--black);
|
|
padding: var(--space-2xl);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-logo {
|
|
width: 55px;
|
|
height: 55px;
|
|
margin: 0 auto var(--space-md);
|
|
}
|
|
|
|
.footer-logo svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.footer-logo .road-hashes {
|
|
animation: spin-smooth 12s linear infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|
|
|
|
footer p {
|
|
font-size: 13px;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* Scroll Progress */
|
|
.scroll-progress {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2px;
|
|
background: var(--gradient-brand);
|
|
z-index: 9999;
|
|
width: 0%;
|
|
transition: width 0.1s linear;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1024px) {
|
|
.cards-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.loaders-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.hover-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.emoji-grid {
|
|
gap: var(--space-xl);
|
|
}
|
|
|
|
.emoji-3d {
|
|
font-size: 55px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
section {
|
|
padding: var(--space-2xl) var(--space-lg);
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.cards-grid,
|
|
.loaders-grid,
|
|
.hover-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.morph-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-xl);
|
|
}
|
|
|
|
h1 { font-size: 55px; }
|
|
h2 { font-size: 34px; }
|
|
|
|
.emoji-3d {
|
|
font-size: 44px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Scroll Progress -->
|
|
<div class="scroll-progress" id="scrollProgress"></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="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="#loaders">Loaders</a></li>
|
|
<li><a href="#text">Typography</a></li>
|
|
<li><a href="#morph">Shapes</a></li>
|
|
<li><a href="#hover">Interactions</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero">
|
|
<div class="hero-orbs">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
</div>
|
|
|
|
<div class="hero-logo">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle class="logo-ring" cx="50" cy="50" r="46" stroke="#FF1D6C" stroke-width="8"/>
|
|
<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"/>
|
|
<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)"/>
|
|
<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>
|
|
<path class="eye-top" d="M50 8C26.8 8 8 26.8 8 50H92C92 26.8 73.2 8 50 8Z" fill="#F5A623"/>
|
|
<path class="eye-bottom" d="M8 50C8 73.2 26.8 92 50 92C73.2 92 92 73.2 92 50H8Z" fill="#2979FF"/>
|
|
<circle class="pupil" cx="50" cy="50" r="16" fill="#000"/>
|
|
<circle class="pupil-highlight" cx="44" cy="44" r="5" fill="rgba(255,255,255,0.4)"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="hero-content">
|
|
<h1>Motion <span>System</span></h1>
|
|
<p>Fluid, purposeful animation crafted with golden ratio proportions and Apple-level refinement.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Emoji Icons -->
|
|
<section class="emoji-section">
|
|
<div class="section-header">
|
|
<span class="section-label">3D Icons</span>
|
|
<h2 class="section-title">Animated Symbols</h2>
|
|
<p class="section-desc">Every icon breathes with dimensional motion.</p>
|
|
</div>
|
|
|
|
<div class="emoji-grid">
|
|
<div class="emoji-3d emoji-eye">👁️</div>
|
|
<div class="emoji-3d emoji-rocket">🚀</div>
|
|
<div class="emoji-3d emoji-sparkle">✨</div>
|
|
<div class="emoji-3d emoji-fire">🔥</div>
|
|
<div class="emoji-3d emoji-heart">💜</div>
|
|
<div class="emoji-3d emoji-bolt">⚡</div>
|
|
<div class="emoji-3d emoji-gem">💎</div>
|
|
<div class="emoji-3d emoji-globe">🌐</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cards -->
|
|
<section class="cards-section">
|
|
<div class="section-header">
|
|
<span class="section-label">Components</span>
|
|
<h2 class="section-title">3D Cards</h2>
|
|
<p class="section-desc">Hover to experience depth and dimension.</p>
|
|
</div>
|
|
|
|
<div class="cards-grid">
|
|
<div class="card-3d">
|
|
<span class="card-icon">🎯</span>
|
|
<h4>Precision</h4>
|
|
<p>Every pixel placed with mathematical intent</p>
|
|
</div>
|
|
<div class="card-3d">
|
|
<span class="card-icon">⚡</span>
|
|
<h4>Performance</h4>
|
|
<p>GPU-accelerated, 60fps smooth</p>
|
|
</div>
|
|
<div class="card-3d">
|
|
<span class="card-icon">🌊</span>
|
|
<h4>Fluidity</h4>
|
|
<p>Organic motion that feels alive</p>
|
|
</div>
|
|
<div class="card-3d">
|
|
<span class="card-icon">💫</span>
|
|
<h4>Delight</h4>
|
|
<p>Micro-interactions that spark joy</p>
|
|
</div>
|
|
<div class="card-3d">
|
|
<span class="card-icon">🔮</span>
|
|
<h4>Depth</h4>
|
|
<p>True 3D transforms and perspective</p>
|
|
</div>
|
|
<div class="card-3d">
|
|
<span class="card-icon">🎨</span>
|
|
<h4>Harmony</h4>
|
|
<p>Colors that flow like music</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Loaders -->
|
|
<section class="loaders-section" id="loaders">
|
|
<div class="section-header">
|
|
<span class="section-label">Loading States</span>
|
|
<h2 class="section-title">3D Loaders</h2>
|
|
<p class="section-desc">Dimensional loading animations that captivate.</p>
|
|
</div>
|
|
|
|
<div class="loaders-grid">
|
|
<div class="loader-card">
|
|
<div class="loader-3d-spinner"></div>
|
|
<span class="loader-name">Orbit</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-3d-pulse"></div>
|
|
<span class="loader-name">Pulse</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-3d-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<span class="loader-name">Cascade</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-3d-ring"></div>
|
|
<span class="loader-name">Gyro</span>
|
|
</div>
|
|
<div class="loader-card">
|
|
<div class="loader-3d-cube">
|
|
<div class="cube-face"></div>
|
|
<div class="cube-face"></div>
|
|
<div class="cube-face"></div>
|
|
<div class="cube-face"></div>
|
|
<div class="cube-face"></div>
|
|
<div class="cube-face"></div>
|
|
</div>
|
|
<span class="loader-name">Cube</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Text -->
|
|
<section class="text-section" id="text">
|
|
<div class="section-header" style="text-align: center; max-width: 100%;">
|
|
<span class="section-label">Typography</span>
|
|
<h2 class="section-title">Kinetic Text</h2>
|
|
</div>
|
|
|
|
<div class="text-demos">
|
|
<div class="text-demo">
|
|
<div class="text-label">Gradient Flow</div>
|
|
<div class="gradient-flow">BlackRoad</div>
|
|
</div>
|
|
|
|
<div class="text-demo">
|
|
<div class="text-label">3D Wave</div>
|
|
<div class="wave-3d">
|
|
<span>M</span>
|
|
<span>O</span>
|
|
<span>T</span>
|
|
<span>I</span>
|
|
<span>O</span>
|
|
<span>N</span>
|
|
<span> </span>
|
|
<span>O</span>
|
|
<span>S</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Morphing -->
|
|
<section class="morph-section" id="morph">
|
|
<div class="section-header" style="text-align: center; max-width: 100%;">
|
|
<span class="section-label">Organic</span>
|
|
<h2 class="section-title">Shape Morphing</h2>
|
|
</div>
|
|
|
|
<div class="morph-container">
|
|
<div class="morph-3d">
|
|
<div class="morph-blob"></div>
|
|
</div>
|
|
<div class="morph-3d">
|
|
<div class="morph-ring"></div>
|
|
</div>
|
|
<div class="morph-3d">
|
|
<div class="morph-square"></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 States</h2>
|
|
<p class="section-desc">Micro-interactions with dimensional feedback.</p>
|
|
</div>
|
|
|
|
<div class="hover-grid">
|
|
<div class="hover-card hover-lift"><span>Lift</span></div>
|
|
<div class="hover-card hover-tilt"><span>Tilt</span></div>
|
|
<div class="hover-card hover-glow"><span>Glow</span></div>
|
|
<div class="hover-card hover-scale"><span>Scale</span></div>
|
|
<div class="hover-card hover-shine"><span>Shine</span></div>
|
|
<div class="hover-card hover-border"><span>Border</span></div>
|
|
<div class="hover-card hover-flip"><span>Flip</span></div>
|
|
<div class="hover-card hover-depth"><span>Depth</span></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="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>BlackRoad OS · Motion with intention</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Scroll progress
|
|
window.addEventListener('scroll', () => {
|
|
const scrollProgress = document.getElementById('scrollProgress');
|
|
const scrollTop = document.documentElement.scrollTop;
|
|
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
|
const progress = (scrollTop / scrollHeight) * 100;
|
|
scrollProgress.style.width = progress + '%';
|
|
});
|
|
|
|
// 3D tilt on mouse move for cards
|
|
document.querySelectorAll('.card-3d').forEach(card => {
|
|
card.addEventListener('mousemove', (e) => {
|
|
const rect = card.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
const rotateX = (y - centerY) / 10;
|
|
const rotateY = (centerX - x) / 10;
|
|
card.style.transform = `translateZ(20px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
|
});
|
|
|
|
card.addEventListener('mouseleave', () => {
|
|
card.style.transform = 'translateZ(0) rotateX(0) rotateY(0)';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|