arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

feat(chat-ui): add animation and utility CSS

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-04-12 13:48:23 +02:00
parent a0bbbe15ca
commit e80a1018ae
No known key found for this signature in database
1 changed files with 100 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
packages/chat-ui/src/chat-ui.css Normal file
View file

@ -0,0 +1,100 @@
/* @xtablo/chat-ui — Animations and utility classes */
/* ─── Message entry ─────────────────────────────────────────────── */
@keyframes chat-message-enter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Toolbar entrance ──────────────────────────────────────────── */
@keyframes chat-toolbar-enter {
from { opacity: 0; transform: scale(0.95) translateY(4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ─── Reaction pop ──────────────────────────────────────────────── */
@keyframes chat-reaction-pop {
0% { transform: scale(0); opacity: 0; }
70% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
/* ─── Typing indicator dots ─────────────────────────────────────── */
@keyframes chat-typing-pulse {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-4px); }
}
/* ─── Cursor blink (streaming) ──────────────────────────────────── */
@keyframes chat-cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ─── Read receipt status color transition ───────────────────────── */
@keyframes chat-status-read-in {
from { color: var(--color-muted-foreground); }
to { color: var(--color-primary); }
}
/* ─── Utility classes ───────────────────────────────────────────── */
@layer base {
.chat-message {
animation: chat-message-enter 250ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
.chat-typing-dot {
animation: chat-typing-pulse 1.4s ease-in-out infinite;
}
.chat-toolbar-enter {
transform-origin: bottom center;
}
.group\/message:hover .chat-toolbar-enter {
animation: chat-toolbar-enter 150ms ease-out;
}
.chat-reaction-pop {
animation: chat-reaction-pop 200ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
.chat-status-read {
animation: chat-status-read-in 400ms ease-out;
}
.chat-streaming-cursor {
animation: chat-cursor-blink 1s step-end infinite;
}
.chat-content-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 12px;
overflow: hidden;
}
.chat-drop-overlay {
position: absolute;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in oklch, var(--color-background) 80%, transparent);
border: 2px dashed var(--color-primary);
border-radius: 12px;
backdrop-filter: blur(4px);
}
}
/* ─── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.chat-message,
.chat-typing-dot,
.chat-toolbar-enter,
.chat-reaction-pop,
.chat-status-read {
animation: none;
}
}