blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+'use client'
+import React, { useRef } from 'react'
+
+interface GlareHoverProps {
+  width?: string
+  height?: string
+  background?: string
+  borderRadius?: string
+  borderColor?: string
+  children?: React.ReactNode
+  glareColor?: string
+  glareOpacity?: number
+  glareAngle?: number
+  glareSize?: number
+  transitionDuration?: number
+  playOnce?: boolean
+  className?: string
+  style?: React.CSSProperties
+}
+
+const GlareHover: React.FC<GlareHoverProps> = ({
+  width = 'auto',
+  height = 'auto',
+  background = 'transparent',
+  borderRadius = '0',
+  borderColor = 'transparent',
+  children,
+  glareColor = '#ffffff69',
+  glareOpacity = 0.5,
+  glareAngle = -45,
+  glareSize = 250,
+  transitionDuration = 650,
+  playOnce = false,
+  className = '',
+  style = {},
+}) => {
+  const hex = glareColor.replace('#', '')
+  let rgba = glareColor
+  if (/^[\dA-Fa-f]{6}$/.test(hex)) {
+    const r = parseInt(hex.slice(0, 2), 16)
+    const g = parseInt(hex.slice(2, 4), 16)
+    const b = parseInt(hex.slice(4, 6), 16)
+    rgba = `rgba(${r}, ${g}, ${b}, ${glareOpacity})`
+  } else if (/^[\dA-Fa-f]{3}$/.test(hex) && hex.length === 3) {
+    const r = parseInt(hex[0]! + hex[0]!, 16)
+    const g = parseInt(hex[1]! + hex[1]!, 16)
+    const b = parseInt(hex[2]! + hex[2]!, 16)
+    rgba = `rgba(${r}, ${g}, ${b}, ${glareOpacity})`
+  }
+
+  const overlayRef = useRef<HTMLDivElement | null>(null)
+
+  const animateIn = () => {
+    const el = overlayRef.current
+    if (!el) return
+
+    el.style.transition = 'none'
+    el.style.backgroundPosition = '-100% -100%, 0 0'
+    el.offsetHeight
+    el.style.transition = `${transitionDuration}ms ease`
+    el.style.backgroundPosition = '100% 100%, 0 0'
+  }
+
+  const animateOut = () => {
+    const el = overlayRef.current
+    if (!el) return
+
+    if (playOnce) {
+      el.style.transition = 'none'
+      el.style.backgroundPosition = '-100% -100%, 0 0'
+    } else {
+      el.style.transition = `${transitionDuration}ms ease`
+      el.style.backgroundPosition = '-100% -100%, 0 0'
+    }
+  }
+
+  const overlayStyle: React.CSSProperties = {
+    position: 'absolute',
+    inset: 0,
+    background: `linear-gradient(${glareAngle}deg,
+        hsla(0,0%,0%,0) 60%,
+        ${rgba} 70%,
+        hsla(0,0%,0%,0) 100%)`,
+    backgroundSize: `${glareSize}% ${glareSize}%, 100% 100%`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: '-100% -100%, 0 0',
+    pointerEvents: 'none',
+  }
+
+  return (
+    <div
+      className={`relative grid place-items-center overflow-hidden border cursor-pointer ${className}`}
+      style={{
+        width,
+        height,
+        background,
+        borderRadius,
+        borderColor,
+        ...style,
+      }}
+      onMouseEnter={animateIn}
+      onMouseLeave={animateOut}
+    >
+      <div ref={overlayRef} style={overlayStyle} />
+      {children}
+    </div>
+  )
+}
+
+export default GlareHover

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

@@ -0,0 +1,81 @@
+'use client'
+import React, { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+interface LineAnimProps {
+  direction: 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top'
+  className?: string
+  trigger?: 'scroll' | 'immediate'
+  duration?: number
+  delay?: number
+}
+
+const LineAnim: React.FC<LineAnimProps> = ({
+  direction,
+  className = '',
+  trigger = 'scroll',
+  duration = 1,
+  delay = 0
+}) => {
+  const lineRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!lineRef.current) return
+
+    const isVertical = direction.includes('top') || direction.includes('bottom')
+    const scale = isVertical ? 'scaleY' : 'scaleX'
+
+    const animation = gsap.fromTo(
+      lineRef.current,
+      { [scale]: 0, opacity: 1 },
+      {
+        [scale]: 1,
+        opacity: 1,
+        duration,
+        delay,
+        ease: 'power2.out',
+        ...(trigger === 'scroll' && {
+          scrollTrigger: {
+            trigger: lineRef.current,
+            start: 'top 100%'
+          }
+        })
+      }
+    )
+
+    return () => {
+      animation.kill()
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill())
+    }
+  }, [direction, trigger, duration, delay])
+
+  const getLineClasses = () => {
+    const baseClasses = 'bg-transparent opacity-0'
+
+    switch (direction) {
+      case 'left-to-right':
+        return `h-[1px] w-screen origin-left ${baseClasses}`
+      case 'right-to-left':
+        return `h-[1px] w-screen origin-right ${baseClasses}`
+      case 'top-to-bottom':
+        return `w-[1px] h-screen origin-top ${baseClasses}`
+      case 'bottom-to-top':
+        return `w-[1px] h-screen origin-bottom ${baseClasses}`
+      default:
+        return baseClasses
+    }
+  }
+
+  return (
+    <div
+      ref={lineRef}
+      className={`${getLineClasses()} ${className}`}
+      style={{ transition: 'all 0.3s' }}
+    />
+  )
+}
+
+export default LineAnim

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

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef, ReactNode } from 'react'
+import { motion } from 'framer-motion'
+
+interface TitleAnims01Props {
+  children: ReactNode
+}
+
+const TitleAnims01: React.FC<TitleAnims01Props> = ({ children }) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const spanText = (text: HTMLElement) => {
+      const string = text.innerText
+      let spaned = ''
+      for (let i = 0; i < string.length; i++) {
+        if (string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1)
+        else spaned += '<span>' + string.substring(i, i + 1) + '</span>'
+      }
+      text.innerHTML = spaned
+    }
+
+    const headline = ref.current
+    if (!headline) return
+    spanText(headline)
+
+    const animations = headline.querySelectorAll('.animation')
+
+    animations.forEach((animation) => {
+      const letters = animation.querySelectorAll('span')
+      letters.forEach((letter, i) => {
+        ;(letter as HTMLElement).style.animationDelay = i * 0.1 + 's'
+      })
+    })
+  }, [])
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 50 }}
+      animate={{
+        opacity: 1,
+        y: 0,
+      }}
+      transition={{
+        duration: 0.3,
+        delay: 0.2,
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export default TitleAnims01

package/templates/shared/src/components/ui/anims/animation-container.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@/components/ui/button'
+import { FaPlay } from 'react-icons/fa'
+import { cn } from '@/utilities/ui'
+
+export const AnimationContainer = ({
+  children,
+  className = ''
+}: {
+  children: React.ReactNode
+  className?: string
+}) => {
+  const [key, setKey] = React.useState(0)
+  const onClick = () => {
+    setKey((prv) => prv + 1)
+  }
+  return (
+    <div className={cn('pb-12 pt-4 border-b dark:border-stone-900', className)}>
+      <div className="flex-row-end w-full mb-2">
+        <Button onClick={onClick} size="icon" className="rounded-md size-9" variant="outline">
+          <FaPlay className="size-3" />
+        </Button>
+      </div>
+      <div key={key}>{children}</div>
+    </div>
+  )
+}

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>
+  )
+}