blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-Accordion/Component.tsx

@@ -10,10 +10,30 @@ import { cn } from '@/utilities/ui'
 
 type AccordionButtonVariant = 'default' | 'destructive' | 'v1' | 'v2' | 'v3' | 'v5' | 'v7'
 
+type AccordionButtonVariantName =
+  | 'default'
+  | 'destructive'
+  | 'offset_shadow'
+  | 'gradient_sheen'
+  | 'contrast_sweep'
+  | 'reveal_panel'
+  | 'underline_accent'
+
+const buttonVariantNames: Record<AccordionButtonVariant, AccordionButtonVariantName> = {
+  default: 'default',
+  destructive: 'destructive',
+  v1: 'offset_shadow',
+  v2: 'gradient_sheen',
+  v3: 'contrast_sweep',
+  v5: 'reveal_panel',
+  v7: 'underline_accent',
+}
+
 const rippleCSS = `
   .accordion-ripple-container { position: relative; overflow: hidden; }
   .accordion-ripple-effect { position: absolute; border-radius: 50%; transform: scale(0); animation: accordion-ripple-animation 600ms linear; pointer-events: none; z-index: 10; }
   @keyframes accordion-ripple-animation { to { transform: scale(4); opacity: 0; } }
+  [data-theme="light"] [data-button-variant="destructive"] { background-color: rgba(239,68,68,1) !important;}
 `
 
 const buttonAccordVariants = cva(
@@ -23,26 +43,27 @@ const buttonAccordVariants = cva(
     variants: {
       variant: {
         default:
-          'ripple-default bg-primary text-stone-200 dark:text-stone-900 hover:shadow-md hover:color-accent will-change-transform',
+          'ripple-default border border-stone-300/10 bg-stone-100 text-stone-800 dark:text-stone-900 hover:bg-stone-200 hover:shadow-md hover:color-accent will-change-transform',
         destructive:
-          'ripple-destructive bg-red-950/50 border border-red-500/50 text-stone-200 shadow-[inset_0_0_0_1px_rgba(239,68,68,0.6),inset_0_0_12px_rgba(239,68,68,0.8)] dark:text-stone-200 text-destructive-foreground hover:bg-destructive/90 will-change-transform',
-        v1: 'ripple-v1 border-[0.5px] text-stone-200 dark:text-stone-200 rounded-sm bg-transparent duration-200 hover:bg-primary shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-none border-stone-800 hover:text-zinc-200 dark:border-stone-600 dark:shadow-[3px_3px_0px_0px_var(--border-color)] active:dark:shadow-none dark:bg-zinc-950',
-        v2: 'ripple-v2 text-stone-200 dark:text-stone-900 group relative rounded-none overflow-hidden ease-in-out hover:scale-100 hover:shadow-lg bg-gradient-to-tr from-zinc-900 to-zinc-700 hover:shadow-zinc-500/30 dark:bg-gradient-to-tr dark:from-neutral-950 dark:to-neutral-900 dark:hover:shadow-zinc-700/30',
-        v3: 'ripple-v3 text-stone-200 dark:text-stone-900 relative overflow-hidden group ease-out bg-zinc-900 hover:bg-gradient-to-r hover:from-zinc-800 hover:to-zinc-700 dark:bg-zinc-50 dark:hover:from-zinc-50 dark:hover:to-zinc-100',
-        v5: 'ripple-v5 text-stone-200 dark:text-stone-200 relative overflow-hidden border shadow group invert-[1] border-stone-300 bg-zinc-50 dark:border-stone-700 dark:bg-zinc-950',
-        v7: "ripple-v7 text-stone-200 dark:text-stone-200 relative hover:no-underline px-[1px] pb-0 ease-in after:absolute after:bottom-[-2px] after:left-0 after:h-0.5 after:w-full after:translate-y-[3px] after:rounded-full after:dark:bg-zinc-50 after:bg-zinc-800 after:opacity-0 after:duration-300 after:content-[''] hover:after:-translate-y-1 hover:after:opacity-100"
-      }
-    }
-  }
+          'ripple-destructive border border-red-700 bg-red-100 text-red-950 shadow-[inset_0_0_0_1px_rgb(185_28_28/0.45),inset_0_0_12px_rgb(185_28_28/0.25)] hover:bg-red-200 dark:border-red-500/50 dark:bg-red-950/50 dark:text-stone-200 dark:shadow-[inset_0_0_0_1px_rgba(239,68,68,0.6),inset_0_0_12px_rgba(239,68,68,0.8)] dark:hover:bg-red-900/80 will-change-transform',
+        v1: 'ripple-v1 border-[0.5px] border-stone-800 bg-stone-50 text-stone-800 duration-200 hover:bg-stone-800 hover:text-stone-50 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-none dark:border-stone-600 dark:bg-zinc-950 dark:text-stone-200 dark:shadow-[3px_3px_0px_0px_var(--border-color)] active:dark:shadow-none',
+        v2: 'ripple-v2 group relative overflow-hidden rounded-none border border-stone-300/10 bg-stone-100 text-stone-800 ease-in-out hover:scale-100 hover:bg-stone-200 hover:shadow-lg hover:shadow-stone-400/30 dark:bg-gradient-to-tr dark:from-neutral-950 dark:to-neutral-900 dark:text-stone-100 dark:hover:shadow-zinc-700/30',
+        v3: 'ripple-v3 group relative overflow-hidden border border-stone-300/10 bg-stone-100 text-stone-800 ease-out hover:bg-gradient-to-r hover:from-stone-100 hover:to-stone-200 dark:bg-zinc-50 dark:text-stone-900 dark:hover:from-zinc-50 dark:hover:to-zinc-100',
+        v5: 'ripple-v5 group relative overflow-hidden border border-stone-300/10 bg-stone-50 text-stone-800 shadow dark:border-stone-700 dark:bg-zinc-950 dark:text-stone-200',
+        v7: "ripple-v7 text-stone-800 dark:text-stone-200 relative hover:no-underline px-[1px] pb-0 ease-in after:absolute after:bottom-[-2px] after:left-0 after:h-1 after:w-full after:translate-y-[3px] after:rounded-full after:dark:bg-indigo-50 after:bg-indigo-800 after:opacity-0 after:duration-300 after:content-[''] hover:after:-translate-y-1 hover:after:opacity-100",
+      },
+    },
+  },
 )
 
 interface ButtonAccordProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonAccordVariants> {}
 
 const ButtonAccord = React.forwardRef<HTMLButtonElement, ButtonAccordProps>(function ButtonAccord(
   { className, variant, onClick, children, ...props },
-  ref
+  ref,
 ) {
   useEffect(() => {
     const style = document.createElement('style')
@@ -60,7 +81,8 @@ const ButtonAccord = React.forwardRef<HTMLButtonElement, ButtonAccordProps>(func
     ripple.style.left = `${event.clientX - rect.left}px`
     ripple.style.top = `${event.clientY - rect.top}px`
     ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`
-    ripple.style.backgroundColor = variant === 'destructive' ? 'rgba(255, 0, 0, 0.3)' : 'rgba(139, 92, 246, 0.45)'
+    ripple.style.backgroundColor =
+      variant === 'destructive' ? 'rgba(255, 0, 0, 0.3)' : 'rgba(139, 92, 246, 0.45)'
 
     button.appendChild(ripple)
     ripple.addEventListener('animationend', () => ripple.remove())
@@ -70,7 +92,9 @@ const ButtonAccord = React.forwardRef<HTMLButtonElement, ButtonAccordProps>(func
   const content =
     variant === 'v5' ? (
       <>
-        <span className="absolute inset-0 !border-none rounded-none flex items-center justify-center size-full duration-700 -translate-x-full group-hover:translate-x-0 bg-zinc-800 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-100" />
+        <span className="absolute inset-0 !border-none rounded-none flex size-full -translate-x-full items-center justify-center bg-stone-800 text-stone-50 duration-700 group-hover:translate-x-0 dark:bg-zinc-100 dark:text-zinc-900">
+          {children}
+        </span>
         <span className="absolute flex items-center justify-center w-full h-full transition-all duration-500 ease-out transform group-hover:translate-x-full">
           {children}
         </span>
@@ -95,6 +119,7 @@ const ButtonAccord = React.forwardRef<HTMLButtonElement, ButtonAccordProps>(func
     <button
       ref={ref}
       onClick={handleClick}
+      data-button-variant={buttonVariantNames[variant || 'default']}
       className={cn(buttonAccordVariants({ variant }), className)}
       {...props}
     >
@@ -140,12 +165,9 @@ export interface AccordionBlockProps {
   accordionButtonVariant?: AccordionButtonVariant
 }
 
-export const AccordionItem: React.FC<AccordionItemData & { buttonVariant?: AccordionButtonVariant }> = ({
-  title,
-  content,
-  accordionId,
-  buttonVariant = 'v2'
-}) => {
+export const AccordionItem: React.FC<
+  AccordionItemData & { buttonVariant?: AccordionButtonVariant }
+> = ({ title, content, accordionId, buttonVariant = 'v2' }) => {
   const [isOpen, setIsOpen] = useState(false)
   const [height, setHeight] = useState('0px')
   const contentRef = useRef<HTMLDivElement>(null)
@@ -162,7 +184,7 @@ export const AccordionItem: React.FC<AccordionItemData & { buttonVariant?: Accor
       className={`accordion-item max-w-full ${isOpen ? 'mb-4 shadow-2xl' : 'mb-0 shadow-md'}`}
       id={accordionId}
     >
-      <div className="accordion-title-button shadow-lg backdrop-blur-lg">
+      <div className="accordion-title-button border border-stone-300/10 bg-stone-100/80 shadow-lg backdrop-blur-lg dark:border-stone-800 dark:bg-stone-950/20">
         <ButtonAccord
           suppressHydrationWarning
           suppressContentEditableWarning
@@ -178,29 +200,23 @@ export const AccordionItem: React.FC<AccordionItemData & { buttonVariant?: Accor
             <RichText className={TITLE_CLS} data={title as any} enableGutter={false} />
           </div>
           {isOpen ? (
-            <ChevronUp
-              className="chevron-up-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 color-accent dark:text-[var(--color-alt)]"
-              style={{ color: 'var(--active)' }}
-            />
+            <ChevronUp className="chevron-up-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 text-stone-900 dark:text-stone-100 mix-blend-difference" />
           ) : (
-            <ChevronDown
-              className="chevron-down-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 color-accent dark:text-[var(--color-alt)]"
-              style={{ color: 'var(--active)' }}
-            />
+            <ChevronDown className="chevron-down-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 text-stone-900 dark:text-stone-100 mix-blend-difference" />
           )}
         </ButtonAccord>
-        <AccordionSeparator className="accordion-separator dd-bg-50" />
+        <AccordionSeparator className="accordion-separator bg-stone-300 dark:bg-border" />
         <div
           ref={contentRef}
           id={`accordion-content-${accordionId}`}
           style={{
             height,
-            transition: 'height 0.3s ease'
+            transition: 'height 0.3s ease',
           }}
-          className="accordion-content-wrapper overflow-hidden"
+          className="accordion-content-wrapper overflow-hidden border-x border-b border-stone-300/10 bg-stone-50 dark:border-stone-800 dark:bg-transparent"
         >
           <RichText
-            className="p-4 color-text bg-[rgba(159,159,159,0.18)]"
+            className="bg-stone-100/80 p-4 text-stone-700 dark:bg-[rgba(159,159,159,0.18)] dark:text-stone-200"
             data={content as any}
             enableGutter={false}
           />
@@ -210,9 +226,12 @@ export const AccordionItem: React.FC<AccordionItemData & { buttonVariant?: Accor
   )
 }
 
-export const DDAccordion: React.FC<AccordionBlockProps> = ({ items, accordionButtonVariant = 'v2' }) => {
+export const DDAccordion: React.FC<AccordionBlockProps> = ({
+  items,
+  accordionButtonVariant = 'v2',
+}) => {
   return (
-    <div className="accordion-container max-w-full">
+    <div className="accordion-container mx-auto my-6 w-full max-w-5xl space-y-3 px-4">
       {items.map((item, index) => (
         <AccordionItem
           key={item.accordionId || `accordion-item-${index}`}
@@ -226,4 +245,4 @@ export const DDAccordion: React.FC<AccordionBlockProps> = ({ items, accordionBut
   )
 }
 
-export default DDAccordion
+export default DDAccordion

package/templates/blocks/DD-Accordion/config.ts

@@ -1,34 +1,32 @@
-import type { Block } from 'payload'
-
-import { BlocksFeature } from '@payloadcms/richtext-lexical'
-
-import { defaultLexical } from '@/fields/defaultLexical'
-
-import { DDBanner } from '@/blocks/DD-Banner/config'
-import { Code } from '@/blocks/Code/config'
-import { MediaBlock } from '@/blocks/MediaBlock/config'
-import { DDIconButton } from '../DD-IconButton/config'
-import { DDAnimText } from '@/blocks/DD-AnimText/config'
-
-export const DDAccordion: Block = {
-  slug: 'DD-Accordion',
-  interfaceName: 'DDAccordion',
-  labels: {
-    singular: 'Accordion Block',
-    plural: 'Accordion Blocks'
-  },
-  fields: [
-    {
-      name: 'accordionId',
-      type: 'text',
-      hidden: true,
-      label: 'Accordian ID',
-      required: false,
-      admin: {
-        description: 'Unique ID for the accordian block',
-        width: '50%'
-      }
-    },
+import type { Block } from 'payload'
+
+import { BlocksFeature } from '@payloadcms/richtext-lexical'
+import { createDefaultLexical } from '@/fields/defaultLexical'
+
+import { DDBanner } from '@/blocks/DD-Banner/config'
+import { Code } from '@/blocks/Code/config'
+import { MediaBlock } from '@/blocks/MediaBlock/config'
+import { DDAnimText } from '@/blocks/DD-AnimText/config'
+
+export const DDAccordion: Block = {
+  slug: 'DD-Accordion',
+  interfaceName: 'DDAccordion',
+  labels: {
+    singular: 'Accordion Block',
+    plural: 'Accordion Blocks',
+  },
+  fields: [
+    {
+      name: 'accordionId',
+      type: 'text',
+      hidden: true,
+      label: 'Accordian ID',
+      required: false,
+      admin: {
+        description: 'Unique ID for the accordian block',
+        width: '50%',
+      },
+    },
     {
       name: 'accordionButtonVariant',
       type: 'select',
@@ -41,33 +39,47 @@ export const DDAccordion: Block = {
         { label: 'Gradient Sheen', value: 'v2' },
         { label: 'Contrast Sweep', value: 'v3' },
         { label: 'Reveal Panel', value: 'v5' },
-        { label: 'Underline Accent', value: 'v7' }
+        { label: 'Underline Accent', value: 'v7' },
       ],
       admin: {
-        description: 'Selects the local ButtonAccord visual treatment for every accordion title button.',
-        width: '50%'
-      }
-    },    {
-      name: 'items',
-      type: 'array',
-      label: 'Accordion Items',
-      required: true,
-      fields: [
-        {
-          name: 'title',
-          label: 'Accordian Title',
-          type: 'richText',
-          editor: defaultLexical,
-          required: false
-        },
-        {
-          name: 'content',
-          label: 'Accordian Content',
-          type: 'richText',
-          editor: defaultLexical,
-          required: false
-        }
-      ]
-    }
-  ]
-}
+        description:
+          'Selects the local ButtonAccord visual treatment for every accordion title button.',
+        width: '50%',
+      },
+    },
+    {
+      name: 'items',
+      type: 'array',
+      label: 'Accordion Items',
+      required: true,
+      fields: [
+        {
+          name: 'title',
+          label: 'Accordian Title',
+          type: 'richText',
+          editor: createDefaultLexical({
+            features: [
+              BlocksFeature({
+                blocks: [DDBanner, Code, MediaBlock, DDAnimText], // No Buttons in Button(Title)
+              }),
+            ],
+          }),
+          required: false,
+        },
+        {
+          name: 'content',
+          label: 'Accordian Content',
+          type: 'richText',
+          editor: createDefaultLexical({
+            features: [
+              BlocksFeature({
+                blocks: [DDBanner, Code, MediaBlock, DDAnimText], // No Buttons in Button(Title)
+              }),
+            ],
+          }),
+          required: false,
+        },
+      ],
+    },
+  ],
+}

package/templates/blocks/DD-AnimText/Component.tsx

@@ -66,31 +66,48 @@ type Props = {
   shinyColor?: string
 }
 
+const VARIATION_COLOR_CLASSES: Record<NonNullable<Props['variation']>, string> = {
+  'gradual-spacing': 'text-violet-700 dark:text-violet-300',
+  typing: 'text-blue-700 dark:text-blue-300',
+  'staggered-fade': 'text-emerald-700 dark:text-emerald-300',
+  rotate: 'text-amber-700 dark:text-amber-300',
+  'letters-pull-up': 'text-rose-700 dark:text-rose-300',
+  'words-pull-up': 'text-cyan-700 dark:text-cyan-300',
+  'blur-in': 'text-indigo-700 dark:text-indigo-300',
+  'text-fade-up': 'text-teal-700 dark:text-teal-300',
+  'text-fade-down': 'text-orange-700 dark:text-orange-300',
+  'no-animation': 'text-slate-800 dark:text-slate-200',
+  'split-text': 'text-fuchsia-700 dark:text-fuchsia-300',
+  'text-type': 'text-sky-700 dark:text-sky-300',
+  'shuffle-text': 'text-lime-700 dark:text-lime-300',
+  'shiny-text': 'text-purple-700 dark:text-purple-300',
+}
+
 // Staggered Animation Variants
 const containerVariants = {
   hidden: {
-    opacity: 0
+    opacity: 0,
   },
   visible: {
     opacity: 1,
     transition: {
-      staggerChildren: 0.2
-    }
-  }
+      staggerChildren: 0.2,
+    },
+  },
 }
 
 const childVariants = {
   hidden: {
     opacity: 0,
-    y: 20
+    y: 20,
   },
   visible: {
     opacity: 1,
     y: 0,
     transition: {
-      duration: 0.5
-    }
-  }
+      duration: 0.5,
+    },
+  },
 }
 
 // Inline SplitText Component with scroll trigger repeat
@@ -113,7 +130,7 @@ export const SplitText: React.FC<SplitTextProps> = ({
   ease = 'back.out(1.7)',
   yOffset = 80,
   opacity = true,
-  trigger = 'view'
+  trigger = 'view',
 }) => {
   const ref = useRef<HTMLParagraphElement>(null)
   const [fontsLoaded, setFontsLoaded] = useState<boolean>(false)
@@ -145,7 +162,7 @@ export const SplitText: React.FC<SplitTextProps> = ({
 
       const splitInstance = new GSAPSplitText(el, {
         type: 'chars',
-        charsClass: 'split-char'
+        charsClass: 'split-char',
       })
 
       const chars = splitInstance.chars || []
@@ -153,7 +170,7 @@ export const SplitText: React.FC<SplitTextProps> = ({
       // Set initial state
       gsap.set(chars, {
         opacity: opacity ? 0 : 1,
-        y: yOffset
+        y: yOffset,
       })
 
       const animateIn = () => {
@@ -163,7 +180,7 @@ export const SplitText: React.FC<SplitTextProps> = ({
           duration,
           ease,
           stagger: delay,
-          force3D: true
+          force3D: true,
         })
       }
 
@@ -173,7 +190,7 @@ export const SplitText: React.FC<SplitTextProps> = ({
           y: yOffset,
           duration: duration * 0.5,
           ease: 'power2.in',
-          stagger: delay * 0.5
+          stagger: delay * 0.5,
         })
       }
 
@@ -185,7 +202,7 @@ export const SplitText: React.FC<SplitTextProps> = ({
           onEnter: animateIn,
           onLeave: animateOut,
           onEnterBack: animateIn,
-          onLeaveBack: animateOut
+          onLeaveBack: animateOut,
         })
       } else if (trigger === 'hover') {
         el.addEventListener('mouseenter', animateIn)
@@ -215,8 +232,8 @@ export const SplitText: React.FC<SplitTextProps> = ({
     },
     {
       dependencies: [text, delay, duration, ease, yOffset, opacity, trigger, fontsLoaded],
-      scope: ref
-    }
+      scope: ref,
+    },
   )
 
   return (
@@ -225,7 +242,7 @@ export const SplitText: React.FC<SplitTextProps> = ({
       className={`split-parent ${className}`}
       style={{
         // Ensure styles are inherited by split characters
-        display: 'inline-block'
+        display: 'inline-block',
       }}
     >
       {text}
@@ -251,7 +268,7 @@ export const TextType: React.FC<TextTypeProps> = ({
   delay = 0,
   showCursor = true,
   cursorChar = '|',
-  autoStart = true
+  autoStart = true,
 }) => {
   const [displayedText, setDisplayedText] = useState('')
   const [isTyping, setIsTyping] = useState(false)
@@ -295,7 +312,7 @@ export const TextType: React.FC<TextTypeProps> = ({
         duration: 0.5,
         repeat: -1,
         yoyo: true,
-        ease: 'power2.inOut'
+        ease: 'power2.inOut',
       })
     }
   }, [showCursor])
@@ -308,7 +325,7 @@ export const TextType: React.FC<TextTypeProps> = ({
         trigger: containerRef.current,
         start: 'top 80%',
         onEnter: startTyping,
-        once: true // Only trigger once
+        once: true, // Only trigger once
       })
     }
 
@@ -347,7 +364,7 @@ export const Shuffle: React.FC<ShuffleProps> = ({
   duration = 600,
   speed = 100,
   chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
-  autoStart = false
+  autoStart = false,
 }) => {
   const [displayText, setDisplayText] = useState(text)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -371,7 +388,7 @@ export const Shuffle: React.FC<ShuffleProps> = ({
             }
             return chars[Math.floor(Math.random() * chars.length)]
           })
-          .join('')
+          .join(''),
       )
 
       if (iteration >= originalText.length) {
@@ -400,7 +417,7 @@ export const Shuffle: React.FC<ShuffleProps> = ({
         onEnter: shuffle,
         onLeave: resetText,
         onEnterBack: shuffle,
-        onLeaveBack: resetText
+        onLeaveBack: resetText,
       })
     }
   }, [shuffle, resetText, autoStart])
@@ -432,7 +449,7 @@ export const ShinyText: React.FC<ShinyTextProps> = ({
   duration = 2,
   delay = 0,
   repeat = true,
-  color = 'rgba(255, 255, 255, 0.6)'
+  color = 'rgba(255, 255, 255, 0.6)',
 }) => {
   const ref = useRef<HTMLDivElement>(null)
   const containerRef = useRef(null)
@@ -443,8 +460,8 @@ export const ShinyText: React.FC<ShinyTextProps> = ({
     show: (i: number) => ({
       y: 0,
       opacity: 1,
-      transition: { delay: i * 0.1 }
-    })
+      transition: { delay: i * 0.1 },
+    }),
   }
 
   const letters = text.split('')
@@ -494,16 +511,16 @@ export const ShinyText: React.FC<ShinyTextProps> = ({
         backgroundPosition: '200% 0',
         WebkitBackgroundClip: 'text',
         backgroundClip: 'text',
-        color: 'transparent'
+        color: 'transparent',
       })
         .to(ref.current, {
           backgroundPosition: '-200% 0',
           duration,
-          ease: 'none'
+          ease: 'none',
         })
         .set(ref.current, {
           backgroundImage: 'none',
-          color: 'inherit'
+          color: 'inherit',
         })
     }
 
@@ -512,7 +529,7 @@ export const ShinyText: React.FC<ShinyTextProps> = ({
       start: 'top 80%',
       end: 'bottom 20%',
       onEnter: shine,
-      onEnterBack: shine
+      onEnterBack: shine,
     })
   }, [duration, delay, repeat, color])
 
@@ -562,7 +579,7 @@ export const DDAnimText: React.FC<Props> = ({
   shuffleDuration = 0.8,
   // Shiny props
   shinyDuration = 5,
-  shinyColor = 'rgba(255, 255, 255, 0.6)'
+  shinyColor = 'rgba(255, 255, 255, 0.6)',
 }) => {
   // Generate unique ID for this component instance
   const uniqueId = useId()
@@ -603,7 +620,8 @@ export const DDAnimText: React.FC<Props> = ({
           aniTextBoxClass,
           className,
           aniTextBoxContainerClass,
-          'animated-text-container'
+          'animated-text-container text-xl md:text-4xl lg:text-5xl font-medium [&_.payload-richtext]:text-current [&_.payload-richtext_*]:text-current',
+          VARIATION_COLOR_CLASSES[variation],
         )}
       >
         {/* Animations that require plain text */}