From bef1f4597b09a101e4ef5475184ec831ce0948af Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 19 Jan 2025 13:48:42 +0200
Subject: [PATCH 1/2] feat: shine

---
 .../components/AppNavbar/AppNavbar.styles.ts  |  2 +-
 .../components/AppNavbar/AppNavbar.tsx        |  5 +++-
 .../components/ShinyText/ShinyText.styles.ts  | 29 +++++++++++++++++++
 .../components/ShinyText/ShinyText.tsx        | 23 +++++++++++++++
 4 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 src/rendered/components/ShinyText/ShinyText.styles.ts
 create mode 100644 src/rendered/components/ShinyText/ShinyText.tsx

diff --git a/src/rendered/components/AppNavbar/AppNavbar.styles.ts b/src/rendered/components/AppNavbar/AppNavbar.styles.ts
index 04aff5f..2eef675 100644
--- a/src/rendered/components/AppNavbar/AppNavbar.styles.ts
+++ b/src/rendered/components/AppNavbar/AppNavbar.styles.ts
@@ -24,7 +24,7 @@ export const LeftGroup = styled(Navbar.Group)`
 export const Title = styled.div`
   -webkit-app-region: drag;
   margin-left: 5px;
-  font-size: 20px;
+  font-size: 18px;
   user-select: none;
   pointer-events: none;
 
diff --git a/src/rendered/components/AppNavbar/AppNavbar.tsx b/src/rendered/components/AppNavbar/AppNavbar.tsx
index e9e197e..d202273 100644
--- a/src/rendered/components/AppNavbar/AppNavbar.tsx
+++ b/src/rendered/components/AppNavbar/AppNavbar.tsx
@@ -8,6 +8,7 @@ import { useProjects } from 'rendered/hooks/useProjects';
 
 import { LeftGroup, Logo, RightGroup, StyledNavbar, Shadow, ShadowContainer, Title } from './AppNavbar.styles';
 import { useModal } from 'rendered/hooks/useModal';
+import ShinyText from '../ShinyText/ShinyText';
 
 export const AppNavbar = () => {
   const { themeSource, toggleDarkMode } = useDarkMode();
@@ -39,7 +40,9 @@ export const AppNavbar = () => {
           <Shadow />
         </ShadowContainer>
 
-        <Title>Devkitty</Title>
+        <Title>
+          <ShinyText text="devkitty" />
+        </Title>
       </LeftGroup>
 
       <RightGroup align="right">
diff --git a/src/rendered/components/ShinyText/ShinyText.styles.ts b/src/rendered/components/ShinyText/ShinyText.styles.ts
new file mode 100644
index 0000000..cde965d
--- /dev/null
+++ b/src/rendered/components/ShinyText/ShinyText.styles.ts
@@ -0,0 +1,29 @@
+import styled, { keyframes } from 'styled-components';
+
+const shine = keyframes`
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+`;
+
+export const Root = styled.span`
+  color: #b5b5b5a4;
+  display: inline-block;
+  background: linear-gradient(
+    120deg,
+    rgba(255, 255, 255, 0) 40%,
+    rgba(255, 255, 255, 0.8) 50%,
+    rgba(255, 255, 255, 0) 60%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: ${shine} 5s linear infinite;
+
+  @media (prefers-color-scheme: light) {
+    display: none;
+  }
+`;
diff --git a/src/rendered/components/ShinyText/ShinyText.tsx b/src/rendered/components/ShinyText/ShinyText.tsx
new file mode 100644
index 0000000..55b4ff1
--- /dev/null
+++ b/src/rendered/components/ShinyText/ShinyText.tsx
@@ -0,0 +1,23 @@
+import { Root } from "./ShinyText.styles";
+
+interface ShinyTextProps {
+  text: string;
+  disabled?: boolean;
+  speed?: number;
+  className?: string;
+}
+
+const ShinyText: React.FC<ShinyTextProps> = ({ text, disabled = false, speed = 5, className = '' }) => {
+  const animationDuration = `${speed}s`;
+
+  return (
+    <Root
+      className={`shiny-text ${disabled ? 'disabled' : ''} ${className}`}
+      style={{ animationDuration }}
+    >
+      {text}
+    </Root>
+  );
+};
+
+export default ShinyText;

From 9e4bf1f5fb567b6d1aace04f189393efa34422ba Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 19 Jan 2025 14:20:54 +0200
Subject: [PATCH 2/2] feat: shine

---
 .../components/AppNavbar/AppNavbar.tsx        |  2 +-
 .../components/ShinyText/ShinyText.styles.ts  |  3 +-
 .../components/ShinyText/ShinyText.tsx        | 28 ++++++++-----------
 src/rendered/components/ShinyText/index.ts    |  1 +
 4 files changed, 15 insertions(+), 19 deletions(-)
 create mode 100644 src/rendered/components/ShinyText/index.ts

diff --git a/src/rendered/components/AppNavbar/AppNavbar.tsx b/src/rendered/components/AppNavbar/AppNavbar.tsx
index d202273..21a388c 100644
--- a/src/rendered/components/AppNavbar/AppNavbar.tsx
+++ b/src/rendered/components/AppNavbar/AppNavbar.tsx
@@ -8,7 +8,7 @@ import { useProjects } from 'rendered/hooks/useProjects';
 
 import { LeftGroup, Logo, RightGroup, StyledNavbar, Shadow, ShadowContainer, Title } from './AppNavbar.styles';
 import { useModal } from 'rendered/hooks/useModal';
-import ShinyText from '../ShinyText/ShinyText';
+import { ShinyText } from '../ShinyText';
 
 export const AppNavbar = () => {
   const { themeSource, toggleDarkMode } = useDarkMode();
diff --git a/src/rendered/components/ShinyText/ShinyText.styles.ts b/src/rendered/components/ShinyText/ShinyText.styles.ts
index cde965d..f7cb3d4 100644
--- a/src/rendered/components/ShinyText/ShinyText.styles.ts
+++ b/src/rendered/components/ShinyText/ShinyText.styles.ts
@@ -9,7 +9,7 @@ const shine = keyframes`
   }
 `;
 
-export const Root = styled.span`
+export const Root = styled.span<{ speed: number }>`
   color: #b5b5b5a4;
   display: inline-block;
   background: linear-gradient(
@@ -22,6 +22,7 @@ export const Root = styled.span`
   -webkit-background-clip: text;
   background-clip: text;
   animation: ${shine} 5s linear infinite;
+  animation-duration: ${({ speed }) => `${speed}s`};
 
   @media (prefers-color-scheme: light) {
     display: none;
diff --git a/src/rendered/components/ShinyText/ShinyText.tsx b/src/rendered/components/ShinyText/ShinyText.tsx
index 55b4ff1..f21e097 100644
--- a/src/rendered/components/ShinyText/ShinyText.tsx
+++ b/src/rendered/components/ShinyText/ShinyText.tsx
@@ -1,23 +1,17 @@
-import { Root } from "./ShinyText.styles";
+import type { FC } from 'react';
+import { Root } from './ShinyText.styles';
 
-interface ShinyTextProps {
+type Props = {
   text: string;
-  disabled?: boolean;
   speed?: number;
   className?: string;
-}
-
-const ShinyText: React.FC<ShinyTextProps> = ({ text, disabled = false, speed = 5, className = '' }) => {
-  const animationDuration = `${speed}s`;
-
-  return (
-    <Root
-      className={`shiny-text ${disabled ? 'disabled' : ''} ${className}`}
-      style={{ animationDuration }}
-    >
-      {text}
-    </Root>
-  );
 };
 
-export default ShinyText;
+export const ShinyText: FC<Props> = ({ text, speed = 5, className }) => (
+  <Root
+    speed={speed}
+    className={className}
+  >
+    {text}
+  </Root>
+);
diff --git a/src/rendered/components/ShinyText/index.ts b/src/rendered/components/ShinyText/index.ts
new file mode 100644
index 0000000..3799190
--- /dev/null
+++ b/src/rendered/components/ShinyText/index.ts
@@ -0,0 +1 @@
+export { ShinyText } from './ShinyText';