blocks-dusted 0.1.9 → 0.1.11

package/templates/shared/src/components/ui/anims/blur-in.tsx

@@ -0,0 +1,26 @@
+'use client'
+import { motion, useInView } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+import * as React from 'react'
+
+export const BlurIn = ({
+  children,
+  className
+}: {
+  children: React.ReactNode
+  className?: string
+}) => {
+  const ref = React.useRef(null)
+  const isInView = useInView(ref, { once: false })
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ filter: 'blur(40px)', opacity: 0 }}
+      animate={isInView ? { filter: 'none', opacity: 1 } : {}}
+      transition={{ duration: 0.9, delay: 0, ease: 'easeInOut' }}
+      className={cn(className, 'blurin-ani')}
+    >
+      {children}
+    </motion.div>
+  )
+}

package/templates/shared/src/components/ui/anims/counter.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { KeyframeOptions, animate, useInView, useIsomorphicLayoutEffect } from 'framer-motion'
+import * as React from 'react'
+
+type AnimatedCounterProps = {
+  from: number
+  to: number
+  animationOptions?: KeyframeOptions & { duration?: number }
+  className?: string
+}
+
+export const Counter = ({
+  from = 0,
+  to,
+  animationOptions,
+  className = 'text-xl font-extrabold sm:text-2xl md:text-3xl',
+}: AnimatedCounterProps) => {
+  const ref = React.useRef<HTMLSpanElement>(null)
+  const inView = useInView(ref, { once: true })
+
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current
+
+    if (!element) return
+    if (!inView) return
+
+    // Set initial value
+    element.textContent = String(from)
+
+    // If reduced motion is enabled in system's preferences
+    if (window.matchMedia('(prefers-reduced-motion)').matches) {
+      element.textContent = String(to)
+      return
+    }
+
+    const controls = animate(from, to, {
+      duration: 10,
+      ease: 'easeOut',
+      ...animationOptions,
+      onUpdate(value) {
+        element.textContent = value.toFixed(0)
+      },
+    })
+
+    // Cancel on unmount
+    return () => {
+      controls.stop()
+    }
+  }, [ref, inView, from, to])
+
+  return <span ref={ref} className={className} />
+}

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

@@ -0,0 +1,83 @@
+'use client'
+import { motion, useInView } from 'framer-motion'
+import * as React from 'react'
+
+export function TextFade({
+  direction,
+  children,
+  className = '',
+  stagger = 0.1,
+  delay = 0.3
+}: {
+  direction: 'up' | 'down' | 'left' | 'right'
+  children: React.ReactNode
+  className?: string
+  stagger?: number
+  delay?: number
+}) {
+  const getVariant = () => {
+    const baseTransition = {
+      type: 'spring' as const,
+      duration: 0.9,
+      delay
+    }
+
+    switch (direction) {
+      case 'down':
+        return {
+          show: { opacity: 1, y: 0, transition: baseTransition },
+          hidden: { opacity: 0, y: -20 }
+        }
+      case 'up':
+        return {
+          show: { opacity: 1, y: 0, transition: baseTransition },
+          hidden: { opacity: 0, y: 20 }
+        }
+      case 'left':
+        return {
+          show: { opacity: 1, x: 0, transition: baseTransition },
+          hidden: { opacity: 0, x: 20 }
+        }
+      case 'right':
+        return {
+          show: { opacity: 1, x: 0, transition: baseTransition },
+          hidden: { opacity: 0, x: -20 }
+        }
+      default:
+        return {
+          show: { opacity: 1, y: 0, transition: baseTransition },
+          hidden: { opacity: 0, y: 20 }
+        }
+    }
+  }
+
+  const FADE_VARIANT = getVariant()
+  const ref = React.useRef(null)
+  const isInView = useInView(ref, { once: false })
+
+  return (
+    <motion.div
+      ref={ref}
+      initial="hidden"
+      animate={isInView ? 'show' : ''}
+      viewport={{ once: false, amount: 0.5 }}
+      variants={{
+        hidden: {},
+        show: {
+          transition: {
+            staggerChildren: stagger
+          }
+        }
+      }}
+      className={className}
+    >
+      {React.Children.map(children, (child) =>
+        React.isValidElement(child) ? (
+          <motion.div variants={FADE_VARIANT}>{child}</motion.div>
+        ) : (
+          child
+        )
+      )}
+    </motion.div>
+  )
+}

package/templates/shared/src/components/ui/anims/gradual-spacing.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { AnimatePresence, motion, useInView } from 'framer-motion'
+import * as React from 'react'
+import { cn } from '@/utilities/ui'
+
+export function GradualSpacing({
+  text = 'Gradual Spacing',
+  className = '',
+  aniTextClass = ''
+}: {
+  text: string
+  className?: string
+  aniTextClass?: string
+}) {
+  const ref = React.useRef(null)
+  const isInView = useInView(ref, { once: false })
+  return (
+    <div className={cn('flex space-x-1 gradual-spacing-text', {})}>
+      <AnimatePresence>
+        {text.split('').map((char, i) => (
+          <motion.span
+            ref={ref}
+            key={i}
+            initial={{ opacity: 0, x: -18 }}
+            animate={isInView ? { opacity: 1, x: 0 } : {}}
+            exit="hidden"
+            transition={{ duration: 0.5, delay: i * 0.1 }}
+            className={cn('tracking-tighter md:leading-[4rem]', className, aniTextClass)}
+
+            // className="text-xl text-center sm:text-4xl font-bold tracking-tighter md:text-6xl md:leading-[4rem]"
+          >
+            {char === ' ' ? <span>&nbsp;</span> : char}
+          </motion.span>
+        ))}
+      </AnimatePresence>
+    </div>
+  )
+}

package/templates/shared/src/components/ui/anims/pull-up.tsx

@@ -0,0 +1,93 @@
+'use client'
+import { cn } from '@/utilities/ui'
+import { motion, useInView } from 'framer-motion'
+import * as React from 'react'
+
+export function LettersPullUp({
+  text,
+  className = '',
+  aniTextClass = '',
+}: {
+  text: string
+  className?: string
+  aniTextClass?: string
+}) {
+  const splittedText = text.split('')
+
+  const pullupVariant = {
+    initial: { y: 100, opacity: 0 },
+    animate: (i: number) => ({
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: i * 0.15,
+      },
+    }),
+  }
+  const ref = React.useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: false })
+  return (
+    <div className="flex indie-pull-up-justify">
+      {splittedText.map((current, i) => (
+        <motion.div
+          key={i}
+          ref={ref}
+          variants={pullupVariant}
+          initial="initial"
+          animate={isInView ? 'animate' : ''}
+          custom={i}
+          className={cn('indie-pull-up', className, aniTextClass)}
+        >
+          {current === ' ' ? <span className="indie-pull-up-space">&nbsp;</span> : current}
+        </motion.div>
+      ))}
+    </div>
+  )
+}
+
+export function WordsPullUp({
+  text,
+  className = '',
+  aniTextClass = '',
+}: {
+  text: string
+  className?: string
+  aniTextClass?: string
+}) {
+  const splittedText = text.split(' ')
+
+  const pullupVariant = {
+    initial: { y: 100, opacity: 0 },
+    animate: (i: number) => ({
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: i * 0.15,
+      },
+    }),
+  }
+  const ref = React.useRef(null)
+  const isInView = useInView(ref, { once: false })
+  return (
+    <div className="flex indie-pull-up-justify">
+      {splittedText.map((current, i) => (
+        <motion.div
+          key={i}
+          ref={ref}
+          variants={pullupVariant}
+          initial="initial"
+          animate={isInView ? 'animate' : ''}
+          custom={i}
+          className={cn(
+            'indie-pull-up',
+            'pr-2', // class to separate words
+            className,
+            aniTextClass,
+          )}
+        >
+          {current === '' ? <span className="indie-pull-up-space">&nbsp;</span> : current}
+        </motion.div>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,76 @@
+'use client'
+
+import { useEffect, useRef, useId } from 'react'
+import { AnimatePresence } from 'framer-motion'
+import FadeUpOnInView from './FadeUpOnInView'
+
+interface RevealTextProps {
+  text: string[]
+  className?: string
+  aniTextClass?: string
+  instanceIndex?: number
+}
+
+// Global counter to ensure unique instances
+let globalInstanceCounter = 0
+
+export const RevealText: React.FC<RevealTextProps> = ({
+  text,
+  className,
+  aniTextClass,
+  instanceIndex
+}) => {
+  const uniqueId = useId()
+  // Create a unique instance ID that persists across renders
+  const uniqueInstanceId = useRef<number | undefined>(undefined)
+
+  // Initialize unique instance ID only once
+  if (uniqueInstanceId.current === undefined) {
+    uniqueInstanceId.current = instanceIndex ?? globalInstanceCounter++
+  }
+
+  const textRef = useRef<HTMLSpanElement>(null)
+
+  useEffect(() => {
+    const threshold = 0.3
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry && entry.isIntersecting && textRef.current && text[0]) {
+          const element = textRef.current
+          const string = text[0]
+          let spaned = ''
+          for (let i = 0; i < string.length; i++) {
+            spaned += string[i] === ' ' ? ' ' : `<span>${string[i]}</span>`
+          }
+          element.innerHTML = spaned
+          const letters = element.querySelectorAll('span')
+
+          // Use the unique instance ID for staggering
+          const baseDelay = (uniqueInstanceId.current ?? 0) * 0.05
+          letters.forEach((letter, i) => {
+            letter.setAttribute('style', `animation-delay: ${baseDelay + i * 0.05}s;`)
+          })
+        }
+      },
+      { threshold }
+    )
+
+    if (textRef.current) observer.observe(textRef.current)
+
+    return () => observer.disconnect()
+  }, [text, uniqueId])
+
+  return (
+    <AnimatePresence mode="wait">
+      <FadeUpOnInView delay={0 + (uniqueInstanceId.current ?? 0) * 0.1} className="fadeup">
+        <span
+          ref={textRef}
+          className={`reveal-text animation ${className || ''} ${aniTextClass || ''}`}
+          style={{ fontWeight: '700' }}
+          dangerouslySetInnerHTML={{ __html: text[0] || '' }}
+        />
+      </FadeUpOnInView>
+    </AnimatePresence>
+  )
+}
+export default RevealText

package/templates/shared/src/components/ui/anims/rotate-words.tsx

@@ -0,0 +1,43 @@
+'use client'
+import { cn } from '@/utilities/ui'
+import * as React from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+
+export function RotateWords({
+  text = 'Rotate',
+  words = ['Word 1', 'Word 2', 'Word 3'],
+  className = '',
+  aniTextClass = '',
+}: {
+  text: string
+  words: string[]
+  className?: string
+  aniTextClass?: string
+}) {
+  const [index, setIndex] = React.useState(0)
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((prevIndex) => (prevIndex + 1) % words.length)
+    }, 5000)
+    // Clean up interval on unmount
+    return () => clearInterval(interval)
+  }, [words.length])
+  return (
+    <div className={cn('tracking-tighter md:leading-[4rem] flex gap-1.5', className, aniTextClass)}>
+      {/* <div className="text-xl text-center sm:text-4xl font-bold tracking-tighter md:text-6xl md:leading-[4rem] w-fit flex items-center jusitfy-center mx-auto gap-1.5"> */}
+      {text}{' '}
+      <AnimatePresence mode="wait">
+        <motion.span
+          key={words[index]}
+          initial={{ opacity: 0, y: -40 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 40 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          {words[index]}
+        </motion.span>
+      </AnimatePresence>
+    </div>
+  )
+}

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

@@ -0,0 +1,58 @@
+'use client'
+import React from 'react'
+
+interface ShinyTextProps {
+  text: string
+  disabled?: boolean
+  speed?: number
+  className?: string
+}
+
+export const ShinyText: React.FC<ShinyTextProps> = ({
+  text,
+  disabled = false,
+  speed = 5,
+  className = ''
+}) => {
+  const animationDuration = `${speed}s`
+
+  return (
+    <>
+      <div
+        className={`shiny-text ${disabled ? 'disabled' : ''} ${className}`}
+        style={{ animationDuration }}
+      >
+        {text}
+      </div>
+      <style jsx>{`
+        .shiny-text {
+          color: #b5b5b5a4; /* Adjust this color to change intensity/style */
+          background: linear-gradient(
+            120deg,
+            rgba(255, 255, 255, 0) 40%,
+            rgba(255, 255, 255, 0.8) 50%,
+            rgba(255, 255, 255, 0) 60%
+          );
+          background-size: 200% 100%;
+          -webkit-background-clip: text;
+          background-clip: text;
+          display: inline-block;
+          animation: shine 5s linear infinite;
+        }
+
+        @keyframes shine {
+          0% {
+            background-position: 100%;
+          }
+          100% {
+            background-position: -100%;
+          }
+        }
+
+        .shiny-text.disabled {
+          animation: none;
+        }
+      `}</style>
+    </>
+  )
+}

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

@@ -0,0 +1,85 @@
+'use client'
+
+import * as React from 'react'
+import { motion, useInView } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+
+interface ShuffleTextProps {
+  text: string | string[]
+  className?: string
+  aniTextClass?: string
+  duration?: number
+  delay?: number
+}
+
+export function ShuffleText({
+  text,
+  className = '',
+  aniTextClass = '',
+  duration = 0.8,
+  delay = 0
+}: ShuffleTextProps) {
+  const ref = React.useRef(null)
+  const isInView = useInView(ref, { once: false })
+
+  // Convert text to array if it's a string
+  const textArray = Array.isArray(text) ? text : [text]
+  const fullText = textArray.join(' ')
+
+  const [displayText, setDisplayText] = React.useState('')
+  const [isShuffling, setIsShuffling] = React.useState(false)
+
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*'
+
+  React.useEffect(() => {
+    if (!isInView) return
+
+    const startShuffle = () => {
+      setIsShuffling(true)
+      let iteration = 0
+      const totalIterations = fullText.length
+
+      const interval = setInterval(() => {
+        setDisplayText((prev) => {
+          return fullText
+            .split('')
+            .map((char, index) => {
+              if (index < iteration) {
+                return char
+              }
+              if (char === ' ') {
+                return ' '
+              }
+              return characters[Math.floor(Math.random() * characters.length)]
+            })
+            .join('')
+        })
+
+        if (iteration >= totalIterations) {
+          clearInterval(interval)
+          setDisplayText(fullText)
+          setIsShuffling(false)
+        }
+
+        iteration += 1 / 3
+      }, 30)
+    }
+
+    const timer = setTimeout(startShuffle, delay * 1000)
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [isInView, fullText, delay])
+
+  return (
+    <motion.span
+      ref={ref}
+      className={cn('inline-block', className, aniTextClass)}
+      initial={{ opacity: 0 }}
+      animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+      transition={{ duration: 0.3, delay }}
+    >
+      {displayText || fullText}
+    </motion.span>
+  )
+}