Skip to content

Commit 2641f2a

Browse files
GaabDevWebGaabDevWeb
committed
Enhance entrance animation and globe interaction features
- Updated `entrance.css` to improve styling for interactive elements and tooltips in the entrance animation. - Refactored `entrance.js` to integrate a new landing globe controller, enhancing the globe's interaction and animation logic. - Improved `globe.js` to support hover effects and dynamic interactions, including face picking and hover state management. - Removed outdated `globe-interaction.js` and `globe.js` from the playground, consolidating functionality into the main globe rendering logic. - Updated `ui.js` and `ChatView.js` to trigger landing events and manage state transitions effectively. - Enhanced the overall user experience during the entrance phase with improved animations and interactions.
1 parent dea5206 commit 2641f2a

13 files changed

Lines changed: 1135 additions & 835 deletions

File tree

‎.playwright-mcp/console-2026-06-28T12-26-01-736Z.log‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[ 8370ms] [ERROR] [ACL] Falha no stream: TypeError: network error @ http://127.0.0.1:8001/src/api.js:196
2+
[ 139651ms] [ERROR] [ACL] Falha no stream: TypeError: network error @ http://127.0.0.1:8001/src/api.js:196

‎.playwright-mcp/page-2026-06-28T12-43-24-475Z.yml‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
- generic [ref=e2]:
2+
- complementary "Histórico de conversas" [ref=e3]:
3+
- generic [ref=e4]:
4+
- button "Recolher conversas" [expanded] [ref=e5] [cursor=pointer]:
5+
- img [ref=e6]
6+
- generic [ref=e8]: Conversas
7+
- button "Nova" [ref=e9] [cursor=pointer]
8+
- searchbox "Buscar conversas" [ref=e10]
9+
- list [ref=e11]:
10+
- generic [ref=e12]:
11+
- listitem "oi" [ref=e13] [cursor=pointer]:
12+
- generic [ref=e14]: oi
13+
- generic:
14+
- button "Renomear conversa":
15+
- img
16+
- button "Excluir conversa":
17+
- img
18+
- generic [ref=e15]:
19+
- listitem "Nova conversa" [ref=e16] [cursor=pointer]:
20+
- generic [ref=e17]: Nova conversa
21+
- generic:
22+
- button "Renomear conversa":
23+
- img
24+
- button "Excluir conversa":
25+
- img
26+
- generic [ref=e18]:
27+
- banner [ref=e19]:
28+
- generic "oi" [ref=e20]
29+
- log "Histórico de mensagens" [ref=e21]:
30+
- generic:
31+
- generic:
32+
- paragraph: KERNEL ASSISTANT
33+
- heading [level=1]
34+
- generic [ref=e22]:
35+
- generic [ref=e23]: Você · 09:43
36+
- generic [ref=e24]: oi
37+
- generic:
38+
- button "Copiar"
39+
- generic [ref=e25]:
40+
- generic [ref=e26]: Kernel · 09:43
41+
- paragraph [ref=e28]: "Falha de conexão: network error"
42+
- generic:
43+
- button "Copiar resposta"
44+
- button "Regenerar última resposta": Regenerar
45+
- region "Como usar o Kernel" [ref=e29]:
46+
- generic [ref=e30]:
47+
- paragraph [ref=e31]: Primeira vez aqui?
48+
- list [ref=e32]:
49+
- listitem [ref=e33]:
50+
- text: Escolha a
51+
- strong [ref=e34]: matéria
52+
- text: no botão de grade à esquerda.
53+
- listitem [ref=e35]: Escreva sua dúvida — Enter envia.
54+
- listitem [ref=e36]:
55+
- text: Confira as
56+
- strong [ref=e37]: fontes
57+
- text: abaixo de cada resposta.
58+
- button "Entendi" [ref=e38] [cursor=pointer]

‎frontend/assets/css/entrance.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,109 @@
1212
display: block;
1313
z-index: 0;
1414
pointer-events: none;
15+
touch-action: none;
16+
user-select: none;
17+
-webkit-user-select: none;
18+
}
19+
20+
#globe.is-interactive {
21+
pointer-events: auto;
22+
}
23+
24+
#globe.is-dismissed {
25+
pointer-events: none;
26+
}
27+
28+
/* Na landing, cliques atravessam o shell até o globo (canvas z-index 0). */
29+
body.ui-landing .app-shell {
30+
pointer-events: none;
31+
}
32+
33+
body.ui-landing .app-shell > .conversation-sidebar,
34+
body.ui-landing .app-shell > .sidebar-overlay,
35+
body.ui-landing .app .header,
36+
body.ui-landing .app .input-area,
37+
body.ui-landing .app .entrance-discipline-pills,
38+
body.ui-landing .app .entrance-suggestion {
39+
pointer-events: auto;
40+
}
41+
42+
#globe.is-grabbable { cursor: grab; }
43+
#globe.is-grabbing { cursor: grabbing; }
44+
#globe.is-plate-hover { cursor: pointer; }
45+
46+
/* Tooltip premium — placas do globo */
47+
.globe-tooltip {
48+
position: fixed;
49+
z-index: 20;
50+
max-width: min(280px, calc(100vw - 28px));
51+
padding: 14px 16px 13px;
52+
border-radius: 12px;
53+
border: 1px solid rgba(255, 255, 255, 0.1);
54+
background: rgba(24, 24, 27, 0.92);
55+
backdrop-filter: blur(14px);
56+
-webkit-backdrop-filter: blur(14px);
57+
box-shadow: 0 10px 36px rgba(0, 0, 0, 0.42);
58+
pointer-events: none;
59+
opacity: 0;
60+
transform: translateY(10px) scale(0.965);
61+
filter: blur(4px);
62+
transition:
63+
opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
64+
transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
65+
filter 0.34s cubic-bezier(0.22, 1, 0.36, 1);
66+
will-change: opacity, transform, filter;
67+
}
68+
69+
.globe-tooltip.is-visible {
70+
opacity: 1;
71+
transform: translateY(0) scale(1);
72+
filter: blur(0);
73+
}
74+
75+
.globe-tooltip.is-leaving {
76+
opacity: 0;
77+
transform: translateY(6px) scale(0.975);
78+
filter: blur(3px);
79+
transition-duration: 0.28s;
80+
}
81+
82+
.globe-tooltip__body {
83+
transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
84+
}
85+
86+
.globe-tooltip.is-content-fading .globe-tooltip__body {
87+
opacity: 0.35;
88+
}
89+
90+
.globe-tooltip__label {
91+
display: block;
92+
font-size: 0.62rem;
93+
font-weight: 600;
94+
letter-spacing: 0.14em;
95+
text-transform: uppercase;
96+
color: #a1a1aa;
97+
margin-bottom: 4px;
98+
}
99+
100+
.globe-tooltip__label + .globe-tooltip__title {
101+
margin-bottom: 10px;
102+
}
103+
104+
.globe-tooltip__title {
105+
font-size: 0.92rem;
106+
font-weight: 600;
107+
line-height: 1.35;
108+
color: #e4e4e7;
109+
word-wrap: break-word;
110+
overflow-wrap: anywhere;
111+
}
112+
113+
.globe-tooltip__discipline {
114+
font-size: 0.84rem;
115+
font-weight: 500;
116+
line-height: 1.3;
117+
color: #f4f4f5;
15118
}
16119

17120
/* Keep all the real UI above the globe backdrop. */

‎frontend/src/components/ChatView.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export function createChatView({
5050
emptyState.style.display = "flex";
5151
emptyState.classList.remove("empty-state--dismissed");
5252
syncBodyUiState();
53+
window.dispatchEvent(new CustomEvent("kernel:show-landing"));
5354
}
5455

5556
function hideEmptyState() {

0 commit comments

Comments
 (0)