Add ink-gravity shader to Rainy Tech theme

[Copilot]

Adds a per-element ink dissolution effect to the Rainy Tech Easter-egg theme: page elements progressively vanish like wet ink under rain — spreading, bleeding downward, and fading out very slowly.

Approach

• SVG filter as fragment shader — each dissolving element gets a unique <filter> with feTurbulence (noise field) + feDisplacementMap (displacement), seeded randomly so every element has a distinct organic pattern
• CSS transitions for smooth easing — transform and opacity are animated via cubic-bezier CSS transitions, delegating interpolation to the browser compositor for hardware-accelerated, jank-free motion; the SVG displacement scale is still driven by a requestAnimationFrame loop with ease-in quadratic
  • Displacement scale 0 → 40 (ease-in quadratic via rAF) — ink absorbs water and spreads laterally
  • translateY 0 → 120px with cubic-bezier(0.2, 0, 0.6, 1) easing — simulates gravitational acceleration
  • Opacity 1 → 0 with cubic-bezier(0.1, 0, 0.5, 1) easing — ink concentration dilutes very slowly over 20–35 s
• Wave-based cadence — 4–7 elements dissolve simultaneously per wave, with new waves launching every 3–7 s, starting 4 s after rain begins; each element dissolves only once per page load
• Broad element coverage — dissolves h1–h6, p, li, img, picture, figure, button, blockquote, and pre elements (not only text)
• Activated inside applyRainyTheme() — no-ops outside the Rainy Tech theme

// Per-element unique SVG filter (independent noise seed = independent animation)
svgEl.innerHTML = `<defs>
  <filter id="${fid}" x="-15%" y="-5%" width="140%" height="600%">
    <feTurbulence baseFrequency="0.04 0.07" numOctaves="4" seed="${seed}" result="turb"/>
    <feDisplacementMap in="SourceGraphic" in2="turb"
      xChannelSelector="R" yChannelSelector="G" scale="0" id="${fid}-d"/>
  </filter>
</defs>`

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[github-actions]

Visit the preview URL for this PR (updated for commit 2954ee9):

https://sunnytechwebsite--pr59-copilot-sub-pr-58-8okgvcob.web.app

_{(expires Wed, 25 Mar 2026 10:25:19 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b96ac7ab85879442bb94dc448b41aeca0f34d16c}

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/SunnyTechWebsite/SunnyTechWebsite/node_modules/.bin/astro build (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/SunnyTechWebsite/SunnyTechWebsite/node_modules/.bin/astro dev --port 4321 (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/SunnyTechWebsite/SunnyTechWebsite/node_modules/.bin/astro dev --port 4321 --host 0.0.0.0 de/node/bin/git (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[HugoGresse]

@copilot make it impact more element at the same time, but the ink fade should last a lot lot longer before dissapearing

[Copilot]

@copilot make it impact more element at the same time, but the ink fade should last a lot lot longer before dissapearing

Done in commit a61925b:

• More elements at once: each wave now dissolves 4–7 elements simultaneously (was 1), with waves firing every 3–7 s so many elements are always mid-dissolve at the same time.
• Much longer fade: duration extended from 4.5–6 s to 20–35 s — ink now bleeds very slowly downward, lingering on the page long before it fully disappears.

[HugoGresse]

@copilot could you ease in the animation? Currently it is slow (which is OK) but the animation mouve 1px by 1px without transition which appear sluggish.
Also, could you apply it to more element ? (like all element on the page) not only text?

[Copilot]

@copilot could you ease in the animation? Currently it is slow (which is OK) but the animation mouve 1px by 1px without transition which appear sluggish.
Also, could you apply it t...

Done in commit 2954ee9:

• Smooth easing: replaced per-frame JS style mutations with CSS transition using cubic-bezier curves for both transform and opacity. The browser compositor now handles interpolation natively (hardware-accelerated), eliminating the stepped/sluggish appearance. The SVG displacement scale still uses rAF with an ease-in quadratic (SVG presentation attributes aren't CSS-transitionable).

• More elements: expanded the selector from h1,h2,h3,p,li to h1,h2,h3,h4,h5,h6,p,li,img,picture,figure,button,blockquote,pre — images, pictures, figures, buttons and other visual blocks now dissolve alongside text.