valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: stamp+glitch logo animation, move keyframes outside @theme

Browse Source 
logoStamp and pathFlicker defined at global CSS scope (outside @theme)
so they are always emitted. Logo uses sharp stamp+bounce entrance with
flickering path reveals.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-01 16:38:28 +01:00
parent 7424c2e899
commit 20406c5dcf
2 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/globals.css
View File

@@ -84,6 +84,27 @@
from { transform: scale(0.95); opacity: 0; } from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; } to { transform: scale(1); opacity: 1; }
} }
}
@keyframes logoStamp {
0% { opacity: 0; transform: scale(2) rotate(15deg); }
38% { opacity: 1; transform: scale(0.82) rotate(-5deg); }
58% { transform: scale(1.14) rotate(3deg); }
74% { transform: scale(0.94) rotate(-1deg); }
88% { transform: scale(1.04) rotate(0.3deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes pathFlicker {
0% { opacity: 0; }
28%, 30% { opacity: 0; }
31%, 33% { opacity: 1; }
34%, 40% { opacity: 0; }
41%, 44% { opacity: 1; }
45%, 49% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 1; }
} }
:root { :root {

6
components/Logo.tsx
View File

@@ -7,12 +7,12 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className} className={className}
style={{ animation: 'scaleIn 0.6s ease-out both' }} style={{ animation: 'logoStamp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both' }}
> >
{/* Wrench (Lucide) - vertical */} {/* Wrench (Lucide) - vertical */}
<g <g
transform="translate(32, 32) rotate(0) scale(3.15) translate(-12.5, -11.5)" transform="translate(32, 32) rotate(0) scale(3.15) translate(-12.5, -11.5)"
style={{ animation: 'fadeIn 1.2s ease-in-out both' }} style={{ animation: 'pathFlicker 0.9s ease-out 0.15s both' }}
> >
<path <path
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
@@ -28,7 +28,7 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
{/* Brush (Lucide) - horizontal flipped */} {/* Brush (Lucide) - horizontal flipped */}
<g <g
transform="translate(32, 30) rotate(90) scale(3.025) translate(-11.25, -11)" transform="translate(32, 30) rotate(90) scale(3.025) translate(-11.25, -11)"
style={{ animation: 'fadeIn 1.2s ease-in-out 0.3s both' }} style={{ animation: 'pathFlicker 0.9s ease-out 0.35s both' }}
> >
<path <path
d="m11 10l3 3m-7.5 8A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z" d="m11 10l3 3m-7.5 8A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"