- commit
- 5f993f10bd076415c31da73fc90525e7f0453467
- parent
- 4033b172279cc5e9136a5bc6f6e410db6af3decd
- author
- Dami <dami.etoile@gmail.com>
| M | website/ | 45 | +++++++++++++++++++++++++----- |
@@ -741,16 +741,45 @@ a { color: inherit; }
741741 .start-grid { grid-template-columns: 1fr; }742742 }743743 744-/* ─── Scroll reveal (JS-gated: html.js only) ───────────────── */745-html.js .reveal {746- opacity: 0;747- transform: translateY(14px);748- transition: opacity 0.55s ease, transform 0.55s ease;749- transition-delay: var(--reveal-delay, 0s);744+/* ─── Scroll reveal: Bayer dither dissolve (JS-gated: html.js) ──745+ Elements materialize the way the hero field is drawn: pixels746+ arrive in ordered-dither (4x4 Bayer) sequence — sparse747+ checkerboard, then dense, then solid — instead of fading.748+ mask-image is discrete-animatable, so the keyframes step749+ through three threshold masks; browsers that don't animate750+ masks degrade to a fast pop-in via the opacity ramp. */751+html.js .reveal { opacity: 0; }752+html.js .reveal.in {753+ opacity: 1;754+ -webkit-mask-repeat: repeat;755+ mask-repeat: repeat;756+ -webkit-mask-size: 12px 12px;757+ mask-size: 12px 12px;758+ animation: dither-in 0.45s var(--reveal-delay, 0s) backwards;759+}760+@keyframes dither-in {761+ 0% {762+ opacity: 0;763+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E");764+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E");765+ }766+ 10% { opacity: 1; }767+ 30% {768+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");769+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");770+ }771+ 60% {772+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='4' height='1'/%3E%3Crect x='0' y='2' width='4' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");773+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='4' height='1'/%3E%3Crect x='0' y='2' width='4' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");774+ }775+ 100% {776+ -webkit-mask-image: none;777+ mask-image: none;778+ }750779 }751-html.js .reveal.in { opacity: 1; transform: none; }752780 @media (prefers-reduced-motion: reduce) {753- html.js .reveal { opacity: 1; transform: none; transition: none; }781+ html.js .reveal { opacity: 1; }782+ html.js .reveal.in { animation: none; }754783 }755784 756785 /* ─── Footer ───────────────────────────────────────────────── */