Update animation name

apps/web/src/components/ui/typography/AnimatedMarkdown/AnimatedMarkdown.tsx

@@ -5,8 +5,8 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { useMarkdownComponents } from './useMarkdownComponents';
 import { MarkdownAnimation } from './animation-helpers';
-import styles from './AnimatedMarkdown.module.css';
 import { cn } from '@/lib/classMerge';
+import styles from './AnimatedMarkdown.module.css';
 import './animations.css';
 
 export interface AnimatedMarkdownProps {

apps/web/src/components/ui/typography/AnimatedMarkdown/animation-helpers.tsx

@@ -22,20 +22,20 @@ export type MarkdownAnimation =
 export type MarkdownAnimationTimingFunction = 'ease-in-out' | 'ease-out' | 'ease-in' | 'linear';
 
 export const animations: Record<MarkdownAnimation, string> = {
-  fadeIn: 'buster-fadeIn',
+  fadeIn: 'animated-md-fadeIn',
-  slideUp: 'buster-slideUp',
+  slideUp: 'animated-md-slideUp',
-  wave: 'buster-wave',
+  wave: 'animated-md-wave',
-  elastic: 'buster-elastic',
+  elastic: 'animated-md-elastic',
-  bounceIn: 'buster-bounceIn',
+  bounceIn: 'animated-md-bounceIn',
-  rotateIn: 'buster-rotateIn',
+  rotateIn: 'animated-md-rotateIn',
-  colorTransition: 'buster-colorTransition',
+  colorTransition: 'animated-md-colorTransition',
-  fadeAndScale: 'buster-fadeAndScale',
+  fadeAndScale: 'animated-md-fadeAndScale',
-  slideInFromLeft: 'buster-slideInFromLeft',
+  slideInFromLeft: 'animated-md-slideInFromLeft',
-  blurIn: 'buster-blurIn',
+  blurIn: 'animated-md-blurIn',
-  typewriter: 'buster-typewriter',
+  typewriter: 'animated-md-typewriter',
-  highlight: 'buster-highlight',
+  highlight: 'animated-md-highlight',
-  blurAndSharpen: 'buster-blurAndSharpen',
+  blurAndSharpen: 'animated-md-blurAndSharpen',
-  dropIn: 'buster-dropIn',
+  dropIn: 'animated-md-dropIn',
   none: 'none'
 };
 

apps/web/src/components/ui/typography/AnimatedMarkdown/animations.css

@@ -1,4 +1,4 @@
-@keyframes buster-fadeIn {
+@keyframes animated-md-fadeIn {
   from {
     opacity: 0;
   }
@@ -7,7 +7,7 @@
   }
 }
 
-@keyframes buster-blurIn {
+@keyframes animated-md-blurIn {
   from {
     opacity: 0;
     filter: blur(3px);
@@ -18,7 +18,7 @@
   }
 }
 
-@keyframes buster-typewriter {
+@keyframes animated-md-typewriter {
   from {
     width: 0;
     overflow: hidden;
@@ -28,7 +28,7 @@
   }
 }
 
-@keyframes buster-slideInFromLeft {
+@keyframes animated-md-slideInFromLeft {
   from {
     transform: translateX(-100%);
     opacity: 0;
@@ -39,7 +39,7 @@
   }
 }
 
-@keyframes buster-fadeAndScale {
+@keyframes animated-md-fadeAndScale {
   from {
     transform: scale(0.5);
     opacity: 0;
@@ -50,16 +50,16 @@
   }
 }
 
-@keyframes buster-colorTransition {
+@keyframes animated-md-colorTransition {
   from {
-    color: var(--buster-color-from, var(--color-primary));
+    color: var(--animated-md-color-from, var(--color-primary));
   }
   to {
-    color: var(--buster-color-to, var(--color-foreground));
+    color: var(--animated-md-color-to, var(--color-foreground));
   }
 } 
 
-@keyframes buster-rotateIn {
+@keyframes animated-md-rotateIn {
   from {
     transform: rotate(-360deg);
     opacity: 0;
@@ -70,7 +70,7 @@
   }
 }
 
-@keyframes buster-bounceIn {
+@keyframes animated-md-bounceIn {
   0%,
   40%,
   80%,
@@ -85,7 +85,7 @@
   }
 }
 
-@keyframes buster-elastic {
+@keyframes animated-md-elastic {
   0%,
   100% {
     transform: scale(1);
@@ -95,7 +95,7 @@
   }
 }
 
-@keyframes buster-highlight {
+@keyframes animated-md-highlight {
   from {
     background-color: yellow;
   }
@@ -104,7 +104,7 @@
   }
 }
 
-@keyframes buster-blurAndSharpen {
+@keyframes animated-md-blurAndSharpen {
   from {
     filter: blur(5px);
     opacity: 0;
@@ -115,7 +115,7 @@
   }
 }
 
-@keyframes buster-dropIn {
+@keyframes animated-md-dropIn {
   from {
     transform: translateY(-10%);
     opacity: 0;
@@ -126,7 +126,7 @@
   }
 }
 
-@keyframes buster-slideUp {
+@keyframes animated-md-slideUp {
   from {
     transform: translateY(10%);
     opacity: 0;
@@ -137,7 +137,7 @@
   }
 }
 
-@keyframes buster-wave {
+@keyframes animated-md-wave {
   from {
     transform: translateY(0);
   }
@@ -150,13 +150,13 @@
 }
 
 :root {
-  --buster-marker-animation: none;
+  --animated-md-marker-animation: none;
 }
 
-.buster-custom-li::marker {
+.animated-md-custom-li::marker {
-  animation: var(--buster-marker-animation);
+  animation: var(--animated-md-marker-animation);
 }
 
-.buster-code-block {
+.animated-md-code-block {
-  animation: var(--buster-marker-animation);
+  animation: var(--animated-md-marker-animation);
 }