gradient and wavy text for shoey

resen/cent/index.html

@@ -21,70 +21,52 @@ <h4>
     <div class="narrow_poem two_col">
         <pre>
 1.
-
 גּוּפוֹת סְבִיב שׁוּחוֹת
 עוֹרָן מַשְׁחִיר חֳדָשִׁים,
 עַתָּה מַקְרִיחוֹת
 
-
 2.
-
 שְׁאוֹן הַאַלְמָנוֹת
 מְזַמְזֵם כִּנְחִיל מֵעַל
 גְּוִיּוֹת גּוֹוְעוֹת
 
-
 3.
-
 בְּקָרוֹן חוֹרֵק
 חוֹלֵף מֵעַל רָאשֵׁינוּ
 פָּגָז שְׁוֵה נֶפֶשׁ
 
-
 4.
-
 בְּשָׂרוֹ פִּכָּה
 בִּצְרוֹרוֹת, כִּתֵּר אוֹתוֹ
 כִּמְנִיפָה רַכָּה
 
-
 5.
-
 חֳלִי הַבָּשָׂר
 מְבַשֵּׂר עַל אֶפְשָׁרוּת
 כְּנִיסַת רְסִיס זָר
 </pre>
         <pre>
 6.
-
 בַּרְזֶל, עוֹפֶרֶת,
 אֵפֶר לְבָבוֹת כְּנוּעִים:
 מִלְחֶמֶת חֲפִירוֹת
 
-
 7.
-
 סְרִיג הַצֶּמֶר
 יִמְנַע מִכָּל קָלִיעַ
 אֶת מַגַּע עוֹרִי
 
-
 8.
-
 בְּתוֹךְ הַפְלָנֶל
 צִפָּרְנָיו נוֹבְרוֹת, חוֹפְרוֹת
 בִּבְשַׂר חֲרָקִים
 
-
 9.
-
 מוּל צָבָא אַדִּיר,
 חשֶׁךְ, חוֹר בָּאֲדָמָה,
 שְׁנֵי גְּבָרִים עוֹמְדִים
 
-
 10.
-
 עִם הָאֲדָמָה
 הַגְּוִיּוֹת חוֹגְגוֹת
 אֵרוּסֵי דָּמִים

resen/down/style.css

@@ -1,3 +1,7 @@
+html {
+    overscroll-behavior: none;
+}
+
 body {
     background-image: url('down.jpg');
     background-position: clamp(100%, 43% + var(--dx, 0)*1px, 0%) clamp(100%, 40% + var(--dy, 0)*1px, 0%);  /* Note reverse order is due to the negative difference of element size minus upscaled image size. Avoid the separate -x/-y properties which may be broken in Chrome and Safari. See: https://bugzilla.mozilla.org/show_bug.cgi?id=1874606, https://bugs.chromium.org/p/chromium/issues/detail?id=610627#c25 */
@@ -6,7 +10,7 @@ body {
     --fg_dim: var(--fg);
     --opacity: 1;
     opacity: min(var(--opacity), .6);
-    overscroll-behavior: none;  /* Prevent bounce. Apply on body rather than html for Chrome. See: https://jeffbridgforth.com/fix-scroll-bounce-with-css-some-gotchas/ */
+    overscroll-behavior: none;
     touch-action: pinch-zoom;
     transition: opacity 1s;
     user-select: none;

resen/fateful/script.js

@@ -1,4 +1,4 @@
-// From: Jos Faber (https://codepen.io/josfabre/pen/QWeVyKb)
+    // From: Jos Faber (https://codepen.io/josfabre/pen/QWeVyKb)
 
 const n = 12;
 const width = 1400;
@@ -65,7 +65,7 @@ const tick = () => {
 		p.t += 0.015;
 	});
 
-	ctx.lineWidth = 16;
+	ctx.lineWidth = 8;
 	ctx.strokeStyle = "#AFE1EF";
 	ctx.stroke();
 
@@ -84,4 +84,10 @@ const tick = () => {
 tick();
 
 new IntersectionObserver(e => {if (e[0].isIntersecting) filler.classList.add('grow')}).observe(document.querySelector('.refs'))
-addEventListener('resize', () => c.width = Math.min(width, innerWidth), {passive: true});
+addEventListener('resize', () => c.width = Math.min(width, innerWidth), {passive: true});
+
+const floatElements = document.querySelectorAll('h2, p, .refs, blockquote, footer > div')
+new ResizeObserver(() => {
+    const top = canvas.getBoundingClientRect().top
+    floatElements.forEach(e => e.style.setProperty('--play', e.getBoundingClientRect().top - 40 > top ? 'running' : 'paused'))
+}).observe(filler)

resen/fateful/style.css

@@ -1,8 +1,11 @@
 html {
+    overflow-x: clip;
     overscroll-behavior: none;
 }
 
 body {
+    overflow-x: clip;
+    overscroll-behavior: none;
     position: relative;
 }
 
@@ -43,6 +46,37 @@ body {
 }
 
 #filler {
-  background: #B3E5FC;
+  background: linear-gradient(#B3E5FC, #3649b3 1000px);
   flex: 0 0 0;
+}
+
+@keyframes wave {
+  20% {
+    transform: rotate(-.3deg) translatex(-.7rem);
+  }
+  40% {
+    transform: rotate(.15deg) translatex(.7rem);
+  }
+  60% {
+    transform: rotate(-.15deg) translatex(-.7rem);
+  }
+  80% {
+    transform: rotate(.3deg) translatex(.7rem);
+  }
+}
+
+:is(h2, p, blockquote, footer > div), .refs::before {
+    animation: wave 40s infinite ease-in-out var(--play);
+}
+
+footer {
+    overflow-y: clip;
+}
+
+footer > div > span {
+    margin-bottom: 2px;
+}
+
+.refs::before {
+    display: inline-block;
 }

resen/pages.js

@@ -807,6 +807,9 @@ function show_hide_cursor(elem) {
 }
 
 
+document.addEventListener('keydown', e => {if (e.key == '~') document.body.classList.toggle('psycler')})
+
+
 // FULLSCREEN
 
 
@@ -847,6 +850,3 @@ function toggle_fullscreen(event_or_elem, landscape=true, target_screen, elem) {
         document.exitFullscreen()
     return was_not_fullscreen_before
 }
-
-
-document.addEventListener('keydown', e => {if (e.key == '~') document.body.classList.toggle('psycler')})

resen/snark/script.js

@@ -73,20 +73,20 @@ const containers = document.querySelectorAll('div[oncontextmenu*=toggle_fullscre
 document.addEventListener('keydown', event => {
     if (event.altKey || event.ctrlKey || event.metaKey || !event.key.match(/^[א-תa-zA-Z]$/) && event.key != 'Backspace' && event.key != 'CapsLock')
         return
-    const index = containers[1].classList.contains('fullscreen') | 0
+    const current = containers[1].classList.contains('fullscreen') | 0
     const svgs = document.querySelectorAll('svg')
     if (event.key == 'CapsLock') {
-        svgs[index].dataset.selected = ''
+        svgs[current].dataset.selected = ''
         containers.forEach((e, i) => e.appendChild(svgs[1 - i]))
-        svgs[index].dataset.selected = ''
+        svgs[current].dataset.selected = ''
         return
     }
-    containers[index].classList.remove('keyboard')
+    containers[current].classList.remove('keyboard')
     if (event.key != 'Backspace')
         setTimeout(() => {
-            svgs[index].style.setProperty('--delay', 0)
-            containers[index].classList.add('keyboard')
+            svgs[current].style.setProperty('--delay', 0)
+            containers[current].classList.add('keyboard')
             const key = keymap[event.key.toLowerCase()] || event.key
-            ;[...svgs[index].querySelectorAll('circle')].find(c => c.nextElementSibling.textContent == key).dispatchEvent(new MouseEvent('click', {bubbles: true}))
+            ;[...svgs[current].querySelectorAll('circle')].find(c => c.nextElementSibling.textContent == key).dispatchEvent(new MouseEvent('click', {bubbles: true}))
         }, 1)
 })

resen/style.css

@@ -54,7 +54,7 @@
 @font-face {
     font-family: arabic;
     font-display: block;
-    src: url('fonts/ReadexPro-Regular.ttf');
+    src: url('fonts/ReadexPro-Arabic-Regular.woff2');
 }
 
 :root, ::backdrop {  /* In Chrome (<122) and Firefox (<120) ::backdrop did not inherit from :root. See: https://issues.chromium.org/issues/40569411, https://bugzilla.mozilla.org/show_bug.cgi?id=1855668 */
@@ -758,6 +758,7 @@ ul.mono {
 }
 
 .narrow_poem {
+    line-height: 2;
     margin-block: 8ex;
     margin-inline: auto;
     max-width: fit-content;
@@ -869,7 +870,7 @@ nav[dir=ltr] ~ * .preface_he {
     display: none;
 }
 
-@keyframes psycler {
+@keyframes psycler {  /* From: https://zzzen.com/psycler/ */
     0% { filter: hue-rotate(5deg) saturate(2) invert(0) }
     50% { filter: hue-rotate(160deg) saturate(8) invert(0.25) }
     100% { filter: hue-rotate(350deg) saturate(2) invert(0) }
@@ -969,7 +970,7 @@ nav[dir=rtl] ~ :nth-last-child(1 of .refs):not([data-title]) {
     animation: 3s show_cursor;
 }
 
-button.show_cursor {
+:is(button, video).show_cursor {
     --cursor: pointer;
 }
 

resen/umbilical/index.html

@@ -80,7 +80,7 @@ <h3>בסופי</h3>
 		מעט לפני מותה, אימי לימדה אותי את ההבדל בין חולם לשורוק, היא הסבירה - השורוק הוא הטבוּר של ה־ו', כך לעולם תזכרי. עם הטבוּר לעולם אני זוכרת.
 	</p>
 	<p>
-		טבוּר הוא הקמע הפרסונלי של כל אדם לאימו, הוא לב הזכר הגופני לחיבור קמאי.
+		טבוּר הוא הקמע האישי של כל אדם לאימו, הוא לב הזכר הגופני לחיבור קמאי.
 	</p>
 	<p>
 		היצירה טבוּר היא שירה אנימטיבית, המאפשרת פריצת הגבולות הסטטיים של השפה.
@@ -91,9 +91,10 @@ <h3>בסופי</h3>
 	<p>
 		טכניקה אילוצית שהמצאתי, איך קוראות אותה? איך משתמשות בה?
 	</p>
-	<blockquote>הנוסחה פשוטה –</blockquote>
-	<blockquote>כול.פל</blockquote>
-	<blockquote>הכול</blockquote>
+	<pre class="narrow_poem">
+הנוסחה פשוטה –
+כול.פל
+הכול</pre>
 	<p>
 		החוקיות היא שאפשר לקרוא או את האות שלפני הנקודה או את האות שאחרי הנקודה.
 		כך המילה הכתובה מכילה בתוכה בעצם שתי מילים חלופיות: כולל / כופל.

resen/umbilical/style.css

@@ -3,17 +3,18 @@
     --fg_dim: --fg;
 }
 
-body {
+html {
     overflow-x: clip;
 }
 
-article {
-    letter-spacing: normal;
-    --line_height: normal;
+body {
+    overflow-x: clip;
 }
 
 article:first-of-type {
     --article_width: 20ch;
+    letter-spacing: normal;
+    --line_height: normal;
 }
 
 h3 {