snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: animate homepage hero words

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-05-16 00:10:58 +02:00
parent 1dae5cd9ab
commit 595e9baf40
2 changed files with 97 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.html
+11 -2
View File
@@ -23,7 +23,7 @@
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<body class="home-page">
<header class="site-header">
<nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="Pi Web home">Pi Web</a>
@@ -41,7 +41,16 @@
<div class="container hero-grid">
<div>
<p class="eyebrow"><span class="pulse"></span> A cockpit for agentic development</p>
<h1>Your agents keep working. <span class="gradient-text">You just need a browser.</span></h1>
<h1>
<span class="title-context">Your agents keep working.</span>
<span class="gradient-text intro-target" aria-label="You just need a browser.">
<span class="intro-word" style="--i: 0">You</span>
<span class="intro-word" style="--i: 1">just</span>
<span class="intro-word" style="--i: 2">need</span>
<span class="intro-word" style="--i: 3">a</span>
<span class="intro-word" style="--i: 4">browser.</span>
</span>
</h1>
<p class="hero-lede">
Pi Web runs Pi Coding Agent sessions in real server-side workspaces, keeps them alive when your browser
leaves, and gives you a fast web surface to supervise, redirect, and review the work.
docs/styles.css
+86
View File
@@ -44,6 +44,92 @@ body::after {
background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3));
}
.home-page .site-header,
.home-page .site-footer,
.home-page .title-context,
.home-page .hero .eyebrow,
.home-page .hero-lede,
.home-page .hero-actions,
.home-page .hero-stats,
.home-page .terminal,
.home-page main > section:not(.hero) {
opacity: 0;
animation: page-reveal 700ms ease-out 2.45s forwards;
}
.intro-target {
display: inline;
}
.intro-word {
display: inline-block;
opacity: 0;
transform: translateY(-42vh);
animation: word-drop 640ms cubic-bezier(0.18, 0.88, 0.22, 1.08) forwards;
animation-delay: calc(140ms + (var(--i) * 190ms));
color: var(--intro-color, var(--text));
}
.intro-word:nth-child(1) {
--intro-color: #ffffff;
}
.intro-word:nth-child(2) {
--intro-color: #b7a2ff;
}
.intro-word:nth-child(3) {
--intro-color: var(--brand-2);
}
.intro-word:nth-child(4) {
--intro-color: var(--brand);
}
.intro-word:nth-child(5) {
--intro-color: var(--brand-3);
}
@keyframes word-drop {
0% {
opacity: 0;
transform: translateY(-42vh);
}
72% {
opacity: 1;
transform: translateY(0.08em);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes page-reveal {
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.home-page .site-header,
.home-page .site-footer,
.home-page .title-context,
.home-page .hero .eyebrow,
.home-page .hero-lede,
.home-page .hero-actions,
.home-page .hero-stats,
.home-page .terminal,
.home-page main > section:not(.hero),
.intro-word {
opacity: 1;
transform: none;
animation: none;
}
}
a {
color: inherit;
text-decoration: none;