Skip to content

Commit 23c554d

Browse files
p4gsclaudehappy-otter
committed
Switch nthpartyfinder title to NeonLux font with lava gradient fill and neon flicker
Replace Cyberthrone with NeonLux neon-style font. Title text now uses a flowing orange-to-blue lava lamp gradient as the fill color via background-clip:text. Added 70% opacity black drop shadow with blur, and a subtle neon glow that flickers like a real neon sign. Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
1 parent fd919ab commit 23c554d

2 files changed

Lines changed: 26 additions & 12 deletions

File tree

60.3 KB
Binary file not shown.

docs/projects/nthpartyfinder/index.html

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css" rel="stylesheet">
1212
<style>
1313
@font-face {
14-
font-family: 'Cyberthrone';
15-
src: url('fonts/Cyberthrone.ttf') format('truetype');
14+
font-family: 'NeonLux';
15+
src: url('fonts/NeonLux.ttf') format('truetype');
1616
font-weight: 400;
1717
font-style: normal;
1818
font-display: swap;
@@ -39,7 +39,7 @@
3939
--text-dim: #6e6e8a;
4040
--text-bright:#f0f0ff;
4141

42-
--font-display: 'Cyberthrone', 'Syncopate', sans-serif;
42+
--font-display: 'NeonLux', 'Syncopate', sans-serif;
4343
--font-body: 'Space Grotesk', sans-serif;
4444
--font-mono: 'Space Mono', monospace;
4545

@@ -171,19 +171,33 @@
171171
margin-bottom: 12px;
172172
position: relative;
173173
z-index: 1;
174-
}
175-
@keyframes lava-letter {
176-
0% { text-shadow: 2px 2px 0 #FFA84F; }
177-
25% { text-shadow: 2px 2px 0 #e8a44a; }
178-
50% { text-shadow: 2px 2px 0 #1B95C1; }
179-
75% { text-shadow: 2px 2px 0 #3aadd4; }
180-
100% { text-shadow: 2px 2px 0 #FFA84F; }
174+
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
175+
}
176+
@keyframes lava-flow {
177+
0% { background-position: 0% 50%; }
178+
50% { background-position: 100% 50%; }
179+
100% { background-position: 0% 50%; }
180+
}
181+
@keyframes neon-flicker {
182+
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
183+
opacity: 1;
184+
filter: drop-shadow(0 0 6px rgba(255,168,79,.5)) drop-shadow(0 0 18px rgba(27,149,193,.3));
185+
}
186+
20%, 24%, 55% {
187+
opacity: 0.82;
188+
filter: drop-shadow(0 0 2px rgba(255,168,79,.2)) drop-shadow(0 0 6px rgba(27,149,193,.1));
189+
}
181190
}
182191
.lava-text { display: inline; }
183192
.lava-letter {
184193
display: inline-block;
185-
animation: lava-letter 8s ease-in-out infinite;
186-
animation-delay: calc(var(--i) * -0.6s);
194+
background: linear-gradient(90deg, #FFA84F, #e8a44a, #1B95C1, #3aadd4, #FFA84F);
195+
background-size: 300% 100%;
196+
-webkit-background-clip: text;
197+
background-clip: text;
198+
-webkit-text-fill-color: transparent;
199+
animation: lava-flow 8s ease-in-out infinite, neon-flicker 4s infinite;
200+
animation-delay: calc(var(--i) * -0.6s), 0s;
187201
}
188202

189203
.hero-tagline {

0 commit comments

Comments
 (0)