From 494b50925e1db551038de8b1e76b18cd76e09b25 Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Fri, 22 May 2026 12:40:01 +0700 Subject: [PATCH] Add animated background to homepage hero - Animated floating orbs with blur effect - Floating particles rising animation - Moving gradient lines - Grid pattern with subtle movement - Yellow glow effects on dark background --- data.db | Bin 1048576 -> 1048576 bytes src/pages/index.astro | 227 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 226 insertions(+), 1 deletion(-) diff --git a/data.db b/data.db index 0089665c680e552037480b66696959c141b3d2f2..ed474dac663d475f61f41a52cf291a119a40fec2 100644 GIT binary patch delta 410 zcmZo@aA;_7m>|vgbE1qh*wSrC+1}27nfL>7#kVFB&SEqbJS`W8HE@aS{WHx85`-DSsF(f z85o)A8kp*$i*GlQBlY(MS~ z3=^RGTMYcq`9JXA0@`tgpO=SOmJ#M<=Jx0PoIuP4#N0s41H`;Q%(wk{Kfh!F016j) AZ2$lO delta 194 zcmZo@aA;_7m>|vgW1@^R36% zHTaA+3p%LrZ8wtRxWvf8#DAE9{}KOTpxAbP7CB}|#_9HQ98%LC>T@UqC66=kKjA+P zl-$ifeU&{2?{rCd4*uzn?Ku>&NVZ?`=h%M5pVPnqDEXX$|2h8$pw8R;?a%u;ftU-3 Txq+Amh b.data.date.valueOf() - a.data.date Large typography, overlapping elements ============================================= -->
- +
+ + +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
@@ -378,8 +402,10 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date position: absolute; inset: 0; z-index: 0; + overflow: hidden; } + .hero-grid { position: absolute; inset: 0; @@ -387,6 +413,12 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px); background-size: 60px 60px; + animation: gridMove 20s linear infinite; + } + + @keyframes gridMove { + 0% { transform: translate(0, 0); } + 100% { transform: translate(60px, 60px); } } .hero-gradient { @@ -396,6 +428,199 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date radial-gradient(ellipse at 70% 80%, rgba(254, 212, 0, 0.05) 0%, transparent 50%); } + /* ============================================= + ANIMATED ORBS + ============================================= */ + + .orb { + position: absolute; + border-radius: 50%; + filter: blur(60px); + opacity: 0.4; + } + + .orb-1 { + width: 400px; + height: 400px; + background: rgba(254, 212, 0, 0.3); + top: -100px; + left: -100px; + animation: orbFloat1 8s ease-in-out infinite; + } + + .orb-2 { + width: 300px; + height: 300px; + background: rgba(254, 212, 0, 0.2); + bottom: 10%; + right: 10%; + animation: orbFloat2 10s ease-in-out infinite; + } + + .orb-3 { + width: 200px; + height: 200px; + background: rgba(254, 212, 0, 0.25); + top: 50%; + right: 30%; + animation: orbFloat3 6s ease-in-out infinite; + } + + + @keyframes orbFloat1 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(50px, 30px) scale(1.1); } + 66% { transform: translate(-30px, 50px) scale(0.95); } + } + + @keyframes orbFloat2 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(-60px, -40px) scale(1.15); } + } + + @keyframes orbFloat3 { + 0%, 100% { transform: translate(0, 0); } + 25% { transform: translate(40px, -30px); } + 75% { transform: translate(-40px, 30px); } + } + + /* ============================================= + ANIMATED PARTICLES + ============================================= */ + + .particles { + position: absolute; + inset: 0; + overflow: hidden; + } + + .particle { + position: absolute; + width: 6px; + height: 6px; + background: var(--color-primary); + border-radius: 50%; + opacity: 0; + } + + .p-1 { + top: 20%; + left: 10%; + animation: particleFloat 6s ease-in-out infinite; + animation-delay: 0s; + } + + .p-2 { + top: 60%; + left: 20%; + animation: particleFloat 8s ease-in-out infinite; + animation-delay: 1s; + } + + .p-3 { + top: 30%; + left: 70%; + animation: particleFloat 7s ease-in-out infinite; + animation-delay: 2s; + } + + .p-4 { + top: 70%; + left: 80%; + animation: particleFloat 9s ease-in-out infinite; + animation-delay: 0.5s; + } + + .p-5 { + top: 40%; + left: 50%; + animation: particleFloat 6.5s ease-in-out infinite; + animation-delay: 3s; + } + + + .p-6 { + top: 80%; + left: 40%; + animation: particleFloat 7.5s ease-in-out infinite; + animation-delay: 1.5s; + } + + .p-7 { + top: 15%; + left: 60%; + animation: particleFloat 8.5s ease-in-out infinite; + animation-delay: 2.5s; + } + + .p-8 { + top: 50%; + left: 90%; + animation: particleFloat 7.2s ease-in-out infinite; + animation-delay: 4s; + } + + @keyframes particleFloat { + 0% { + opacity: 0; + transform: translateY(100vh) scale(0); + } + 10% { + opacity: 0.8; + } + 90% { + opacity: 0.8; + } + 100% { + opacity: 0; + transform: translateY(-100vh) scale(1); + } + } + + /* ============================================= + MOVING LINES + ============================================= */ + + .lines { + position: absolute; + inset: 0; + overflow: hidden; + } + + + .line { + position: absolute; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(254, 212, 0, 0.3), transparent); + animation: lineMove 15s linear infinite; + } + + .line-1 { + width: 60%; + top: 25%; + left: -60%; + animation-delay: 0s; + } + + .line-2 { + width: 50%; + top: 50%; + left: -50%; + animation-delay: 5s; + } + + .line-3 { + width: 70%; + top: 75%; + left: -70%; + animation-delay: 10s; + } + + @keyframes lineMove { + 0% { left: -70%; } + 100% { left: 110%; } + } + .hero-deco { position: absolute; inset: 0;