mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-02-01 06:53:36 +00:00
add shimmer scanning effect to thought text
This commit is contained in:
@@ -131,9 +131,12 @@ export function AgentThought({ logs, agentStatus }: AgentThoughtProps) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Thought text with fade transition */}
|
{/* Thought text with fade transition + shimmer effect when running */}
|
||||||
<p
|
<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={{
|
style={{
|
||||||
opacity: textVisible ? 1 : 0,
|
opacity: textVisible ? 1 : 0,
|
||||||
transform: textVisible ? 'translateY(0)' : 'translateY(-4px)',
|
transform: textVisible ? 'translateY(0)' : 'translateY(-4px)',
|
||||||
|
|||||||
@@ -345,6 +345,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
background-position: 200% center;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: -200% center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ============================================================================
|
/* ============================================================================
|
||||||
Utilities Layer
|
Utilities Layer
|
||||||
============================================================================ */
|
============================================================================ */
|
||||||
@@ -370,6 +379,22 @@
|
|||||||
animation: thoughtFade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
|
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-display {
|
||||||
font-family: var(--font-neo-display);
|
font-family: var(--font-neo-display);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user