Implement kcz animation

hideo54 · Jan 3, 2025 · e7ab4ee · e7ab4ee
1 parent 91add2f
commit e7ab4ee
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/pages/visits.tsx b/pages/visits.tsx
@@ -256,12 +256,18 @@ const App: NextPage = () => {
                 <div>
                     {swarmDataJson.visitedAirports.map(airportName =>
                         <div key={airportName} className='my-4'>
-                            <div className='text-2xl font-bold'>
-                                <IconSpan LeftIcon={Airplane}>
+                            <div className='text-2xl font-bold mr-2'>
+                                <Airplane size='1.2em' style={{ verticalAlign: 'text-bottom' }} />
+                                <span className={clsx(
+                                    airportName.match(/[A-Z]{3}/)?.toString() === 'KCZ' &&
+                                    'text-transparent bg-kcz-gradient bg-[length:500%_100%] bg-clip-text animate-shine',
+                                )}>
                                     {airportName.match(/[A-Z]{3}/)}
-                                </IconSpan>
+                                </span>
                             </div>
-                            {regularizeAirportName(airportName.replace(/\([A-Z]{3}\)/, ''))}
+                            <span>
+                                {regularizeAirportName(airportName.replace(/\([A-Z]{3}\)/, ''))}
+                            </span>
                         </div>
                     )}
                 </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,6 +10,22 @@ module.exports = {
     ],
     theme: {
         extend: {
+            animation: {
+                shine: 'shine 3s infinite',
+            },
+            backgroundImage: {
+              'kcz-gradient': 'linear-gradient(90deg, #be4df8 30%, #f760f8 50%, #be4df8 70%)',
+            },
+            keyframes: {
+                shine: {
+                    '0%': {
+                        backgroundPosition: '100% 50%',
+                    },
+                    '100%': {
+                        backgroundPosition: '0% 50%',
+                    },
+                },
+            },
             colors: {
                 'hideo54-pink': '#e26a6a',
             },