blocks-dusted 0.1.10 → 0.1.11

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

@@ -0,0 +1,788 @@
+'use client'
+
+import React, { useId, useRef, useEffect, useState, useCallback } from 'react'
+
+import { AnimatePresence, motion, useInView } from 'framer-motion'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { SplitText as GSAPSplitText } from 'gsap/SplitText'
+import { useGSAP } from '@gsap/react'
+import { TextFade } from '@/components/ui/anims/fade'
+import { GradualSpacing } from '@/components/ui/anims/gradual-spacing'
+import { TypingEffect } from '@/components/ui/anims/typing-effect'
+import { StaggeredFade } from '@/components/ui/anims/staggered-fade'
+import { RotateWords } from '@/components/ui/anims/rotate-words'
+import { LettersPullUp, WordsPullUp } from '@/components/ui/anims/pull-up'
+import { BlurIn } from '@/components/ui/anims/blur-in'
+import { ShuffleText } from '@/components/ui/anims/shuffle-text'
+import RichText from '@/components/RichText/index'
+import { cn } from '@/utilities/ui'
+// import './index.scss'
+
+// Register GSAP plugins
+gsap.registerPlugin(ScrollTrigger, GSAPSplitText, useGSAP)
+
+type Props = {
+  animatedText?: string | any
+  plainText?: string
+  rotateWords?: string
+  variation?:
+    | 'gradual-spacing'
+    | 'typing'
+    | 'staggered-fade'
+    | 'rotate'
+    | 'letters-pull-up'
+    | 'words-pull-up'
+    | 'blur-in'
+    | 'text-fade-up'
+    | 'text-fade-down'
+    | 'no-animation'
+    | 'split-text'
+    | 'text-type'
+    | 'shuffle-text'
+    | 'shiny-text'
+  className?: string
+  aniTextClass?: string
+  aniTextBoxClass?: string
+  aniTextBoxContainerClass?: string
+  animTextScrollSpeed?: string
+  // SplitText props from config
+  splitTrigger?: 'view' | 'hover' | 'click'
+  splitDelay?: number
+  splitDuration?: number
+  splitEase?: string
+  splitYOffset?: number
+  splitOpacity?: boolean
+  // TextType props from config
+  typeSpeed?: number
+  typeDelay?: number
+  showCursor?: boolean
+  cursorChar?: string
+  autoStart?: boolean
+  // Shuffle props from config (simplified)
+  shuffleDuration?: number
+  // Shiny props from config
+  shinyDuration?: number
+  shinyColor?: string
+}
+
+// Staggered Animation Variants
+const containerVariants = {
+  hidden: {
+    opacity: 0
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2
+    }
+  }
+}
+
+const childVariants = {
+  hidden: {
+    opacity: 0,
+    y: 20
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5
+    }
+  }
+}
+
+// Inline SplitText Component with scroll trigger repeat
+interface SplitTextProps {
+  text: string
+  className?: string
+  delay?: number
+  duration?: number
+  ease?: string
+  yOffset?: number
+  opacity?: boolean
+  trigger?: 'view' | 'hover' | 'click'
+}
+
+export const SplitText: React.FC<SplitTextProps> = ({
+  text,
+  className = '',
+  delay = 0.05,
+  duration = 0.6,
+  ease = 'back.out(1.7)',
+  yOffset = 80,
+  opacity = true,
+  trigger = 'view'
+}) => {
+  const ref = useRef<HTMLParagraphElement>(null)
+  const [fontsLoaded, setFontsLoaded] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (document.fonts.status === 'loaded') {
+      setFontsLoaded(true)
+    } else {
+      document.fonts.ready.then(() => {
+        setFontsLoaded(true)
+      })
+    }
+  }, [])
+
+  useGSAP(
+    () => {
+      if (!ref.current || !text || !fontsLoaded) return
+
+      const el = ref.current as HTMLElement & {
+        _rbsplitInstance?: GSAPSplitText
+      }
+
+      if (el._rbsplitInstance) {
+        try {
+          el._rbsplitInstance.revert()
+        } catch (_) {}
+        el._rbsplitInstance = undefined
+      }
+
+      const splitInstance = new GSAPSplitText(el, {
+        type: 'chars',
+        charsClass: 'split-char'
+      })
+
+      const chars = splitInstance.chars || []
+
+      // Set initial state
+      gsap.set(chars, {
+        opacity: opacity ? 0 : 1,
+        y: yOffset
+      })
+
+      const animateIn = () => {
+        gsap.to(chars, {
+          opacity: 1,
+          y: 0,
+          duration,
+          ease,
+          stagger: delay,
+          force3D: true
+        })
+      }
+
+      const animateOut = () => {
+        gsap.to(chars, {
+          opacity: opacity ? 0 : 1,
+          y: yOffset,
+          duration: duration * 0.5,
+          ease: 'power2.in',
+          stagger: delay * 0.5
+        })
+      }
+
+      if (trigger === 'view') {
+        ScrollTrigger.create({
+          trigger: el,
+          start: 'top 80%',
+          end: 'bottom 20%',
+          onEnter: animateIn,
+          onLeave: animateOut,
+          onEnterBack: animateIn,
+          onLeaveBack: animateOut
+        })
+      } else if (trigger === 'hover') {
+        el.addEventListener('mouseenter', animateIn)
+        el.addEventListener('mouseleave', animateOut)
+      } else if (trigger === 'click') {
+        el.addEventListener('click', () => {
+          animateOut()
+          setTimeout(animateIn, duration * 500)
+        })
+      }
+
+      el._rbsplitInstance = splitInstance
+
+      return () => {
+        ScrollTrigger.getAll().forEach((st) => {
+          if (st.trigger === el) st.kill()
+        })
+        if (trigger === 'hover') {
+          el.removeEventListener('mouseenter', animateIn)
+          el.removeEventListener('mouseleave', animateOut)
+        }
+        try {
+          splitInstance.revert()
+        } catch (_) {}
+        el._rbsplitInstance = undefined
+      }
+    },
+    {
+      dependencies: [text, delay, duration, ease, yOffset, opacity, trigger, fontsLoaded],
+      scope: ref
+    }
+  )
+
+  return (
+    <p
+      ref={ref}
+      className={`split-parent ${className}`}
+      style={{
+        // Ensure styles are inherited by split characters
+        display: 'inline-block'
+      }}
+    >
+      {text}
+    </p>
+  )
+}
+
+// Inline TextType Component with scroll trigger
+interface TextTypeProps {
+  text: string
+  className?: string
+  speed?: number
+  delay?: number
+  showCursor?: boolean
+  cursorChar?: string
+  autoStart?: boolean
+}
+
+export const TextType: React.FC<TextTypeProps> = ({
+  text,
+  className = '',
+  speed = 100,
+  delay = 0,
+  showCursor = true,
+  cursorChar = '|',
+  autoStart = true
+}) => {
+  const [displayedText, setDisplayedText] = useState('')
+  const [isTyping, setIsTyping] = useState(false)
+  const [hasTyped, setHasTyped] = useState(false)
+  const cursorRef = useRef<HTMLSpanElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const startTyping = useCallback(() => {
+    if (isTyping || hasTyped) return
+    setIsTyping(true)
+    setDisplayedText('')
+
+    let i = 0
+    const typeChar = () => {
+      if (i < text.length) {
+        setDisplayedText(text.slice(0, i + 1))
+        i++
+        timeoutRef.current = setTimeout(typeChar, speed)
+      } else {
+        setIsTyping(false)
+        setHasTyped(true)
+      }
+    }
+
+    timeoutRef.current = setTimeout(typeChar, delay)
+  }, [text, speed, delay, isTyping, hasTyped])
+
+  const resetTyping = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    setIsTyping(false)
+    // Don't reset hasTyped or displayedText to prevent re-typing
+  }, [])
+
+  useEffect(() => {
+    if (showCursor && cursorRef.current) {
+      gsap.to(cursorRef.current, {
+        opacity: 0,
+        duration: 0.5,
+        repeat: -1,
+        yoyo: true,
+        ease: 'power2.inOut'
+      })
+    }
+  }, [showCursor])
+
+  useGSAP(() => {
+    if (!containerRef.current) return
+
+    if (autoStart) {
+      ScrollTrigger.create({
+        trigger: containerRef.current,
+        start: 'top 80%',
+        onEnter: startTyping,
+        once: true // Only trigger once
+      })
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [startTyping, autoStart])
+
+  return (
+    <div ref={containerRef} className={`text-type ${className}`}>
+      <span className="text-type__content">{displayedText}</span>
+      {showCursor && (
+        <span ref={cursorRef} className="text-type__cursor">
+          {cursorChar}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// Inline Shuffle Component with scroll trigger
+interface ShuffleProps {
+  text: string
+  className?: string
+  duration?: number
+  speed?: number
+  chars?: string
+  autoStart?: boolean
+}
+
+export const Shuffle: React.FC<ShuffleProps> = ({
+  text,
+  className = 'ShuffleText',
+  duration = 600,
+  speed = 100,
+  chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
+  autoStart = false
+}) => {
+  const [displayText, setDisplayText] = useState(text)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const isShufflingRef = useRef(false)
+
+  const shuffle = useCallback(() => {
+    if (isShufflingRef.current) return
+    isShufflingRef.current = true
+
+    const originalText = text
+    const iterations = Math.ceil(duration / speed)
+    let iteration = 0
+
+    const shuffleInterval = setInterval(() => {
+      setDisplayText(
+        originalText
+          .split('')
+          .map((char, index) => {
+            if (index < iteration) {
+              return originalText[index]
+            }
+            return chars[Math.floor(Math.random() * chars.length)]
+          })
+          .join('')
+      )
+
+      if (iteration >= originalText.length) {
+        clearInterval(shuffleInterval)
+        setDisplayText(originalText)
+        isShufflingRef.current = false
+      }
+
+      iteration += 1 / 3
+    }, speed)
+  }, [text, duration, speed, chars])
+
+  const resetText = useCallback(() => {
+    isShufflingRef.current = false
+    setDisplayText(text)
+  }, [text])
+
+  useGSAP(() => {
+    if (!containerRef.current) return
+
+    if (autoStart) {
+      ScrollTrigger.create({
+        trigger: containerRef.current,
+        start: 'top 80%',
+        end: 'bottom 20%',
+        onEnter: shuffle,
+        onLeave: resetText,
+        onEnterBack: shuffle,
+        onLeaveBack: resetText
+      })
+    }
+  }, [shuffle, resetText, autoStart])
+
+  return (
+    <div
+      ref={containerRef}
+      className={`shuffle-text ${className}`}
+      onClick={!autoStart ? shuffle : undefined}
+    >
+      {displayText}
+    </div>
+  )
+}
+
+// Inline ShinyText Component with scroll trigger
+interface ShinyTextProps {
+  text: string
+  className?: string
+  duration?: number
+  delay?: number
+  repeat?: boolean
+  color?: string
+}
+
+export const ShinyText: React.FC<ShinyTextProps> = ({
+  text,
+  className = '',
+  duration = 2,
+  delay = 0,
+  repeat = true,
+  color = 'rgba(255, 255, 255, 0.6)'
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const containerRef = useRef(null)
+  const isInView = useInView(containerRef, { once: false })
+
+  const staggerVariants = {
+    hidden: { opacity: 0, y: 20 },
+    show: (i: number) => ({
+      y: 0,
+      opacity: 1,
+      transition: { delay: i * 0.1 }
+    })
+  }
+
+  const letters = text.split('')
+
+  // Helper function to convert color to lower opacity
+  const getLowOpacityColor = (inputColor: string): string => {
+    // Handle hex colors
+    if (inputColor.startsWith('#')) {
+      const hex = inputColor.replace('#', '')
+      const r = parseInt(hex.substring(0, 2), 16)
+      const g = parseInt(hex.substring(2, 4), 16)
+      const b = parseInt(hex.substring(4, 6), 16)
+      return `rgba(${r}, ${g}, ${b}, 0.55)`
+    }
+
+    // Handle rgba colors
+    if (inputColor.startsWith('rgba')) {
+      const match = inputColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/)
+      if (match) {
+        return `rgba(${match[1]}, ${match[2]}, ${match[3]}, 0.55)`
+      }
+    }
+
+    // Handle rgb colors
+    if (inputColor.startsWith('rgb')) {
+      const match = inputColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+      if (match) {
+        return `rgba(${match[1]}, ${match[2]}, ${match[3]}, 0.15)`
+      }
+    }
+
+    // Fallback to transparent
+    return 'transparent'
+  }
+
+  useGSAP(() => {
+    if (!ref.current) return
+
+    const lowOpacityColor = getLowOpacityColor(color)
+
+    const shine = () => {
+      const tl = gsap.timeline({ repeat: repeat ? -1 : 0, delay })
+
+      tl.set(ref.current, {
+        backgroundImage: `linear-gradient(110deg, ${lowOpacityColor} 35%, ${color} 45%, ${color} 55%, ${lowOpacityColor} 65%)`,
+        backgroundSize: '200% 100%',
+        backgroundPosition: '200% 0',
+        WebkitBackgroundClip: 'text',
+        backgroundClip: 'text',
+        color: 'transparent'
+      })
+        .to(ref.current, {
+          backgroundPosition: '-200% 0',
+          duration,
+          ease: 'none'
+        })
+        .set(ref.current, {
+          backgroundImage: 'none',
+          color: 'inherit'
+        })
+    }
+
+    ScrollTrigger.create({
+      trigger: ref.current,
+      start: 'top 80%',
+      end: 'bottom 20%',
+      onEnter: shine,
+      onEnterBack: shine
+    })
+  }, [duration, delay, repeat, color])
+
+  return (
+    <motion.span
+      ref={containerRef}
+      initial="hidden"
+      animate={isInView ? 'show' : 'hidden'}
+      className={className}
+    >
+      <BlurIn>
+        <div ref={ref} className={`shiny-text ${className}`}>
+          {letters.map((char, i) => (
+            <motion.span key={`${char}-${i}`} variants={staggerVariants} custom={i}>
+              {char}
+            </motion.span>
+          ))}
+        </div>
+      </BlurIn>
+    </motion.span>
+  )
+}
+
+export const DDAnimText: React.FC<Props> = ({
+  animatedText = '',
+  plainText = '',
+  rotateWords = '',
+  variation = 'text-fade-up',
+  className,
+  aniTextClass,
+  aniTextBoxClass,
+  aniTextBoxContainerClass,
+  // SplitText props
+  splitTrigger = 'view',
+  splitDelay = 0.05,
+  splitDuration = 0.6,
+  splitEase = 'back.out(1.7)',
+  splitYOffset = 80,
+  splitOpacity = true,
+  // TextType props
+  typeSpeed = 100,
+  typeDelay = 0,
+  showCursor = true,
+  cursorChar = '|',
+  autoStart = true,
+  // Shuffle props (simplified)
+  shuffleDuration = 0.8,
+  // Shiny props
+  shinyDuration = 5,
+  shinyColor = 'rgba(255, 255, 255, 0.6)'
+}) => {
+  // Generate unique ID for this component instance
+  const uniqueId = useId()
+
+  const richText = animatedText || ''
+  const textContent = plainText || ''
+
+  if (!richText && !textContent && !rotateWords) {
+    return null
+  }
+
+  // Extract plain text for animations that need raw text
+  const extractText = (data: any): string => {
+    if (!data) return ''
+    if (typeof data === 'string') return data
+    if (Array.isArray(data)) {
+      return data.map((node) => (typeof node === 'string' ? node : node.text || '')).join(' ')
+    }
+    return ''
+  }
+
+  const extractedText = textContent || extractText(richText)
+  const rotatingWords = rotateWords ? rotateWords.split(',').map((w) => w.trim()) : []
+
+  return (
+    <AnimatePresence initial={true} mode="sync">
+      <motion.div
+        id={`animated-text-${variation}-${uniqueId}`}
+        suppressHydrationWarning
+        key={`${variation}-${uniqueId}`}
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        exit="hidden"
+        scroll-data="true"
+        scroll-data-speed={'0.5'}
+        className={cn(
+          aniTextBoxClass,
+          className,
+          aniTextBoxContainerClass,
+          'animated-text-container'
+        )}
+      >
+        {/* Animations that require plain text */}
+        {variation === 'gradual-spacing' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <GradualSpacing
+              text={extractedText}
+              className={cn(aniTextBoxClass, className)}
+              aniTextClass={aniTextClass}
+            />
+          </motion.div>
+        )}
+
+        {variation === 'typing' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <TypingEffect
+              text={extractedText}
+              className={cn(aniTextBoxClass, className)}
+              aniTextClass={aniTextClass}
+            />
+          </motion.div>
+        )}
+
+        {variation === 'staggered-fade' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <StaggeredFade
+              text={extractedText}
+              className={cn(aniTextBoxClass, className)}
+              aniTextClass={aniTextClass}
+            />
+          </motion.div>
+        )}
+
+        {variation === 'letters-pull-up' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <LettersPullUp
+              text={extractedText}
+              className={cn(aniTextBoxClass, className)}
+              aniTextClass={aniTextClass}
+            />
+          </motion.div>
+        )}
+
+        {variation === 'words-pull-up' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <WordsPullUp
+              text={extractedText}
+              className={cn(aniTextBoxClass, className)}
+              aniTextClass={aniTextClass}
+            />
+          </motion.div>
+        )}
+
+        {/* Rotate Words requires separate richText for words */}
+        {variation === 'rotate' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <RotateWords
+              text={extractedText}
+              words={rotatingWords}
+              className={cn(aniTextBoxClass, className)}
+              aniTextClass={aniTextClass}
+            />
+          </motion.div>
+        )}
+
+        {/* GSAP-based animations that use plain text */}
+        {variation === 'split-text' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <SplitText
+              text={extractedText}
+              className={cn(aniTextBoxClass, className, aniTextClass)}
+              delay={splitDelay}
+              duration={splitDuration}
+              ease={splitEase}
+              yOffset={splitYOffset}
+              opacity={splitOpacity}
+              trigger={splitTrigger}
+            />
+          </motion.div>
+        )}
+
+        {variation === 'text-type' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <TextType
+              text={extractedText}
+              className={cn(aniTextBoxClass, className, aniTextClass)}
+              speed={typeSpeed}
+              delay={typeDelay}
+              showCursor={showCursor}
+              cursorChar={cursorChar}
+              autoStart={autoStart}
+            />
+          </motion.div>
+        )}
+
+        {variation === 'shuffle-text' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <ShuffleText
+              text={extractedText}
+              className={cn(aniTextBoxClass, className)}
+              aniTextClass={aniTextClass}
+              duration={shuffleDuration || 0.8}
+              delay={0}
+            />
+          </motion.div>
+        )}
+
+        {variation === 'shiny-text' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <ShinyText
+              text={extractedText}
+              className={cn(aniTextBoxClass, className, aniTextClass)}
+              duration={shinyDuration || 2}
+              delay={0}
+              repeat={true}
+              color={shinyColor || 'rgba(255, 255, 255, 0.6)'}
+            />
+          </motion.div>
+        )}
+
+        {/* Animations that require full RichText content */}
+        {variation === 'blur-in' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <BlurIn>
+              <RichText
+                data={richText}
+                className={cn('max-w-none', aniTextClass)}
+                enableGutter={false}
+              />
+            </BlurIn>
+          </motion.div>
+        )}
+
+        {variation === 'text-fade-up' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <TextFade
+              direction="up"
+              className={cn('p-0 flex flex-col', aniTextBoxClass, className)}
+            >
+              <RichText
+                data={richText}
+                className={cn('max-w-none', aniTextClass)}
+                enableProse={false}
+                enableGutter={false}
+              />
+            </TextFade>
+          </motion.div>
+        )}
+
+        {variation === 'text-fade-down' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <TextFade
+              direction="down"
+              className={cn('p-0 flex flex-col', aniTextBoxClass, className)}
+            >
+              <RichText
+                data={richText}
+                className={cn('max-w-none', aniTextClass)}
+                enableProse={false}
+                enableGutter={false}
+              />
+            </TextFade>
+          </motion.div>
+        )}
+
+        {/* No Animation - just RichText */}
+        {variation === 'no-animation' && (
+          <motion.div suppressHydrationWarning variants={childVariants}>
+            <div className={cn('p-0 flex flex-col', aniTextBoxClass, className)}>
+              <RichText
+                data={richText}
+                className={cn('max-w-none', aniTextClass)}
+                enableProse={false}
+                enableGutter={false}
+              />
+            </div>
+          </motion.div>
+        )}
+      </motion.div>
+    </AnimatePresence>
+  )
+}