adrianbonpin/gridline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(www): prevent flicker and reveal macos-hint on landing page (#27)

Browse Source 
Hide entry-animated elements at first paint (html.anime-ready guard in
global.css) so the landing page no longer flashes visible content before
anime.js loads. Adds a <noscript> fallback and a JS load-error fallback to
guarantee content is never permanently hidden, and reveals the hero
immediately for prefers-reduced-motion users. Includes #macos-hint in the
hero entrance timeline so the macOS command box animates in correctly.
This commit is contained in:
adrianbonpin
2026-08-17 10:30:04 +08:00
committed by GitHub
parent 73c8cdd79b
commit c22e675f2b
3 changed files with 47 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/src/layouts/Layout.astro
+16 -1
View File
@@ -25,7 +25,7 @@ const isProd = import.meta.env.PROD;
---
<!doctype html>
<html lang="en" data-theme-auto>
<html lang="en" data-theme-auto class="anime-ready">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -64,6 +64,21 @@ const isProd = import.meta.env.PROD;
<Seo jsonLd={jsonLd} />
{
// No-JS safety net: without JavaScript the anime.js entrance timeline
// never runs, so force every entry-animated element back to visible.
// (global.css hides them via the html.anime-ready selector.)
}
<noscript>
<style>
html.anime-ready .hero-animate > *,
html.anime-ready .hero-screenshot,
html.anime-ready .section-animate > * {
opacity: 1 !important;
}
</style>
</noscript>
{
isProd && (
<script
www/src/styles/global.css
+14
View File
@@ -32,6 +32,20 @@ html.light {
--accent: #d97706;
}
/*
* Entry-animated elements start hidden (opacity 0) to prevent a flash of
* content before landing.js loads anime.js and runs the entrance timeline.
* The html.anime-ready class is present from first paint; animated elements
* are revealed by the anime.js timeline / IntersectionObserver (immediately
* for prefers-reduced-motion users). A <noscript> override in Layout.astro
* plus a JS script-load fallback guarantee content is never left hidden.
*/
html.anime-ready .hero-animate > *,
html.anime-ready .hero-screenshot,
html.anime-ready .section-animate > * {
opacity: 0;
}
html {
background-color: var(--bg);
color: var(--text);