Repository navigation
docs(readme): animated feature demos, targeted screenshots, and a CLI cell - #6378
Merged
Merged
Conversation
All seven README feature images were identical full-window captures where each feature was a tiny sliver of the frame. Retaken via CDP against a staged demo org (real agent sessions), then cropped per-feature with the changelog beautifier pipeline and compressed with pngquant.
Contributor
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (9)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe README replaces four static feature images with animated GIFs and adds a Superset CLI feature section with scripting details, documentation, and a CLI demo. ChangesREADME feature showcase
Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
No issues found across 7 files
You’re at about 97% of the monthly reviewed-line limit. You may want to disable incremental reviews to conserve quota. Reviews will continue until that limit is exceeded. If you need help avoiding interruptions, please contact contact@cubic.dev.
Architecture diagram
sequenceDiagram
participant Dev as "Developer"
participant App as "Desktop App"
participant CDP as "CDP Protocol"
participant API as "Real Backend API"
participant Store as "Demo Data Store"
participant Shot as "Capture Pipeline"
participant Tool as "beautify-screenshot.ts"
participant PngOpt as "pngquant"
Note over Dev,PngOpt: README Feature Screenshot Capture Flow
Dev->>App: Stage demo org (2 projects, 5 workspaces)
App->>API: Create demo automations
API->>Store: Persist demo records
Store-->>API: Records created
API-->>App: Demo data ready
Dev->>App: Hide real sidebar (28 projects) & sessions
App-->>Dev: UI state isolated
Dev->>CDP: Navigate to feature view (1120x720 @2x)
CDP->>App: Render targeted UI state
App-->>CDP: Frame ready (real agent sessions, diff stats, spinners)
CDP->>Shot: Capture screenshot
Shot-->>Dev: Raw capture output
Dev->>Tool: Run flat-style crop & process
Tool->>Tool: Per-feature crop, dither backdrop
Tool-->>Dev: Processed image
Dev->>PngOpt: Optimize PNG
PngOpt-->>Dev: Final image (126-220 KB)
Dev->>App: Delete demo automations via API
App->>Store: Remove demo records
Store-->>App: Cleanup complete
App-->>Dev: Verify real data restored
Note over Dev,PngOpt: All 7 captures follow same pipeline with different feature targets
Contributor
🚀 Preview Deployment🔗 Preview Links
Preview updates automatically with new commits |
- parallel-workspaces cell is now a live GIF of Claude streaming a task with agent status updating in the sidebar - new "Superset CLI" feature row with a VHS-recorded terminal demo - all stills re-captured with perspective tilt and tighter feature zooms
Member
Author
|
Second pass — motion + flair:
GIF weights: agents-working.gif 690KB, cli-demo.gif 120KB. |
Kitenite
changed the title
…r zooms - agent-monitoring is now a GIF: the status dot flips from working to done as an agent finishes, next to a live diff-stat counter - terminal is a GIF: typing a follow-up with an @-file mention in the rich prompt editor beside a split shell - command-palette is a GIF: type-to-filter across workspace actions - diff-viewer, browser-ports, and automations re-rendered flat (no perspective tilt) from fresh captures
Member
Author
|
Third pass per feedback — no tilt, more motion: 5 of 8 feature cells are now GIFs:
Stills (diff-viewer, browser-ports, automations) re-rendered flat — tilt removed, fresh captures with tighter zooms. The diff still now shows a genuine side-by-side red/green refactor. Total GIF weight ~1.6MB. |
Kitenite
changed the title
This branch was previously deployed
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
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
apps/marketing/public/images/readme/). The old set was seven identical full-window captures of one busy 3-pane layout — the feature being sold was a tiny sliver of each frame. Each image is now a targeted capture where the feature reads large.Why / Context
The README is our GitHub landing page and the repo converts poorly relative to its traffic. Competitor READMEs (orca, herdr) treat the README as a product landing page with one focused visual per feature. Ours had a feature wall, but every cell showed the same screenshot at full-window zoom.
How They Were Made
.github/prompts/beautify-screenshot.ts(flat style, per-feature crop, dither backdrop) andpngquant.Per-image targeting:
Testing
Summary by cubic
Refreshes the README feature gallery with tighter, flat screenshots and five animated demos so each feature reads at a glance. Replaces static, zoomed‑out stills (some tilted) with focused crops, adds a new Superset CLI row, and trims leaked command‑palette frames from the terminal GIF.
Written for commit eaeae5f. Summary will update on new commits.