kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add animated background to homepage hero

Browse Source 
- Animated floating orbs with blur effect
- Floating particles rising animation
- Moving gradient lines
- Grid pattern with subtle movement
- Yellow glow effects on dark background
This commit is contained in:
Kunthawat Greethong
2026-05-22 12:40:01 +07:00
parent 985421cb6a
commit 494b50925e
2 changed files with 226 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/pages/index.astro
View File

@@ -17,10 +17,34 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
Large typography, overlapping elements
============================================= -->
<section class="hero-section">
<!-- Background Elements -->
<!-- Animated Background Elements -->
<div class="hero-bg">
<div class="hero-grid"></div>
<div class="hero-gradient"></div>
<!-- Animated Orbs -->
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
<!-- Animated Particles -->
<div class="particles">
<div class="particle p-1"></div>
<div class="particle p-2"></div>
<div class="particle p-3"></div>
<div class="particle p-4"></div>
<div class="particle p-5"></div>
<div class="particle p-6"></div>
<div class="particle p-7"></div>
<div class="particle p-8"></div>
</div>
<!-- Moving Lines -->
<div class="lines">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</div>
<!-- Decorative 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;