blocks-dusted 0.1.9 → 0.1.11

package/templates/shared/src/components/ui/anims/split-text.tsx

@@ -0,0 +1,211 @@
+'use client'
+
+import React, { useRef, useEffect, useState } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { SplitText as GSAPSplitText } from 'gsap/SplitText'
+import { useGSAP } from '@gsap/react'
+
+gsap.registerPlugin(ScrollTrigger, GSAPSplitText, useGSAP)
+
+export interface SplitTextProps {
+  text: string
+  className?: string
+  delay?: number
+  duration?: number
+  ease?: string | ((t: number) => number)
+  splitType?: 'chars' | 'words' | 'lines' | 'words, chars'
+  from?: gsap.TweenVars
+  to?: gsap.TweenVars
+  threshold?: number
+  rootMargin?: string
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
+  textAlign?: React.CSSProperties['textAlign']
+  onLetterAnimationComplete?: () => void
+}
+
+export const SplitText: React.FC<SplitTextProps> = ({
+  text,
+  className = '',
+  delay = 100,
+  duration = 0.6,
+  ease = 'power3.out',
+  splitType = 'chars',
+  from = { opacity: 0, y: 40 },
+  to = { opacity: 1, y: 0 },
+  threshold = 0.1,
+  rootMargin = '-100px',
+  textAlign = 'center',
+  tag = 'p',
+  onLetterAnimationComplete
+}) => {
+  const ref = useRef<HTMLParagraphElement>(null)
+  const animationCompletedRef = useRef(false)
+  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 startPct = (1 - threshold) * 100
+      const marginMatch = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(rootMargin)
+      const marginValue = marginMatch ? parseFloat(marginMatch[1] || '0') : 0
+      const marginUnit = marginMatch ? marginMatch[2] || 'px' : 'px'
+      const sign =
+        marginValue === 0
+          ? ''
+          : marginValue < 0
+            ? `-=${Math.abs(marginValue)}${marginUnit}`
+            : `+=${marginValue}${marginUnit}`
+      const start = `top ${startPct}%${sign}`
+      let targets: Element[] = []
+      const assignTargets = (self: GSAPSplitText) => {
+        if (splitType.includes('chars') && self.chars.length) targets = self.chars
+        if (!targets.length && splitType.includes('words') && self.words.length)
+          targets = self.words
+        if (!targets.length && splitType.includes('lines') && self.lines.length)
+          targets = self.lines
+        if (!targets.length) targets = self.chars || self.words || self.lines
+      }
+      const splitInstance = new GSAPSplitText(el, {
+        type: splitType,
+        smartWrap: true,
+        autoSplit: splitType === 'lines',
+        linesClass: 'split-line',
+        wordsClass: 'split-word',
+        charsClass: 'split-char',
+        reduceWhiteSpace: false,
+        onSplit: (self: GSAPSplitText) => {
+          assignTargets(self)
+          return gsap.fromTo(
+            targets,
+            { ...from },
+            {
+              ...to,
+              duration,
+              ease,
+              stagger: delay / 1000,
+              scrollTrigger: {
+                trigger: el,
+                start,
+                once: true,
+                fastScrollEnd: true,
+                anticipatePin: 0.4
+              },
+              onComplete: () => {
+                animationCompletedRef.current = true
+                onLetterAnimationComplete?.()
+              },
+              willChange: 'transform, opacity',
+              force3D: true
+            }
+          )
+        }
+      })
+      el._rbsplitInstance = splitInstance
+      return () => {
+        ScrollTrigger.getAll().forEach((st) => {
+          if (st.trigger === el) st.kill()
+        })
+        try {
+          splitInstance.revert()
+        } catch (_) {}
+        el._rbsplitInstance = undefined
+      }
+    },
+    {
+      dependencies: [
+        text,
+        delay,
+        duration,
+        ease,
+        splitType,
+        JSON.stringify(from),
+        JSON.stringify(to),
+        threshold,
+        rootMargin,
+        fontsLoaded,
+        onLetterAnimationComplete
+      ],
+      scope: ref
+    }
+  )
+
+  const renderTag = () => {
+    const style: React.CSSProperties = {
+      textAlign,
+      overflow: 'hidden',
+      display: 'inline-block',
+      whiteSpace: 'normal',
+      wordWrap: 'break-word',
+      willChange: 'transform, opacity'
+    }
+    const classes = `split-parent ${className}`
+    switch (tag) {
+      case 'h1':
+        return (
+          <h1 ref={ref} style={style} className={classes}>
+            {text}
+          </h1>
+        )
+      case 'h2':
+        return (
+          <h2 ref={ref} style={style} className={classes}>
+            {text}
+          </h2>
+        )
+      case 'h3':
+        return (
+          <h3 ref={ref} style={style} className={classes}>
+            {text}
+          </h3>
+        )
+      case 'h4':
+        return (
+          <h4 ref={ref} style={style} className={classes}>
+            {text}
+          </h4>
+        )
+      case 'h5':
+        return (
+          <h5 ref={ref} style={style} className={classes}>
+            {text}
+          </h5>
+        )
+      case 'h6':
+        return (
+          <h6 ref={ref} style={style} className={classes}>
+            {text}
+          </h6>
+        )
+      default:
+        return (
+          <p ref={ref} style={style} className={classes}>
+            {text}
+          </p>
+        )
+    }
+  }
+  return renderTag()
+}

package/templates/shared/src/components/ui/anims/staggered-fade.tsx

@@ -0,0 +1,133 @@
+// 'use client'
+// import { cn } from '@/utilities/ui'
+// import { motion, useInView } from 'framer-motion'
+// import * as React from 'react'
+
+// type TextStaggeredFadeProps = {
+//   text: string
+//   className?: string
+//   aniTextClass?: string
+// }
+
+// export const StaggeredFade: React.FC<TextStaggeredFadeProps> = ({
+//   text,
+//   className = '',
+//   aniTextClass = ''
+// }) => {
+//   const variants = {
+//     hidden: { opacity: 0 },
+//     show: (i: number) => ({
+//       y: 0,
+//       opacity: 1,
+//       transition: { delay: i * 0.07 }
+//     })
+//   }
+
+//   const letters = text.split('')
+//   const ref = React.useRef(null)
+//   const isInView = useInView(ref, { once: false })
+
+//   return (
+//     <span className="relative inline-block">
+//       {/* Underlay: full text visible at 50% opacity so it's readable before animation */}
+//       <span
+//         aria-hidden
+//         className={cn(
+//           'absolute inset-0 opacity-40 select-none pointer-events-none',
+//           className,
+//           aniTextClass
+//         )}
+//       >
+//         {text}
+//       </span>
+//       {/* Animated letters on top */}
+//       <motion.span
+//         ref={ref}
+//         initial="hidden"
+//         animate={isInView ? 'show' : ''}
+//         variants={variants}
+//         viewport={{ once: false }}
+//         className={cn('indie-stagger-fade', className, aniTextClass)}
+//       >
+//         {letters.map((word, i) => (
+//           <motion.span key={`${word}-${i}`} variants={variants} custom={i}>
+//             {word}
+//           </motion.span>
+//         ))}
+//       </motion.span>
+//     </span>
+//   )
+// }
+
+// Optimised version
+'use client'
+
+import { cn } from '@/utilities/ui'
+import { motion, useInView } from 'framer-motion'
+import * as React from 'react'
+
+type TextStaggeredFadeProps = {
+  text: string
+  className?: string
+  aniTextClass?: string
+}
+
+export const StaggeredFade: React.FC<TextStaggeredFadeProps> = ({
+  text,
+  className = '',
+  aniTextClass = ''
+}) => {
+  const ref = React.useRef<HTMLSpanElement | null>(null)
+  const isInView = useInView(ref, {
+    once: true,
+    margin: '0px 0px -15% 0px'
+  })
+
+  const letters = React.useMemo(() => text.split(''), [text])
+
+  return (
+    <span className="relative inline-block">
+      <span
+        aria-hidden="true"
+        className={cn(
+          'absolute inset-0 opacity-40 select-none pointer-events-none',
+          className,
+          aniTextClass
+        )}
+      >
+        {text}
+      </span>
+
+      <motion.span
+        ref={ref}
+        initial={false}
+        animate={isInView ? 'show' : 'hidden'}
+        className={cn('indie-stagger-fade', className, aniTextClass)}
+      >
+        {letters.map((letter, i) => (
+          <motion.span
+            key={`${letter}-${i}`}
+            custom={i}
+            variants={{
+              hidden: {
+                opacity: 0,
+                y: 8
+              },
+              show: (index: number) => ({
+                opacity: 1,
+                y: 0,
+                transition: {
+                  delay: index * 0.025,
+                  duration: 0.35,
+                  ease: [0.22, 1, 0.36, 1]
+                }
+              })
+            }}
+          >
+            {letter}
+          </motion.span>
+        ))}
+      </motion.span>
+    </span>
+  )
+}

package/templates/shared/src/components/ui/anims/text-scroll.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  motion,
+  useAnimationFrame,
+  useMotionValue,
+  useScroll,
+  useSpring,
+  useTransform,
+  useVelocity,
+} from 'framer-motion'
+
+import { cn } from '@/utilities/ui'
+
+interface TextScrollProps {
+  text: string
+  default_velocity?: number
+  className?: string
+}
+
+interface ParallaxProps {
+  children: string
+  baseVelocity: number
+  className?: string
+}
+
+export const wrap = (min: number, max: number, v: number) => {
+  const rangeSize = max - min
+  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min
+}
+
+export const TextScroll: React.FC<TextScrollProps> = ({
+  text,
+  default_velocity = 5,
+  className,
+}) => {
+  const ParallaxText: React.FC<ParallaxProps> = ({ children, baseVelocity = 100, className }) => {
+    const baseX = useMotionValue(0)
+    const { scrollY } = useScroll()
+    const scrollVelocity = useVelocity(scrollY)
+    const smoothVelocity = useSpring(scrollVelocity, {
+      damping: 50,
+      stiffness: 400,
+    })
+
+    const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {
+      clamp: false,
+    })
+
+    const [repetitions, setRepetitions] = useState(1)
+    const containerRef = useRef<HTMLDivElement>(null)
+    const textRef = useRef<HTMLSpanElement>(null)
+
+    useEffect(() => {
+      const calculateRepetitions = () => {
+        if (containerRef.current && textRef.current) {
+          const containerWidth = containerRef.current.offsetWidth
+          const textWidth = textRef.current.offsetWidth
+          const newRepetitions = Math.ceil(containerWidth / textWidth) + 2
+          setRepetitions(newRepetitions)
+        }
+      }
+
+      calculateRepetitions()
+
+      window.addEventListener('resize', calculateRepetitions)
+      return () => window.removeEventListener('resize', calculateRepetitions)
+    }, [children])
+
+    const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`)
+
+    const directionFactor = useRef<number>(1)
+    useAnimationFrame((t, delta) => {
+      let moveBy = directionFactor.current * baseVelocity * (delta / 1000)
+
+      if (velocityFactor.get() < 0) {
+        directionFactor.current = -1
+      } else if (velocityFactor.get() > 0) {
+        directionFactor.current = 1
+      }
+
+      moveBy += directionFactor.current * moveBy * velocityFactor.get()
+
+      baseX.set(baseX.get() + moveBy)
+    })
+
+    return (
+      <div className="w-full overflow-hidden whitespace-nowrap" ref={containerRef}>
+        <motion.div className={cn('inline-block', className)} style={{ x }}>
+          {Array.from({ length: repetitions }).map((_, i) => (
+            <span key={i} ref={i === 0 ? textRef : null}>
+              {children}{' '}
+            </span>
+          ))}
+        </motion.div>
+      </div>
+    )
+  }
+
+  return (
+    <section className="relative w-full">
+      <ParallaxText baseVelocity={default_velocity} className={className}>
+        {text}
+      </ParallaxText>
+      <ParallaxText baseVelocity={-default_velocity} className={className}>
+        {text}
+      </ParallaxText>
+    </section>
+  )
+}

package/templates/shared/src/components/ui/anims/typing-effect.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import * as React from 'react'
+import { motion, useInView } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+
+export function TypingEffect({
+  text = 'Typing Effect',
+  className = '',
+  aniTextClass = '',
+  charDelayMs = 200
+}: {
+  text: string
+  className?: string
+  aniTextClass?: string
+  charDelayMs?: number
+}) {
+  const ref = React.useRef(null)
+  const isInView = useInView(ref, { once: true })
+
+  const [visibleChars, setVisibleChars] = React.useState(0)
+
+  const chars = React.useMemo(() => Array.from(String(text)), [text])
+
+  const prefersReducedMotion = React.useMemo(() => {
+    if (typeof window === 'undefined') return false
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  }, [])
+
+  React.useEffect(() => {
+    if (!isInView) return
+
+    if (prefersReducedMotion) {
+      setVisibleChars(chars.length)
+      return
+    }
+
+    setVisibleChars(0)
+
+    const delay = typeof charDelayMs === 'number' && charDelayMs > 0 ? charDelayMs : 200
+    const id = window.setInterval(() => {
+      setVisibleChars((prev) => {
+        if (prev >= chars.length) {
+          window.clearInterval(id)
+          return prev
+        }
+        return prev + 1
+      })
+    }, delay)
+
+    return () => window.clearInterval(id)
+  }, [isInView, prefersReducedMotion, chars.length, charDelayMs])
+
+  return (
+    <>
+      <span
+        ref={ref}
+        className={cn('tracking-tighter', className, aniTextClass)}
+        // className="text-xl text-center sm:text-4xl font-bold tracking-tighter md:text-6xl md:leading-[4rem]"
+      >
+        {chars.slice(0, visibleChars).map((ch, index) => {
+          // Keep word-wrap behavior by not forcing inline-block per character.
+          // Also render spaces as-is so wrapping occurs at spaces.
+          const shouldAnimate = !prefersReducedMotion
+
+          return (
+            <motion.span
+              key={`typed-${index}`}
+              className={ch === ' ' ? undefined : 'continuous-typing-effect'}
+              initial={shouldAnimate ? { opacity: 0 } : undefined}
+              animate={shouldAnimate ? { opacity: 1 } : undefined}
+              transition={shouldAnimate ? { duration: 0.12 } : undefined}
+            >
+              {ch}
+            </motion.span>
+          )
+        })}
+
+        <span aria-hidden className="typing-effect-cursor">
+          ▍
+        </span>
+      </span>
+
+      <style jsx global>{`
+        .typing-effect-cursor {
+          display: inline-block;
+          margin-left: 0.08em;
+          transform: translateY(0.08em);
+          animation: typing-effect-blink 0.9s steps(2, start) infinite;
+        }
+
+        @keyframes typing-effect-blink {
+          0%,
+          49% {
+            opacity: 1;
+          }
+          50%,
+          100% {
+            opacity: 0;
+          }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .typing-effect-cursor {
+            animation: none;
+            opacity: 1;
+          }
+        }
+      `}</style>
+    </>
+  )
+}