Skip to content

docs: play a short entrance animation in the home page hero #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shenxianpeng merged 1 commit into from
Sep 30, 2026
Merged

docs: play a short entrance animation in the home page hero #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/overrides/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
<h1 class="cl-hero__title">
C/C++ pull requests<br>
that arrive<br>
<span class="cl-circled"><svg class="cl-circled__ring" viewBox="0 0 400 100" preserveAspectRatio="none" aria-hidden="true"><path d="M 318 10 C 236 -4, 92 0, 36 22 C -4 38, 4 84, 108 92 C 214 100, 378 90, 394 56 C 402 36, 384 20, 350 12"/></svg><span class="cl-circled__text">already checked</span><svg class="cl-circled__check" viewBox="0 0 64 52" aria-hidden="true"><path d="M 6 28 L 22 44 L 58 6"/></svg></span>.
<span class="cl-circled"><svg class="cl-circled__ring" viewBox="0 0 400 100" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M 318 10 C 236 -4, 92 0, 36 22 C -4 38, 4 84, 108 92 C 214 100, 378 90, 394 56 C 402 36, 384 20, 350 12"/></svg><span class="cl-circled__text">already checked</span><svg class="cl-circled__check" viewBox="0 0 64 52" aria-hidden="true"><path pathLength="1" d="M 6 28 L 22 44 L 58 6"/></svg></span>.
</h1>
<p class="cl-lead">
cpp-linter runs clang-format and clang-tidy on the files each pull
Expand All @@ -99,7 +99,7 @@ <h1 class="cl-hero__title">
</div>

<div class="cl-visual" role="img" aria-label="A review comment from cpp-linter-action suggests a clang-tidy fix, and auto-fix pushes the clang-format fixes as a commit.">
<svg class="cl-visual__ring" viewBox="0 0 600 600" preserveAspectRatio="none" aria-hidden="true"><path d="M 512 112 C 460 56, 380 30, 300 30 C 150 30, 36 146, 36 300 C 36 452, 150 570, 302 570 C 454 570, 566 452, 566 300 C 566 250, 552 206, 532 172"/></svg>
<svg class="cl-visual__ring" viewBox="0 0 600 600" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M 512 112 C 460 56, 380 30, 300 30 C 150 30, 36 146, 36 300 C 36 452, 150 570, 302 570 C 454 570, 566 452, 566 300 C 566 250, 552 206, 532 172"/></svg>
<span class="cl-visual__pin"><span class="cl-ico">{% include ".icons/octicons/pin-16.svg" %}</span>clang-format 21 · clang-tidy 21</span>
<div class="cl-review">
<div class="cl-review__file">
Expand Down Expand Up @@ -132,7 +132,7 @@ <h1 class="cl-hero__title">
</div>
</div>
</div>
<svg class="cl-visual__check" viewBox="0 0 140 120" aria-hidden="true"><path d="M 14 70 L 44 100 L 128 12"/></svg>
<svg class="cl-visual__check" viewBox="0 0 140 120" aria-hidden="true"><path pathLength="1" d="M 14 70 L 44 100 L 128 12"/></svg>
<div class="cl-fixchip">
<span class="cl-fixchip__icon">{% include ".icons/material/check-bold.svg" %}</span>
<span class="cl-fixchip__text">
Expand Down
132 changes: 132 additions & 0 deletions docs/stylesheets/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -961,6 +961,138 @@
}
}

/*
* Hero entrance, played once on load: the review card rises, the diff and the
* clang-tidy suggestion come in, "Commit suggestion" is pressed, the auto-fix
* commit pops up, and the rings and checks are drawn. It ends on the static
* picture; with reduced motion the picture is shown as is.
*/
@media (prefers-reduced-motion: no-preference) {
.cl-hero .cl-circled__ring path,
.cl-hero .cl-circled__check path,
.cl-visual__ring path,
.cl-visual__check path {
animation: cl-draw 1s cubic-bezier(0.6, 0, 0.3, 1) both;
}

.cl-hero .cl-circled__ring path {
animation-duration: 0.8s;
animation-delay: 0.3s;
}

.cl-hero .cl-circled__check path {
animation-duration: 0.35s;
animation-delay: 1.05s;
}

.cl-visual__ring path {
animation-duration: 1.1s;
animation-delay: 0.1s;
}

.cl-visual__check path {
animation-duration: 0.4s;
animation-delay: 2s;
}

.cl-visual__pin {
animation: cl-slide-in 0.4s 0.35s ease-out both;
}

.cl-review {
animation: cl-rise 0.55s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.cl-review__diff .cl-diff__line {
animation: cl-slide-in 0.35s ease-out both;
}

.cl-review__diff .cl-diff__line:nth-child(1) {
animation-delay: 0.45s;
}

.cl-review__diff .cl-diff__line:nth-child(2) {
animation-delay: 0.55s;
}

.cl-review__diff .cl-diff__line:nth-child(3) {
animation-delay: 0.65s;
}

.cl-comment {
animation: cl-rise 0.5s 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.cl-comment .cl-fake-btn--primary {
animation: cl-press 0.7s 1.45s ease-out both;
}

.cl-fixchip {
animation: cl-pop 0.5s 1.7s cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
}
}

/*
* The paths have pathLength="1", but their strokes do not scale with the SVG,
* so on screen a path is 0.7 to 1.3 times that length. A dash of 1.5 covers
* it, and the last frame drops the dashes to end on the static stroke.
*/
@keyframes cl-draw {
0% {
stroke-dasharray: 1.5 1.5;
stroke-dashoffset: 1.55;
}

99% {
stroke-dasharray: 1.5 1.5;
stroke-dashoffset: 0;
}

100% {
stroke-dasharray: none;
stroke-dashoffset: 0;
}
}

@keyframes cl-rise {
from {
opacity: 0;
transform: translateY(18px);
}
}

@keyframes cl-slide-in {
from {
opacity: 0;
transform: translateX(-10px);
}
}

@keyframes cl-pop {
from {
opacity: 0;
transform: translateY(12px) scale(0.92);
}
}

@keyframes cl-press {
0% {
box-shadow: 0 0 0 0 rgba(64, 81, 181, 0.45);
}

30% {
transform: scale(0.95);
}

60% {
transform: scale(1);
}

100% {
box-shadow: 0 0 0 10px rgba(64, 81, 181, 0);
}
}

/* Tools */

.cl-tools {
Expand Down
Loading