github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-17 05:32:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): one voice, brand gradients, a lighter splash gate, denser portfolio

Browse Source 
- Voice unified on the title-tag register: the homepage h1 now says what we
  sell (Custom E-commerce, Apps & Crypto Tools); 'Precision engineering for
  everyone' is demoted to the supporting line. The structured-data and
  manifest descriptions now match the OG description instead of carrying
  their own registers.
- The off-palette cyan/blue gradients are gone: .hero-title and the new
  .brand-gradient-text use the four-colour system (light palette on light,
  dark palette on dark, per the pack). Splash cover text, services and
  portfolio headings, the hero aura, and button shadows all follow.
- The splash now dismisses once 40% scrolled past instead of requiring the
  whole screen to leave the viewport (it was already once-per-session and
  reduced-motion-skipping).
- Portfolio: heading 'Portfolio', subtitle 'Products & projects', meta title
  to match; grid grows to three columns on xl in a max-w-6xl container.
- anim3_matrix slimmed: single-layer glow, unfiltered crackle and orbs, and
  the border cycles stroke colour instead of animating filter:hue-rotate --
  the filter animation forced a full filter re-render per frame and pegged a
  core on the page hosting it.
This commit is contained in:
jwinterm
2026-08-16 00:04:28 -04:00
parent c73b9f1c04
commit 261cb04667
11 changed files with 47 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/public/images/animations/anim3_matrix.svg
+5 -5
View File
@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs><filter id="sg-mglow" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><clipPath id="sg-clip"><rect width="200" height="200" rx="26"/></clipPath><radialGradient id="sg-shock-s"><stop offset="0" stop-color="#35925c" stop-opacity="0.6"/><stop offset="1" stop-color="#35925c" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-u"><stop offset="0" stop-color="#e8689e" stop-opacity="0.6"/><stop offset="1" stop-color="#e8689e" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-c"><stop offset="0" stop-color="#4aade0" stop-opacity="0.6"/><stop offset="1" stop-color="#4aade0" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-h"><stop offset="0" stop-color="#3ad4c6" stop-opacity="0.6"/><stop offset="1" stop-color="#3ad4c6" stop-opacity="0"/></radialGradient></defs>
<defs><filter id="sg-mglow" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><clipPath id="sg-clip"><rect width="200" height="200" rx="26"/></clipPath><radialGradient id="sg-shock-s"><stop offset="0" stop-color="#35925c" stop-opacity="0.6"/><stop offset="1" stop-color="#35925c" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-u"><stop offset="0" stop-color="#e8689e" stop-opacity="0.6"/><stop offset="1" stop-color="#e8689e" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-c"><stop offset="0" stop-color="#4aade0" stop-opacity="0.6"/><stop offset="1" stop-color="#4aade0" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-h"><stop offset="0" stop-color="#3ad4c6" stop-opacity="0.6"/><stop offset="1" stop-color="#3ad4c6" stop-opacity="0"/></radialGradient></defs>
<style>
.rn { animation: sg-rain linear infinite; }
@keyframes sg-rain { from { transform: translateY(-100px); } to { transform: translateY(320px); } }
@@ -26,8 +26,8 @@
@keyframes sg-slam { 0%, 2% { transform: scale(0); } 5% { transform: scale(1.15); } 8% { transform: scale(1); } 85% { transform: scale(1); } 95% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
.orb { transform-box: fill-box; transform-origin: center; animation: sg-orb 1.5s ease-in-out infinite; }
@keyframes sg-orb { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(2); opacity: 1; } }
.bdr { animation: sg-hue 4s linear infinite, sg-breathe-o 2s ease-in-out infinite; }
@keyframes sg-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.bdr { animation: sg-bcycle 4s linear infinite, sg-breathe-o 2s ease-in-out infinite; }
@keyframes sg-bcycle { 0%,100% { stroke: #7ddfbe; } 25% { stroke: #e8689e; } 50% { stroke: #4aade0; } 75% { stroke: #35925c; } }
@keyframes sg-breathe-o { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.slam-s { animation-delay: 0s; }
.shock-s { animation-delay: 0s; }
@@ -66,8 +66,8 @@
<path d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#45c99e" stroke-width="2" opacity="0.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path class="zap" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#7ddfbe" stroke-width="3" opacity="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none" filter="url(#sg-mglow)" stroke-dasharray="15 588.9"/>
<path class="ctr" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#ffffff" stroke-width="1.5" opacity="0.5" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="5 598.9"/>
<path class="crk" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#45c99e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none" filter="url(#sg-mglow)" stroke-dasharray="3 40 8 60 2 80 5 400"/>
<g filter="url(#sg-mglow)">
<path class="crk" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#45c99e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="3 40 8 60 2 80 5 400"/>
<g>
<g transform="translate(20,28)"><g class="orb" style="animation-delay:0s"><circle r="2.5" fill="#45c99e"/></g></g>
<g transform="translate(104,100)"><g class="orb" style="animation-delay:0.5s"><circle r="2.5" fill="#45c99e"/></g></g>
<g transform="translate(172,172)"><g class="orb" style="animation-delay:1s"><circle r="2.5" fill="#45c99e"/></g></g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

apps/web/public/images/animations/anim3_matrix_light.svg
+5 -5
View File
@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs><filter id="sg-mglow" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><clipPath id="sg-clip"><rect width="200" height="200" rx="26"/></clipPath><radialGradient id="sg-shock-s"><stop offset="0" stop-color="#1a5c38" stop-opacity="0.6"/><stop offset="1" stop-color="#1a5c38" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-u"><stop offset="0" stop-color="#b83670" stop-opacity="0.6"/><stop offset="1" stop-color="#b83670" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-c"><stop offset="0" stop-color="#176a92" stop-opacity="0.6"/><stop offset="1" stop-color="#176a92" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-h"><stop offset="0" stop-color="#12857e" stop-opacity="0.6"/><stop offset="1" stop-color="#12857e" stop-opacity="0"/></radialGradient></defs>
<defs><filter id="sg-mglow" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><clipPath id="sg-clip"><rect width="200" height="200" rx="26"/></clipPath><radialGradient id="sg-shock-s"><stop offset="0" stop-color="#1a5c38" stop-opacity="0.6"/><stop offset="1" stop-color="#1a5c38" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-u"><stop offset="0" stop-color="#b83670" stop-opacity="0.6"/><stop offset="1" stop-color="#b83670" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-c"><stop offset="0" stop-color="#176a92" stop-opacity="0.6"/><stop offset="1" stop-color="#176a92" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-h"><stop offset="0" stop-color="#12857e" stop-opacity="0.6"/><stop offset="1" stop-color="#12857e" stop-opacity="0"/></radialGradient></defs>
<style>
.rn { animation: sg-rain linear infinite; }
@keyframes sg-rain { from { transform: translateY(-100px); } to { transform: translateY(320px); } }
@@ -26,8 +26,8 @@
@keyframes sg-slam { 0%, 2% { transform: scale(0); } 5% { transform: scale(1.15); } 8% { transform: scale(1); } 85% { transform: scale(1); } 95% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
.orb { transform-box: fill-box; transform-origin: center; animation: sg-orb 1.5s ease-in-out infinite; }
@keyframes sg-orb { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(2); opacity: 1; } }
.bdr { animation: sg-hue 4s linear infinite, sg-breathe-o 2s ease-in-out infinite; }
@keyframes sg-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.bdr { animation: sg-bcycle 4s linear infinite, sg-breathe-o 2s ease-in-out infinite; }
@keyframes sg-bcycle { 0%,100% { stroke: #2f8f5e; } 25% { stroke: #b83670; } 50% { stroke: #176a92; } 75% { stroke: #1a5c38; } }
@keyframes sg-breathe-o { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.slam-s { animation-delay: 0s; }
.shock-s { animation-delay: 0s; }
@@ -66,8 +66,8 @@
<path d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#1a5c38" stroke-width="2" opacity="0.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path class="zap" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#2f8f5e" stroke-width="3" opacity="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none" filter="url(#sg-mglow)" stroke-dasharray="15 588.9"/>
<path class="ctr" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#0a0a14" stroke-width="1.5" opacity="0.5" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="5 598.9"/>
<path class="crk" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#1a5c38" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none" filter="url(#sg-mglow)" stroke-dasharray="3 40 8 60 2 80 5 400"/>
<g filter="url(#sg-mglow)">
<path class="crk" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#1a5c38" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="3 40 8 60 2 80 5 400"/>
<g>
<g transform="translate(20,28)"><g class="orb" style="animation-delay:0s"><circle r="2.5" fill="#1a5c38"/></g></g>
<g transform="translate(104,100)"><g class="orb" style="animation-delay:0.5s"><circle r="2.5" fill="#1a5c38"/></g></g>
<g transform="translate(172,172)"><g class="orb" style="animation-delay:1s"><circle r="2.5" fill="#1a5c38"/></g></g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB