lofty/landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(page): animate hero words individually and fix mobile background sizing
All checks were successful
Deploy to Cloudflare Pages / deploy (push) Successful in 26s
Details

Browse Source
This commit is contained in:
Sanil Chawla
2026-02-13 00:39:42 -08:00
parent a942ae91f2
commit bdd322a279
4 changed files with 57 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bun.lock
View File

@@ -11,6 +11,7 @@
"@biomejs/biome": "^2.3.10", "@biomejs/biome": "^2.3.10",
"@commitlint/cli": "^20.2.0", "@commitlint/cli": "^20.2.0",
"@commitlint/config-conventional": "^20.2.0", "@commitlint/config-conventional": "^20.2.0",
"chrome-devtools-mcp": "^0.17.0",
"commitizen": "^4.3.1", "commitizen": "^4.3.1",
"cz-git": "^1.12.0", "cz-git": "^1.12.0",
"lefthook": "^2.0.12", "lefthook": "^2.0.12",
@@ -352,6 +353,8 @@
"chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="], "chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
"chrome-devtools-mcp": ["chrome-devtools-mcp@0.17.0", "", { "bin": { "chrome-devtools-mcp": "build/src/index.js" } }, "sha512-vMi2zXq2ph2EG6amyyApcvuKJcEFj4cGK1XQVb6x8vQYHk8D9ZnSxdtFqD0cRnG7SbUOrg3GhjOZEJAD1dZWSQ=="],
"ci-info": ["ci-info@4.4.0", "", {}, "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg=="], "ci-info": ["ci-info@4.4.0", "", {}, "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg=="],
"cli-boxes": ["cli-boxes@3.0.0", "", {}, "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g=="], "cli-boxes": ["cli-boxes@3.0.0", "", {}, "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g=="],

1
package.json
View File

@@ -22,6 +22,7 @@
"@biomejs/biome": "^2.3.10", "@biomejs/biome": "^2.3.10",
"@commitlint/cli": "^20.2.0", "@commitlint/cli": "^20.2.0",
"@commitlint/config-conventional": "^20.2.0", "@commitlint/config-conventional": "^20.2.0",
"chrome-devtools-mcp": "^0.17.0",
"commitizen": "^4.3.1", "commitizen": "^4.3.1",
"cz-git": "^1.12.0", "cz-git": "^1.12.0",
"lefthook": "^2.0.12" "lefthook": "^2.0.12"

39
src/pages/index.astro
View File

@@ -3,7 +3,10 @@ import Layout from "../layouts/Layout.astro";
// const signupEndpoint = import.meta.env.PUBLIC_SIGNUP_ENDPOINT || "/api/signup"; // const signupEndpoint = import.meta.env.PUBLIC_SIGNUP_ENDPOINT || "/api/signup";
const heroLines = ["Talent, media, and tech", "for collective power"]; const heroWords = [
["Talent,", "media,", "and", "tech"],
["for", "collective", "power"],
];
const pillars = [ const pillars = [
{ {
@@ -43,8 +46,15 @@ const pillars = [
</header> </header>
<div class="container hero-inner"> <div class="container hero-inner">
<h1 class="hero-headline"> <h1 class="hero-headline">
{heroLines.map((line, i) => ( {heroWords.map((group, groupIndex) => (
<span class="line-reveal" style={`--i: ${i}`}>{line}</span> <span class="word-line">
{group.map((word, wordIndex) => {
const wordNum = heroWords.slice(0, groupIndex).flat().length + wordIndex;
return (
<span class="word-reveal" style={`--i: ${wordNum}`}>{word}</span>
);
})}
</span>
))} ))}
</h1> </h1>
<p class="hero-sub"> <p class="hero-sub">
@@ -191,6 +201,8 @@ const pillars = [
.hero-bg img { .hero-bg img {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 100vh;
min-height: 100dvh;
object-fit: cover; object-fit: cover;
object-position: center center; object-position: center center;
filter: blur(2px) saturate(0.15) brightness(1.2); filter: blur(2px) saturate(0.15) brightness(1.2);
@@ -255,13 +267,28 @@ const pillars = [
line-height: 1.05; line-height: 1.05;
} }
.line-reveal { .word-line {
display: block; display: inline;
}
.word-reveal {
display: inline-block;
opacity: 0; opacity: 0;
filter: blur(10px); filter: blur(10px);
transform: translateY(0.4em); transform: translateY(0.4em);
animation: line-clip 1.4s var(--ease-out-quart) forwards; animation: line-clip 1.4s var(--ease-out-quart) forwards;
animation-delay: calc(0.3s + var(--i) * 0.35s); animation-delay: calc(0.3s + var(--i) * 0.12s);
margin-right: 0.25em;
}
.word-reveal:last-child {
margin-right: 0;
}
@media (min-width: 768px) {
.word-line {
display: block;
}
} }
@keyframes line-clip { @keyframes line-clip {