Skip to content

docs: update outdated imgur hero with self-hosted animated demo#3081

Open
livlign wants to merge 1 commit intocmderdev:masterfrom
livlign:docs/add-animated-hero
Open

docs: update outdated imgur hero with self-hosted animated demo#3081
livlign wants to merge 1 commit intocmderdev:masterfrom
livlign:docs/add-animated-hero

Conversation

@livlign
Copy link
Copy Markdown

@livlign livlign commented Apr 22, 2026

Summary

  • Replaces the external imgur-hosted hero screenshot (http://i.imgur.com/g1nNf0I.png) with a self-hosted animated GIF at images/hero.gif.
  • The imgur link is a linkrot liability — if the asset is purged, the README breaks silently. Committing the hero into the repo removes the external dependency.
  • The new hero shows a realistic cmder session in the Monokai palette: a portable %CMDER_ROOT%, a git log, then four rotating prompts demonstrating the bundled unix tools (curl, where), clink readline (clink --version), and git (git pull). 1200×500, 135 KB, 10 s loop.

Preview: once this branch is pushed, GitHub renders ./images/hero.gif inline in the README at the same spot the imgur screenshot used to sit.

Test plan

  • Diff renders correctly on GitHub (README image swap)
  • images/hero.gif loads at the README path (check on the PR view)
  • No other files touched (only README.md + the new image)

The previous hero was a static PNG hosted on imgur
(http://i.imgur.com/g1nNf0I.png). External image hosts are a linkrot
liability — if imgur purges the asset the README breaks silently.

This commit adds images/hero.gif (1200x500, 135 KB) and updates the
README to reference the local path. The animation shows a realistic
cmder session in the Monokai palette: portable %CMDER_ROOT%, git log,
then four rotating prompts that showcase the bundled unix tools and
clink readline integration.
@DRSDavidSoft
Copy link
Copy Markdown
Contributor

@livlign Thank you for the amazing hero animation! 👍🏻 ❤️

We have been meaning to update the image, and it looks amazing 🎉
I need to perform some modifications first, then this LGTM!

@DRSDavidSoft
Copy link
Copy Markdown
Contributor

@livlign Could you please specify what assets (incl. font) you used to create the animated hero?
Even though the .GIF animation is only ~135KiB, I would prefer it if an .SVG-based version could be built as well.

@DRSDavidSoft DRSDavidSoft self-assigned this Apr 30, 2026
@livlign
Copy link
Copy Markdown
Author

livlign commented Apr 30, 2026

@DRSDavidSoft Thank you for reviewing!
I created this hero with my Claude skill repo-visuals. I generated a HTML/CSS animation, then exported to the GIF version.
Fonts: JetBrains Mono for the terminal text, Bricolage Grotesque for the headline.
Color palette: Monokai-derived — #272822 background, #a6e22e green, #f92672 magenta, #66d9ef cyan, #fd971f orange.
Imagery: none — the terminal chrome, prompts, and git log output are all pure HTML/CSS.
If you want, I can commit the source HTML file into the PR as well, so it's convenient for anyone to tweak the hero afterwards.

About the SVG — that'll be possible, but I need to ask a couple of questions first:

  1. Would you prefer a static SVG (captured at a specific frame, e.g. the git pull or clink --version moment) or an animated SVG? Note that the animated version won't be byte-identical to the GIF — the typewriter and prompt rotation would need to be re-authored as SVG primitives.
  2. Should I commit both the GIF and the SVG, and keep the README using the GIF as it does now, or would you prefer a different arrangement (e.g. SVG as primary, GIF as fallback, or just only one of them)?

@DRSDavidSoft
Copy link
Copy Markdown
Contributor

@livlign Thank you for the exact details!

I generated a HTML/CSS animation, then exported to the GIF version [...] f you want, I can commit the source HTML file into the PR as well, so it's convenient for anyone to tweak the hero afterwards.

Yes, please, ideally, we would like to re-use the same hero on the website's code as well, so that it could be displayed on cmder.app, too.

In fact, I've been considering an "interactive" version of the console in a test branch I made several years ago, and I would prefer to base that work against the generated HTML/CSS that you made using Claude, for an updated look and feel.

Additionally, I would prefer an HTML/CSS or SVG solution over GIF, since:

  • they're easier to tweak and maintain
  • they look good even on high-DPI screens

As it is now, the generated hero animation needs a bit of tweaking as well to look like a "Windows Terminal" app, instead of a macOS terminal one. It's a great start for the modernization of the hero animation! 👍🏻

Would you prefer a static SVG (captured at a specific frame, e.g. the git pull or clink --version moment) or an animated SVG?

I'm aiming for an animated SVG instead of a static one, but other Cmder developers/maintainers can also weigh in as well. I understand that the SVG code wouldn't be byte-identical to the GIF, but I was hoping that conversion from the pure HTML/CSS would be a task with less effort involved. I guess it would be best first to share the generated HTML/CSS as a raw .zip attachment in this PR, instead of committing them right away as I could investigate and have a look

(also, sorry if it would take some time for me to fully review and integrate it, as I am busy with some other aspects of the project, but I'm super interested to integrate this Claude-generated hero animation into both the README and website, so thank you for any help and the contribution!)

Should I commit both the GIF and the SVG, and keep the README using the GIF as it does now, or would you prefer a different arrangement (e.g. SVG as primary, GIF as fallback, or just only one of them)?

I'm thinking in terms of a CI/CD build system that would automatically generate the final resulting animation (be it SVG, GIF or a combination of both) using the GitHub actions infrastructure. Meaning that if/when a developer decides to make a change and tweak the parameters (for e.g. choosing the newer Atom Dark color scheme instead of the current Monokai-based one), then the result would be automatically built without a manual human involvement.


For now, let's keep things simple and simply have a look at the source files, and we can decide about the best way to integrate this into the Cmder project's documentation that would keep these requirements in mind.

Sorry about the long wall of text, and thank you for the contribution! 🙏🏻 👌🏻

@DRSDavidSoft DRSDavidSoft added 👩‍🔬 Status: In Progress Good first issue New contributors may find this a good place to get involved from 🤝 Help wanted labels May 3, 2026
@DRSDavidSoft DRSDavidSoft changed the title docs: replace imgur hero with self-hosted animated demo docs: update outdated imgur hero with self-hosted animated demo May 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants