ros/autocoder
1
0
Fork 0
mirror of https://github.com/leonvanzyl/autocoder.git synced 2026-01-30 06:12:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

add shimmer scanning effect to thought text

Browse Source
This commit is contained in:
Auto
2025-12-31 08:17:19 +02:00
parent 5cb78a6b43
commit f7f789ab81
2 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/components/AgentThought.tsx
View File

@@ -131,9 +131,12 @@ export function AgentThought({ logs, agentStatus }: AgentThoughtProps) {
)}
</div>
{/* Thought text with fade transition */}
{/* Thought text with fade transition + shimmer effect when running */}
<p
className="font-mono text-sm text-[var(--color-neo-text)] truncate transition-all duration-150 ease-out"
className={`
font-mono text-sm truncate transition-all duration-150 ease-out
${isRunning ? 'animate-shimmer' : 'text-[var(--color-neo-text)]'}
`}
style={{
opacity: textVisible ? 1 : 0,
transform: textVisible ? 'translateY(0)' : 'translateY(-4px)',

25
ui/src/styles/globals.css
View File

@@ -345,6 +345,15 @@
}
}
@keyframes shimmer {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
/* ============================================================================
Utilities Layer
============================================================================ */
@@ -370,6 +379,22 @@
animation: thoughtFade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.animate-shimmer {
background: linear-gradient(
90deg,
var(--color-neo-text) 0%,
var(--color-neo-text) 40%,
var(--color-neo-progress) 50%,
var(--color-neo-text) 60%,
var(--color-neo-text) 100%
);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shimmer 2s ease-in-out infinite;
}
.font-display {
font-family: var(--font-neo-display);
}