Skip to content

feat: Enhance wave background animations and adjust opacity settings for improved visual effects #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
askpt wants to merge 2 commits into
base: main
Choose a base branch
from
+83 −32
Draft

feat: Enhance wave background animations and adjust opacity settings for improved visual effects #3

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ae2c9a
Enhance wave background animations and adjust opacity settings for im…
askpt Apr 6, 2026
45be174
Merge branch 'main' into askpt/animated-background
askpt Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 83 additions & 32 deletions styles/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
--of-card-bg: rgba(0, 0, 0, 0.05);
--of-card-border: var(--of-accent-purple);
--of-code-bg: #e8e8ec;
--of-wave-opacity: 0.8;
--of-wave-opacity: 1;
--of-green-text: #007a00;
--of-logo-fill: #231f20;
--of-logo-circle: #f5f5f5;
Expand Down Expand Up @@ -175,9 +175,54 @@
}

/* ----------------------------------------------------------
Wave Background Decoration (CSS-only approximation)
The ODP uses flowing green + blue/purple wave lines at
the bottom-left corner of slides.
Wave Animation Keyframes
Each pseudo-element is taller than the container and
extends below it, so the bottom edge is never visible.
Multi-stop 2D translate paths create organic side-to-side
drift. Green and purple counter-phase at different speeds.
---------------------------------------------------------- */

@keyframes green-drift {
0% { transform: translate(0%, 0%) scale(1); }
20% { transform: translate(-6%, -1%) scale(1.02); }
40% { transform: translate(-12%, 0.5%) scale(1.01); }
60% { transform: translate(-4%, -0.5%) scale(1.03); }
80% { transform: translate(-10%, 0%) scale(1.01); }
100% { transform: translate(0%, 0%) scale(1); }
}

@keyframes purple-drift {
0% { transform: translate(-15%, 0%) scale(1); }
25% { transform: translate(-8%, -1%) scale(1.02); }
50% { transform: translate(0%, 0.5%) scale(1.01); }
75% { transform: translate(-10%, -0.5%) scale(1.03); }
100% { transform: translate(-15%, 0%) scale(1); }
}

@keyframes green-drift-prominent {
0% { transform: translate(0%, 0%) scale(1); }
15% { transform: translate(-8%, -1%) scale(1.03); }
35% { transform: translate(-16%, 0.5%) scale(1.01); }
55% { transform: translate(-5%, -1%) scale(1.04); }
75% { transform: translate(-14%, 0%) scale(1.02); }
100% { transform: translate(0%, 0%) scale(1); }
}

@keyframes purple-drift-prominent {
0% { transform: translate(-15%, 0%) scale(1); }
20% { transform: translate(-6%, -1%) scale(1.03); }
45% { transform: translate(0%, 0.5%) scale(1.01); }
70% { transform: translate(-12%, -1%) scale(1.04); }
100% { transform: translate(-15%, 0%) scale(1); }
}

/* ----------------------------------------------------------
Wave Background Decoration
Pseudo-elements are 130% wide x 120% tall, positioned so
they overhang on the right and below. overflow:hidden on
the parent clips them. No hard edges are ever visible
because gradients fade to transparent well inside the
element boundaries.
---------------------------------------------------------- */

.wave-bg {
Expand All @@ -190,91 +235,97 @@
.wave-bg::after {
content: "";
position: absolute;
bottom: 0;
bottom: -20%;
left: 0;
width: 100%;
height: 100%;
width: 130%;
height: 120%;
pointer-events: none;
z-index: -1;
will-change: transform;
transform-origin: center bottom;
}

/* Green wave layer */
.wave-bg::before {
background:
radial-gradient(
ellipse 80% 50% at 5% 100%,
rgba(0, 200, 0, calc(0.3 * var(--of-wave-opacity))) 0%,
ellipse 80% 50% at 5% 85%,
rgba(0, 200, 0, calc(0.55 * var(--of-wave-opacity))) 0%,
transparent 70%
),
radial-gradient(
ellipse 60% 40% at 15% 95%,
rgba(0, 200, 0, calc(0.2 * var(--of-wave-opacity))) 0%,
ellipse 60% 40% at 25% 80%,
rgba(0, 200, 0, calc(0.4 * var(--of-wave-opacity))) 0%,
transparent 60%
),
radial-gradient(
ellipse 90% 35% at 95% 100%,
rgba(0, 200, 0, calc(0.15 * var(--of-wave-opacity))) 0%,
ellipse 70% 35% at 75% 85%,
rgba(0, 200, 0, calc(0.3 * var(--of-wave-opacity))) 0%,
transparent 50%
);
animation: green-drift 8s ease-in-out infinite;
}

/* Blue/purple wave layer */
.wave-bg::after {
background:
radial-gradient(
ellipse 70% 45% at 20% 100%,
rgba(123, 123, 255, calc(0.3 * var(--of-wave-opacity))) 0%,
ellipse 70% 45% at 30% 85%,
rgba(123, 123, 255, calc(0.55 * var(--of-wave-opacity))) 0%,
transparent 65%
),
radial-gradient(
ellipse 80% 35% at 85% 100%,
rgba(123, 123, 255, calc(0.25 * var(--of-wave-opacity))) 0%,
ellipse 80% 35% at 70% 85%,
rgba(123, 123, 255, calc(0.45 * var(--of-wave-opacity))) 0%,
transparent 55%
),
radial-gradient(
ellipse 50% 30% at 50% 95%,
rgba(123, 123, 255, calc(0.15 * var(--of-wave-opacity))) 0%,
ellipse 50% 30% at 50% 80%,
rgba(123, 123, 255, calc(0.3 * var(--of-wave-opacity))) 0%,
transparent 50%
);
animation: purple-drift 10s ease-in-out infinite;
}

/* Cover/section slides get more prominent waves */
/* Cover/section slides get more prominent waves with wider drift */
.wave-bg-prominent::before {
background:
radial-gradient(
ellipse 90% 60% at 5% 100%,
rgba(0, 200, 0, calc(0.4 * var(--of-wave-opacity))) 0%,
ellipse 90% 60% at 5% 85%,
rgba(0, 200, 0, calc(0.7 * var(--of-wave-opacity))) 0%,
transparent 70%
),
radial-gradient(
ellipse 70% 50% at 20% 95%,
rgba(0, 200, 0, calc(0.25 * var(--of-wave-opacity))) 0%,
ellipse 70% 50% at 30% 80%,
rgba(0, 200, 0, calc(0.5 * var(--of-wave-opacity))) 0%,
transparent 60%
),
radial-gradient(
ellipse 100% 45% at 90% 100%,
rgba(0, 200, 0, calc(0.2 * var(--of-wave-opacity))) 0%,
ellipse 80% 45% at 75% 85%,
rgba(0, 200, 0, calc(0.4 * var(--of-wave-opacity))) 0%,
transparent 55%
);
animation: green-drift-prominent 7s ease-in-out infinite;
}

.wave-bg-prominent::after {
background:
radial-gradient(
ellipse 80% 55% at 15% 100%,
rgba(123, 123, 255, calc(0.4 * var(--of-wave-opacity))) 0%,
ellipse 80% 55% at 25% 85%,
rgba(123, 123, 255, calc(0.7 * var(--of-wave-opacity))) 0%,
transparent 65%
),
radial-gradient(
ellipse 90% 45% at 80% 100%,
rgba(123, 123, 255, calc(0.3 * var(--of-wave-opacity))) 0%,
ellipse 90% 45% at 65% 85%,
rgba(123, 123, 255, calc(0.55 * var(--of-wave-opacity))) 0%,
transparent 60%
),
radial-gradient(
ellipse 60% 35% at 50% 95%,
rgba(123, 123, 255, calc(0.2 * var(--of-wave-opacity))) 0%,
ellipse 60% 35% at 50% 80%,
rgba(123, 123, 255, calc(0.4 * var(--of-wave-opacity))) 0%,
transparent 50%
);
animation: purple-drift-prominent 9s ease-in-out infinite;
}

/* ----------------------------------------------------------
Expand Down
Loading