Updating Animated text (#8533)

* Updating Animated text * fixing linting * Update sparkle/src/components/AnimatedText.tsx Co-authored-by: Philippe Rolet <[email protected]> * cleaning --------- Co-authored-by: Philippe Rolet <[email protected]>
dust-tt · Nov 8, 2024 · a5c9aa0 · a5c9aa0
1 parent 1b4a665
commit a5c9aa0
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 69 deletions.
diff --git a/sparkle/src/components/AnimatedShinyText.tsx b/sparkle/src/components/AnimatedShinyText.tsx
diff --git a/sparkle/src/components/AnimatedText.tsx b/sparkle/src/components/AnimatedText.tsx
@@ -0,0 +1,53 @@
+import { cva, VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+import React from "react";
+
+import { cn } from "@sparkle/lib/utils";
+
+const animVariants = cva(
+  "s-relative s-mx-auto s-max-w-md s-text-black/0 s-animate-shiny-text s-bg-clip-text s-bg-no-repeat [background-position:0_0] [background-size:50%_100%] s-bg-gradient-to-r",
+  {
+    variants: {
+      variant: {
+        muted:
+          "s-from-transparent s-via-primary-950/80 s-via-50%  s-to-transparent",
+        highlight:
+          "s-from-highlight s-via-highlight-800 s-via-50% s-to-highlight",
+      },
+    },
+    defaultVariants: {
+      variant: "muted",
+    },
+  }
+);
+
+const textVariants = cva("s-absolute s-inset-0", {
+  variants: {
+    variant: {
+      muted: "s-text-muted-foreground",
+      highlight: "s-text-highlight",
+    },
+  },
+  defaultVariants: {
+    variant: "muted",
+  },
+});
+
+interface AnimatedShinyTextProps {
+  children: ReactNode;
+  variant?: VariantProps<typeof textVariants>["variant"];
+  className?: string;
+}
+
+export function AnimatedText({
+  children,
+  variant,
+  className,
+}: AnimatedShinyTextProps) {
+  return (
+    <span className={cn("s-relative s-inline-block", className)}>
+      <span className={textVariants({ variant })}>{children}</span>
+      <span className={animVariants({ variant })}>{children}</span>
+    </span>
+  );
+}
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
@@ -1,4 +1,4 @@
-export { AnimatedShinyText } from "./AnimatedShinyText";
+export { AnimatedText } from "./AnimatedText";
 export { AssistantPreview } from "./AssistantPreview";
 export { Avatar } from "./Avatar";
 export { Banner } from "./Banner";

diff --git a/sparkle/src/stories/AnimatedShinyText.stories.tsx b/sparkle/src/stories/AnimatedShinyText.stories.tsx
diff --git a/sparkle/src/stories/AnimatedText.stories.tsx b/sparkle/src/stories/AnimatedText.stories.tsx
@@ -0,0 +1,46 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+
+import { AnimatedText } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/AnimatedText",
+  component: AnimatedText,
+} satisfies Meta<typeof AnimatedText>;
+
+export default meta;
+
+export function AnimatedShinyTextDemo() {
+  return (
+    <div className="s-flex s-gap-3">
+      <div className="s-z-10 s-flex s-min-h-64 s-flex-col s-items-center s-justify-center s-gap-4">
+        <div className="s-rounded-2xl s-bg-muted s-p-4">
+          <AnimatedText>Thinking...</AnimatedText>
+        </div>
+
+        <div className="s-rounded-2xl s-bg-muted s-p-4">
+          <AnimatedText>Thinking a long time</AnimatedText>
+        </div>
+
+        <div className="s-rounded-2xl s-bg-muted s-p-4">
+          <AnimatedText>Thinking a long long long long time</AnimatedText>
+        </div>
+      </div>
+      <div className="s-z-10 s-flex s-min-h-64 s-flex-col s-items-center s-justify-center s-gap-4">
+        <div className="s-rounded-2xl s-bg-highlight-50 s-p-4">
+          <AnimatedText variant="highlight">Thinking...</AnimatedText>
+        </div>
+
+        <div className="s-rounded-2xl s-bg-highlight-50 s-p-4">
+          <AnimatedText variant="highlight">Thinking a long time</AnimatedText>
+        </div>
+
+        <div className="s-rounded-2xl s-bg-highlight-50 s-p-4">
+          <AnimatedText variant="highlight">
+            Thinking a long long long long time
+          </AnimatedText>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/sparkle/tailwind.config.js b/sparkle/tailwind.config.js
@@ -31,6 +31,7 @@ const safeColorlist = safeColorsArray.flatMap((color) => [
   `s-border-${color}-100`,
   `s-border-${color}-200`,
   `s-border-${color}-300`,
+  `s-text-${color}-500`,
   `s-text-${color}-800`,
   `s-text-${color}-900`,
   `s-text-${color}-950`,
@@ -166,16 +167,16 @@ module.exports = {
           },
         },
         "shiny-text": {
-          "0%, 90%, 100%": {
-            "background-position": "calc(-100% - 100px) 0",
+          "0%": {
+            "background-position": "calc(-200%) 0",
           },
-          "30%, 60%": {
-            "background-position": "calc(100% + 100px) 0",
+          "100%": {
+            "background-position": "calc(200%) 0",
           },
         },
       },
       animation: {
-        "shiny-text": "shiny-text 8s infinite",
+        "shiny-text": "shiny-text 2s infinite",
         pulse: "pulse var(--duration) ease-out infinite",
         "opacity-pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
         "background-position-spin":