blocks-dusted 0.1.11 → 0.1.13

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 */}