Skip to content

Commit 531b8b0

Browse files
p4gsclaudehappy-otter
committed
Switch title to SVG with proper outer-only glow
Two separate SVG text layers: stroke-only glow (reverse lava flow, blurred) behind crisp fill layer. Glow cannot bleed into text since they are independent SVG elements. 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 477171b commit 531b8b0

1 file changed

Lines changed: 50 additions & 48 deletions

File tree

‎docs/projects/nthpartyfinder/index.html‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -161,27 +161,28 @@
161161
}
162162

163163
.hero-title {
164-
font-family: var(--font-display);
165-
font-size: clamp(4.05rem, 10.5vw, 7.75rem);
166-
font-weight: 400;
167-
letter-spacing: 6px;
168-
text-transform: uppercase;
169-
line-height: 1.15;
170-
color: #fff;
171164
margin-bottom: 12px;
172165
position: relative;
173166
z-index: 1;
167+
line-height: 0;
168+
}
169+
.hero-title-svg {
170+
width: 100%;
171+
max-width: 820px;
172+
height: auto;
173+
display: block;
174+
margin: 0 auto;
175+
overflow: visible;
174176
filter: drop-shadow(1px 1px 0px #000);
175177
}
176-
@keyframes lava-flow {
177-
0% { background-position: 0% 50%; }
178-
50% { background-position: 100% 50%; }
179-
100% { background-position: 0% 50%; }
178+
.hero-title-svg text {
179+
font-family: var(--font-display);
180+
font-weight: 400;
181+
letter-spacing: 6px;
182+
text-transform: uppercase;
180183
}
181-
@keyframes lava-flow-reverse {
182-
0% { background-position: 100% 50%; }
183-
50% { background-position: 0% 50%; }
184-
100% { background-position: 100% 50%; }
184+
.svg-fill {
185+
animation: neon-flicker 4s infinite;
185186
}
186187
@keyframes neon-flicker {
187188
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
@@ -191,35 +192,6 @@
191192
opacity: 0.82;
192193
}
193194
}
194-
.lava-text { display: inline; }
195-
.lava-letter {
196-
display: inline-block;
197-
position: relative;
198-
background: linear-gradient(90deg, #FF8C00, #FF9A1F, #00A8E8, #00C2FF, #FF8C00);
199-
background-size: 300% 100%;
200-
-webkit-background-clip: text;
201-
background-clip: text;
202-
-webkit-text-fill-color: transparent;
203-
animation: lava-flow 8s ease-in-out infinite, neon-flicker 4s infinite;
204-
animation-delay: calc(var(--i) * -0.6s), 0s;
205-
}
206-
.lava-letter::before {
207-
content: attr(data-letter);
208-
position: absolute;
209-
top: 0;
210-
left: 0;
211-
z-index: -1;
212-
background: linear-gradient(90deg, #FF8C00, #FF9A1F, #00A8E8, #00C2FF, #FF8C00);
213-
background-size: 300% 100%;
214-
-webkit-background-clip: text;
215-
background-clip: text;
216-
-webkit-text-fill-color: transparent;
217-
-webkit-text-stroke: 4px transparent;
218-
paint-order: stroke fill;
219-
animation: lava-flow-reverse 8s ease-in-out infinite;
220-
animation-delay: calc(var(--i) * -0.6s);
221-
filter: blur(1.5px);
222-
}
223195

224196
.hero-tagline {
225197
font-family: var(--font-mono);
@@ -605,7 +577,7 @@
605577

606578
@media (max-width: 768px) {
607579
.hero { padding: 80px 0 60px; }
608-
.hero-title { font-size: clamp(3.2rem, 12vw, 5.5rem); letter-spacing: 4px; }
580+
.hero-title-svg { max-width: 600px; }
609581
.nav-links { gap: 16px; }
610582
.features-grid { grid-template-columns: 1fr; }
611583
.install-grid { grid-template-columns: 1fr; }
@@ -625,7 +597,7 @@
625597
@media (max-width: 520px) {
626598
.nav-links { display: none; }
627599
.hero-ctas { flex-direction: column; align-items: center; }
628-
.hero-title { font-size: clamp(2.8rem, 11vw, 4.5rem); letter-spacing: 3px; }
600+
.hero-title-svg { max-width: 500px; }
629601
.container { padding: 0 16px; }
630602
}
631603
</style>
@@ -652,8 +624,38 @@
652624
<div class="container">
653625
<div class="hero-eyebrow"><span class="dot"></span> GRC Engineering Open Source</div>
654626
<h1 class="hero-title">
655-
<span class="lava-text"><span class="lava-letter" style="--i:0" data-letter="N">N</span><span class="lava-letter" style="--i:1" data-letter="t">t</span><span class="lava-letter" style="--i:2" data-letter="h">h</span><span class="lava-letter" style="--i:3" data-letter=" ">&nbsp;</span><span class="lava-letter" style="--i:4" data-letter="P">P</span><span class="lava-letter" style="--i:5" data-letter="a">a</span><span class="lava-letter" style="--i:6" data-letter="r">r</span><span class="lava-letter" style="--i:7" data-letter="t">t</span><span class="lava-letter" style="--i:8" data-letter="y">y</span></span><br>
656-
<span class="lava-text"><span class="lava-letter" style="--i:9" data-letter="F">F</span><span class="lava-letter" style="--i:10" data-letter="i">i</span><span class="lava-letter" style="--i:11" data-letter="n">n</span><span class="lava-letter" style="--i:12" data-letter="d">d</span><span class="lava-letter" style="--i:13" data-letter="e">e</span><span class="lava-letter" style="--i:14" data-letter="r">r</span></span>
627+
<svg class="hero-title-svg" viewBox="0 0 900 240" xmlns="http://www.w3.org/2000/svg">
628+
<defs>
629+
<!-- Main lava gradient (flows left to right) -->
630+
<linearGradient id="lava-grad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="2700" y2="0">
631+
<stop offset="0%" stop-color="#FF8C00"/>
632+
<stop offset="25%" stop-color="#FF9A1F"/>
633+
<stop offset="50%" stop-color="#00A8E8"/>
634+
<stop offset="75%" stop-color="#00C2FF"/>
635+
<stop offset="100%" stop-color="#FF8C00"/>
636+
<animateTransform attributeName="gradientTransform" type="translate" values="0 0; -1800 0; 0 0" dur="8s" repeatCount="indefinite"/>
637+
</linearGradient>
638+
<!-- Reverse lava gradient for glow (flows right to left) -->
639+
<linearGradient id="lava-grad-rev" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="2700" y2="0">
640+
<stop offset="0%" stop-color="#FF8C00"/>
641+
<stop offset="25%" stop-color="#FF9A1F"/>
642+
<stop offset="50%" stop-color="#00A8E8"/>
643+
<stop offset="75%" stop-color="#00C2FF"/>
644+
<stop offset="100%" stop-color="#FF8C00"/>
645+
<animateTransform attributeName="gradientTransform" type="translate" values="-1800 0; 0 0; -1800 0" dur="8s" repeatCount="indefinite"/>
646+
</linearGradient>
647+
<!-- Glow blur filter -->
648+
<filter id="glow-blur" x="-10%" y="-10%" width="120%" height="120%">
649+
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="blur"/>
650+
</filter>
651+
</defs>
652+
<!-- Glow layer: stroke only, reverse gradient, blurred -->
653+
<text class="svg-glow" x="450" y="105" text-anchor="middle" font-size="110" fill="none" stroke="url(#lava-grad-rev)" stroke-width="4" filter="url(#glow-blur)">NTH PARTY</text>
654+
<text class="svg-glow" x="450" y="220" text-anchor="middle" font-size="110" fill="none" stroke="url(#lava-grad-rev)" stroke-width="4" filter="url(#glow-blur)">FINDER</text>
655+
<!-- Crisp fill layer on top -->
656+
<text class="svg-fill" x="450" y="105" text-anchor="middle" font-size="110" fill="url(#lava-grad)">NTH PARTY</text>
657+
<text class="svg-fill" x="450" y="220" text-anchor="middle" font-size="110" fill="url(#lava-grad)">FINDER</text>
658+
</svg>
657659
</h1>
658660
<p class="hero-tagline">Every party has an Nth degree</p>
659661
<p class="hero-desc">

0 commit comments

Comments
 (0)