feat(docs): add animated SVG scenes to agent list cards#4
Open
Aniket-508 wants to merge 1 commit into
Open
Conversation
Redesign the agents list as cards with a per-agent looping SVG animation, title, and description. Animations live in a new agent-animations.tsx and use SMIL so they render server-side with no client bundle and adapt to light/dark via currentColor. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns the agents list (
AgentsList) as cards — each with a looping SVG animation, the agent's short title, and its description — replacing the previous plain underlined-link layout.components/agent-animations.tsxexportsAgentAnimation, which maps an agentslugto one of 18 hand-built scenes (deep search, browser, chat-with-youtube, etc.), falling back to the deep-search scene for unknown slugs.<animate>/<animateTransform>) rather than CSS/JS, so the whole set renders server-side with no client bundle.currentColorvia Tailwind text classes, so every scene adapts to light/dark automatically. All scenes share a 220×120 viewBox.agents-list.tsxnow renders bordered cards with a gradient animation header and a hover state.CI
pnpm check— 0 warnings, 0 errorspnpm typecheck— pass🤖 Generated with Claude Code