Hugging Face's logo

Spaces:
RAM2106
/
VibeVoice
Sleeping

App Files Community
VibeVoice
File size: 3,497 Bytes
cd5198d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
@import "tailwindcss";

/* ==========================================================================
   VibeVoice React Studio CSS Styling
   Combines Tailwind v4 utility engine with custom high-end visuals and glows
   ========================================================================== */

@layer utilities {
  .text-neon-cyan {
    color: hsl(185, 95%, 48%);
    text-shadow: 0 0 10px hsla(185, 95%, 48%, 0.4);
  }
  
  .text-neon-purple {
    color: hsl(265, 88%, 64%);
    text-shadow: 0 0 10px hsla(265, 88%, 64%, 0.4);
  }
  
  .text-neon-pink {
    color: hsl(330, 92%, 60%);
    text-shadow: 0 0 10px hsla(330, 92%, 60%, 0.4);
  }
  
  .bg-glass {
    background: rgba(13, 17, 28, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  }
  
  .bg-glass-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
  }
  
  .bg-glass-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* Animations */
@keyframes orbPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes orbSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes orbGlowScale {
  0% { transform: scale(0.95); opacity: 0.4; }
  100% { transform: scale(1.2); opacity: 0.75; }
}

@keyframes waveExpand {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes floatGlow {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(100px, 80px) scale(1.15); }
  100% { transform: translate(-50px, 150px) scale(0.9); }
}

/* Classes for visual states */
.animate-float-glow-1 {
  animation: floatGlow 25s infinite alternate ease-in-out;
}

.animate-float-glow-2 {
  animation: floatGlow 30s infinite alternate-reverse ease-in-out;
}

/* Custom Orb styling states */
.orb-state-idle {
  background: radial-gradient(circle, #00f2fe 0%, rgba(0, 150, 255, 0.3) 100%);
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.35);
  animation: orbPulse 4s infinite ease-in-out;
}

.orb-state-thinking {
  background: radial-gradient(circle, #fff 0%, #a259ff 70%, #00f2fe 100%);
  box-shadow: 0 0 35px rgba(162, 89, 255, 0.35);
  animation: orbSpin 2s infinite linear, orbPulse 1s infinite ease-in-out;
}

.orb-state-speaking {
  background: radial-gradient(circle, #fff 0%, #ff5c8d 60%, #a259ff 100%);
  box-shadow: 0 0 30px rgba(255, 92, 141, 0.35);
  animation: orbPulse 0.4s infinite ease-in-out;
}

.orb-state-listening {
  background: radial-gradient(circle, #fff 0%, #00e673 70%);
  box-shadow: 0 0 25px rgba(0, 230, 115, 0.4);
  animation: orbPulse 1.2s infinite ease-in-out;
}

/* Scrollbar customizations */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Custom Modal animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-up {
  animation: scaleUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}