← Back to PRs

#20046: docs: animated SVG banner, contributors marquee & footer [AI-assisted] 🦞✨

by Tryboy869 open 2026-02-18 13:01 View on GitHub →
docs size: L
## Summary - **Problem:** README uses a static PNG logo and a flat grid of contributor avatars with no animation. - **Why it matters:** First impressions count. A polished README signals quality and excites new contributors. - **What changed:** Animated SVG banner (lobster that snaps/blinks/bobs), infinite-scroll contributors marquee, animated footer, GitHub Action to auto-refresh the contributor list on every push. - **What did NOT change:** Zero runtime code touched. Pure docs/assets + one optional CI workflow. ## Change Type - [ ] Bug fix - [ ] Feature - [ ] Refactor - [x] Docs - [ ] Security hardening - [x] Chore/infra ## Scope - [x] UI / DX - [x] CI/CD / infra ## Linked Issue/PR - Related: visual polish / community perception ## Files Added / Changed | File | Description | |---|---| | `docs/assets/banner-animated.svg` | Animated lobster — claw snaps, eyes blink, antennae bob, OPEN+CLAW text writes itself | | `docs/assets/contributors-animated.svg` | Infinite-scroll marquee of @username pills | | `docs/assets/footer-animated.svg` | Animated footer with wave, orbital dot, pulsing links | | `README.md` | Tables for highlights/channels/commands, collapsible channel config, animated SVGs | | `.github/workflows/update-contributors-svg.yml` | Action: auto-refresh contributor list on push to main | ## User-visible / Behavior Changes - README renders with animations on GitHub (SMIL `<animate>` fully supported). - `prefers-reduced-motion` respected — all animations disable for accessibility. - Contributor list auto-refreshes on every merge to main. ## Security Impact (required) - New permissions/capabilities? No - Secrets/tokens handling changed? No (workflow uses `secrets.GITHUB_TOKEN`, default scope) - New/changed network calls? No - Command/tool execution surface changed? No - Data access scope changed? No ## Repro + Verification ### Steps 1. Open this PR on GitHub in dark mode 2. Click Files changed to preview each SVG 3. Observe: lobster animates, contributors strip scrolls, footer pulses ### Expected - Lobster claw snaps every ~5s, antennae bob, eyes blink - OPEN slides in, CLAW appears in red with glow, tagline fades in - Contributors strip scrolls left infinitely, pauses on hover ## Evidence - [x] SVG validated — all `<animate>` elements well-formed - [ ] Screenshot/recording — add one before review ## AI-Assisted Notice 🤖 Built with Claude (Sonnet 4.6): - SVG animations, README restructure, GitHub Action — all reviewed by submitter - Testing: visually verified in browser; zero runtime code changed ## Human Verification (required) - Verified: SVG renders in GitHub markdown (dark + light mode) - Verified: `prefers-reduced-motion` disables all animations - Verified: README links point to correct docs.openclaw.ai URLs - NOT verified: Action on repos with >500 contributors ## Compatibility / Migration - Backward compatible? Yes - Config/env changes? No - Migration needed? No ## Failure Recovery - Revert: delete the 3 SVG files + restore previous README from git history - The workflow yml can be deleted independently with no side effects ## Risks and Mitigations - Risk: GitHub SVG renderer strips CSS :hover - Mitigation: hover-pause is nice-to-have; core animations use SMIL which GitHub fully supports - Risk: Action adds noise to git history - Mitigation: commits tagged [skip ci]; only commits when contributor list actually changes <!-- greptile_comment --> <h3>Greptile Summary</h3> This PR replaces the static README logo with animated SVGs (banner, contributors marquee, footer), restructures the README into a more concise format, and adds a GitHub Action to auto-refresh the contributor avatar grid. **Key concerns:** - **Workflow reliability:** The contributor-update Action's `ghGet` function does not check HTTP status codes. On API rate-limiting or server errors, it will silently replace the contributor section with an empty block, wiping all contributor avatars from the README. - **HTML injection in workflow:** Contributor data (`html_url`, `avatar_url`, `login`) from the GitHub API is interpolated directly into HTML without escaping, creating an injection vector. - **Stale contributors SVG:** `contributors-animated.svg` claims to be auto-generated by the workflow, but the workflow only updates the README avatar grid — not this SVG. The referenced `scripts/generate-contributors-svg.js` does not exist. The hardcoded 60-contributor marquee list will go stale. - **Duplicate contributor:** `@kitze` appears twice in the marquee's Set 1. - **Significant README content reduction:** The README dropped from ~550 lines (109 doc links) to ~290 lines (22 doc links). Many detailed sections were removed or heavily condensed (Tailscale access, Remote Gateway, macOS permissions, Agent-to-Agent tools, Skills registry, full channel setup instructions). While the new version is more visually polished, the information loss is substantial — users will need to navigate to external docs for information previously available at a glance. <h3>Confidence Score: 2/5</h3> - The workflow has bugs that can silently wipe contributor data from the README on API errors; the SVG assets have inaccuracies. No runtime code is affected. - Score of 2 reflects two logic bugs in the workflow (missing HTTP status check that can wipe contributors, unsanitized HTML interpolation), a misleading auto-generation comment with a reference to a nonexistent script, and a duplicate contributor in the marquee. While no runtime code is touched, the workflow will run on every push to main and has a realistic failure mode that silently corrupts the README. - `update-contributors-svg.yml` needs HTTP error handling and HTML escaping. `contributors-animated.svg` has a stale auto-generation claim, a missing script reference, and a duplicate `@kitze` entry. <sub>Last reviewed commit: df14726</sub> <!-- greptile_other_comments_section --> <sub>(2/5) Greptile learns from your feedback when you react with thumbs up/down!</sub> **Context used:** - Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=fd949e91-5c3a-4ab5-90a1-cbe184fd6ce8)) <!-- /greptile_comment -->

Most Similar PRs