chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: overdrive landing page — live chat animation + scroll-driven reveals

Browse Source 
A) Live App Preview:
- Chat messages animate in with staggered timing (0.6s apart)
- Typing indicator with bouncing dots appears before AI response,
  then fades out as the response lines arrive
- Sidebar items stagger in during the entrance sequence
- Creates a "show don't tell" demo moment in the hero

B) Scroll-Driven Enhancements (@supports animation-timeline):
- Sections use CSS scroll-driven animations instead of JS IntersectionObserver
- Problem cards, feature cards, pricing cards, and step cards stagger
  within their parent as they enter the viewport
- Social proof bar has subtle parallax drift
- Falls back to existing JS-based reveal for Firefox/older browsers

Accessibility:
- prefers-reduced-motion removes all chat animations, shows content
  immediately, hides typing indicator entirely

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-30 02:13:41 +00:00
parent d67af71b4c
commit bc43f53633
2 changed files with 240 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/pages/LandingPage.tsx
View File

@@ -216,25 +216,40 @@ export default function LandingPage() {
</div>
<div className="landing-preview-canvas">
<div className="landing-mock-session">
<div className="landing-mock-chat-line">
<span className="label">You:</span>
<span className="text">User can&apos;t access shared drive after password reset</span>
<div className="landing-chat-animated" style={{ '--chat-index': 0 } as React.CSSProperties}>
<div className="landing-mock-chat-line">
<span className="label">You:</span>
<span className="text">User can&apos;t access shared drive after password reset</span>
</div>
</div>
<div className="landing-mock-chat-line">
<span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
<span className="text">This is likely a cached credential issue. Let&apos;s check a few things:</span>
<div className="landing-chat-animated" style={{ '--chat-index': 1 } as React.CSSProperties}>
<div className="landing-typing-indicator">
<span /><span /><span />
</div>
</div>
<div className="landing-mock-chat-line">
<span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
<span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
<div className="landing-chat-animated" style={{ '--chat-index': 2 } as React.CSSProperties}>
<div className="landing-mock-chat-line">
<span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
<span className="text">This is likely a cached credential issue. Let&apos;s check a few things:</span>
</div>
</div>
<div className="landing-mock-chat-line">
<span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
<span className="text">2. Open Credential Manager &rarr; remove saved entries for the share</span>
<div className="landing-chat-animated" style={{ '--chat-index': 3 } as React.CSSProperties}>
<div className="landing-mock-chat-line">
<span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
<span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
</div>
</div>
<div className="landing-mock-chat-line doc">
<span className="label">Auto-doc:</span>
<span className="text">3 steps captured &#10003;</span>
<div className="landing-chat-animated" style={{ '--chat-index': 4 } as React.CSSProperties}>
<div className="landing-mock-chat-line">
<span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
<span className="text">2. Open Credential Manager &rarr; remove saved entries for the share</span>
</div>
</div>
<div className="landing-chat-animated" style={{ '--chat-index': 5 } as React.CSSProperties}>
<div className="landing-mock-chat-line doc">
<span className="label">Auto-doc:</span>
<span className="text">3 steps captured &#10003;</span>
</div>
</div>
</div>
</div>