From 50663544e177e2164946f9298baa12cef420d1c1 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Wed, 3 Sep 2025 23:53:06 -0300
Subject: [PATCH] feat: add ShinyText component for animated text effects and
 integrate into HomeComponent

---
 apps/web/src/components/ShinyText.css | 27 +++++++++++++++++++++++++++
 apps/web/src/components/ShinyText.jsx | 24 ++++++++++++++++++++++++
 apps/web/src/routes/index.tsx         | 11 +++++++++--
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/components/ShinyText.css
 create mode 100644 apps/web/src/components/ShinyText.jsx

diff --git a/apps/web/src/components/ShinyText.css b/apps/web/src/components/ShinyText.css
new file mode 100644
index 0000000..93db681
--- /dev/null
+++ b/apps/web/src/components/ShinyText.css
@@ -0,0 +1,27 @@
+.shiny-text {
+  color: #ffffffbb; /* Adjust this color to change intensity/style */
+  background: linear-gradient(
+    120deg,
+    rgba(255, 255, 255, 0) 40%,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0) 60%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  display: inline-block;
+  animation: shine 5s linear infinite;
+}
+
+@keyframes shine {
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+}
+
+.shiny-text.disabled {
+  animation: none;
+}
diff --git a/apps/web/src/components/ShinyText.jsx b/apps/web/src/components/ShinyText.jsx
new file mode 100644
index 0000000..4eef529
--- /dev/null
+++ b/apps/web/src/components/ShinyText.jsx
@@ -0,0 +1,24 @@
+import "./ShinyText.css";
+
+const ShinyText = ({
+  type,
+  text,
+  disabled = false,
+  speed = 5,
+  className = "",
+}) => {
+  const animationDuration = `${speed}s`;
+
+  const _tag = type || "div";
+
+  return (
+    <_tag
+      className={`shiny-text ${disabled ? "disabled" : ""} ${className}`}
+      style={{ animationDuration }}
+    >
+      {text}
+    </_tag>
+  );
+};
+
+export default ShinyText;
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index e7639db..bb174b2 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -11,6 +11,7 @@ import {
 } from "lucide-react";
 import type { ComponentType } from "react";
 import DotGrid from "@/components/DotGrid";
+import ShinyText from "@/components/ShinyText";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { trpc } from "@/utils/trpc";
@@ -293,9 +294,15 @@ function HomeComponent() {
         <section className="container mx-auto max-w-7xl px-4 pt-14 pb-24 sm:pt-20 sm:pb-32">
           <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
             <HealthBadge />
-            <h1 className="mt-6 animate-shine bg-[linear-gradient(120deg,white,white_40%,rgba(255,255,255,0.7)_60%,rgba(255,255,255,0.3))] bg-clip-text font-semibold text-5xl text-transparent leading-tight [background-size:200%_100%] sm:text-6xl md:text-7xl lg:text-8xl">
+            {/* <h1 className="mt-6 animate-shine bg-[linear-gradient(120deg,white,white_40%,rgba(255,255,255,0.7)_60%,rgba(255,255,255,0.3))] bg-clip-text font-semibold text-5xl text-transparent leading-tight [background-size:200%_100%] sm:text-6xl md:text-7xl lg:text-8xl">
               Reflecto
-            </h1>
+            </h1> */}
+            <ShinyText
+              className="mt-6 animate-shine font-semibold text-5xl leading-tight sm:text-6xl md:text-7xl lg:text-8xl"
+              speed={3}
+              text="Reflecto"
+              type="h1"
+            />
             <p className="mt-5 text-balance text-lg text-muted-foreground sm:text-xl">
               Your AI‑powered second brain. Capture voice, images, and
               text—Reflecto turns it into a searchable, connected knowledge