blocks-dusted 0.1.9 → 0.1.11

package/templates/shared/src/components/BgLightning/index.tsx

@@ -0,0 +1,242 @@
+'use client'
+
+import React, { useRef, useEffect } from 'react'
+
+interface BgLightningProps {
+  hue?: number
+  xOffset?: number
+  speed?: number
+  intensity?: number
+  size?: number
+}
+
+const BgLightning: React.FC<BgLightningProps> = ({
+  hue = 230,
+  xOffset = 0,
+  speed = 1,
+  intensity = 1,
+  size = 1
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    let frameId = 0
+    let disposed = false
+
+    const gl = canvas.getContext('webgl', {
+      alpha: true,
+      premultipliedAlpha: false
+    })
+
+    if (!gl) {
+      console.error('WebGL not supported')
+      return
+    }
+
+    const resizeCanvas = () => {
+      const width = canvas.clientWidth
+      const height = canvas.clientHeight
+
+      if (canvas.width !== width || canvas.height !== height) {
+        canvas.width = width
+        canvas.height = height
+      }
+    }
+
+    resizeCanvas()
+    window.addEventListener('resize', resizeCanvas)
+
+    const vertexShaderSource = `
+      attribute vec2 aPosition;
+
+      void main() {
+        gl_Position = vec4(aPosition, 0.0, 1.0);
+      }
+    `
+
+    const fragmentShaderSource = `
+      precision mediump float;
+
+      uniform vec2 iResolution;
+      uniform float iTime;
+      uniform float uHue;
+      uniform float uXOffset;
+      uniform float uSpeed;
+      uniform float uIntensity;
+      uniform float uSize;
+
+      #define OCTAVE_COUNT 10
+
+      vec3 hsv2rgb(vec3 c) {
+        vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0,4.0,2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+        return c.z * mix(vec3(1.0), rgb, c.y);
+      }
+
+      float hash11(float p) {
+        p = fract(p * .1031);
+        p *= p + 33.33;
+        p *= p + p;
+        return fract(p);
+      }
+
+      float hash12(vec2 p) {
+        vec3 p3 = fract(vec3(p.xyx) * .1031);
+        p3 += dot(p3, p3.yzx + 33.33);
+        return fract((p3.x + p3.y) * p3.z);
+      }
+
+      mat2 rotate2d(float theta) {
+        float c = cos(theta);
+        float s = sin(theta);
+        return mat2(c, -s, s, c);
+      }
+
+      float noise(vec2 p) {
+        vec2 ip = floor(p);
+        vec2 fp = fract(p);
+
+        float a = hash12(ip);
+        float b = hash12(ip + vec2(1.0, 0.0));
+        float c = hash12(ip + vec2(0.0, 1.0));
+        float d = hash12(ip + vec2(1.0, 1.0));
+
+        vec2 t = smoothstep(0.0, 1.0, fp);
+
+        return mix(mix(a, b, t.x), mix(c, d, t.x), t.y);
+      }
+
+      float fbm(vec2 p) {
+        float value = 0.0;
+        float amplitude = 0.5;
+
+        for (int i = 0; i < OCTAVE_COUNT; ++i) {
+          value += amplitude * noise(p);
+          p *= rotate2d(0.45);
+          p *= 2.0;
+          amplitude *= 0.5;
+        }
+
+        return value;
+      }
+
+      void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+        vec2 uv = fragCoord / iResolution.xy;
+        uv = 2.0 * uv - 1.0;
+        uv.x *= iResolution.x / iResolution.y;
+        uv.x += uXOffset;
+
+        uv += 2.0 * fbm(uv * uSize + 0.8 * iTime * uSpeed) - 1.0;
+
+        float dist = max(abs(uv.x), 0.001);
+        vec3 baseColor = hsv2rgb(vec3(uHue / 360.0, 0.7, 0.8));
+        vec3 col = baseColor * pow(mix(0.0, 0.07, hash11(iTime * uSpeed)) / dist, 1.0) * uIntensity;
+
+        float a = clamp(max(col.r, max(col.g, col.b)), 0.0, 1.0);
+        fragColor = vec4(col, a);
+      }
+
+      void main() {
+        mainImage(gl_FragColor, gl_FragCoord.xy);
+      }
+    `
+
+    const compileShader = (source: string, type: number) => {
+      const shader = gl.createShader(type)
+      if (!shader) return null
+
+      gl.shaderSource(shader, source)
+      gl.compileShader(shader)
+
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error('Shader compile error:', gl.getShaderInfoLog(shader))
+        gl.deleteShader(shader)
+        return null
+      }
+
+      return shader
+    }
+
+    const vertexShader = compileShader(vertexShaderSource, gl.VERTEX_SHADER)
+    const fragmentShader = compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER)
+
+    if (!vertexShader || !fragmentShader) return
+
+    const program = gl.createProgram()
+    if (!program) return
+
+    gl.attachShader(program, vertexShader)
+    gl.attachShader(program, fragmentShader)
+    gl.linkProgram(program)
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      console.error('Program linking error:', gl.getProgramInfoLog(program))
+      gl.deleteProgram(program)
+      return
+    }
+
+    const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1])
+
+    const vertexBuffer = gl.createBuffer()
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
+
+    const aPosition = gl.getAttribLocation(program, 'aPosition')
+
+    if (aPosition >= 0) {
+      gl.useProgram(program)
+      gl.enableVertexAttribArray(aPosition)
+      gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
+    }
+
+    const iResolutionLocation = gl.getUniformLocation(program, 'iResolution')
+    const iTimeLocation = gl.getUniformLocation(program, 'iTime')
+    const uHueLocation = gl.getUniformLocation(program, 'uHue')
+    const uXOffsetLocation = gl.getUniformLocation(program, 'uXOffset')
+    const uSpeedLocation = gl.getUniformLocation(program, 'uSpeed')
+    const uIntensityLocation = gl.getUniformLocation(program, 'uIntensity')
+    const uSizeLocation = gl.getUniformLocation(program, 'uSize')
+
+    const startTime = performance.now()
+
+    const render = () => {
+      if (disposed) return
+
+      resizeCanvas()
+
+      gl.useProgram(program)
+      gl.viewport(0, 0, canvas.width, canvas.height)
+
+      if (iResolutionLocation) gl.uniform2f(iResolutionLocation, canvas.width, canvas.height)
+      if (iTimeLocation) gl.uniform1f(iTimeLocation, (performance.now() - startTime) / 1000)
+      if (uHueLocation) gl.uniform1f(uHueLocation, hue)
+      if (uXOffsetLocation) gl.uniform1f(uXOffsetLocation, xOffset)
+      if (uSpeedLocation) gl.uniform1f(uSpeedLocation, speed)
+      if (uIntensityLocation) gl.uniform1f(uIntensityLocation, intensity)
+      if (uSizeLocation) gl.uniform1f(uSizeLocation, size)
+
+      gl.drawArrays(gl.TRIANGLES, 0, 6)
+
+      frameId = requestAnimationFrame(render)
+    }
+
+    frameId = requestAnimationFrame(render)
+
+    return () => {
+      disposed = true
+      cancelAnimationFrame(frameId)
+      window.removeEventListener('resize', resizeCanvas)
+
+      gl.deleteBuffer(vertexBuffer)
+      gl.deleteShader(vertexShader)
+      gl.deleteShader(fragmentShader)
+      gl.deleteProgram(program)
+    }
+  }, [hue, xOffset, speed, intensity, size])
+
+  return <canvas ref={canvasRef} className="relative h-full w-full" />
+}
+
+export default BgLightning

package/templates/shared/src/components/ui/ShareButton/index.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import React, { useState } from 'react'
+import { LucideIcon } from 'lucide-react'
+
+import { cn } from '@/utilities/ui'
+import { Button } from '@/components/ui/button'
+
+interface ShareLink {
+  icon: LucideIcon
+  href?: string
+  onClick?: () => void
+  label?: string
+}
+
+interface ShareButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  links: ShareLink[]
+  children: React.ReactNode
+}
+
+export const ShareButton = ({ className, links, children, ...props }: ShareButtonProps) => {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <div
+      className="relative"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Button
+        className={cn(
+          'relative min-w-40  rounded-3xl ',
+          'bg-white dark:bg-black',
+          'hover:bg-gray-50 dark:hover:bg-gray-950',
+          'text-stone-200 dark:text-stone-200',
+          'border border-black/10 dark:border-white/10',
+          'transition-all duration-300',
+          isHovered ? 'opacity-0' : 'opacity-100',
+          className
+        )}
+        {...props}
+      >
+        <span className="flex items-center gap-2">{children}</span>
+      </Button>
+
+      <div className="absolute left-0 top-0 flex h-10">
+        {links.map((link, index) => {
+          const Icon = link.icon
+          return (
+            <button
+              type="button"
+              key={index}
+              onClick={link.onClick}
+              className={cn(
+                'h-10',
+                'w-10',
+                'flex items-center justify-center',
+                'bg-black dark:bg-white',
+                'text-white dark:text-black',
+                'transition-all duration-300',
+                index === 0 && 'rounded-l-3xl',
+                index === links.length - 1 && 'rounded-r-3xl',
+                'border-r border-white/10 last:border-r-0 dark:border-black/10',
+                'hover:bg-gray-900 dark:hover:bg-gray-100',
+                '',
+                isHovered ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0',
+                index === 0 && 'transition-all duration-200',
+                index === 1 && 'delay-\\[50ms\\] transition-all duration-200',
+                index === 2 && 'transition-all delay-100 duration-200',
+                index === 3 && 'transition-all delay-150 duration-200'
+              )}
+            >
+              <Icon className="size-4" />
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,48 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { motion, useScroll, useTransform } from 'framer-motion'
+
+interface FadeOnScrollProps {
+  children: React.ReactNode
+}
+
+export const FadeOnScroll: React.FC<FadeOnScrollProps> = ({ children }) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [targetRef, setTargetRef] = useState<HTMLElement | null>(null)
+
+  // Bind scroll tracking only when ready
+  const scrollSetupRef = useRef(false)
+  const { scrollYProgress } = useScroll({
+    target: targetRef ? { current: targetRef } : undefined,
+    offset: ['start 50%', 'start 0%'],
+  })
+
+  const opacity = useTransform(scrollYProgress, [0, 1], [1, 0])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const container = containerRef.current
+    if (!container) return
+
+    const parent = container.closest('.renderblock-container')
+    if (!parent) return
+
+    let sibling = parent.nextElementSibling as HTMLElement | null
+    while (sibling && !sibling.classList.contains('renderblock-container')) {
+      sibling = sibling.nextElementSibling as HTMLElement | null
+    }
+
+    if (sibling && !scrollSetupRef.current) {
+      setTargetRef(sibling)
+      scrollSetupRef.current = true
+    }
+  }, [])
+
+  return (
+    <motion.div ref={containerRef} style={{ opacity }}>
+      {children}
+    </motion.div>
+  )
+}

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

@@ -0,0 +1,63 @@
+'use client'
+import React, { useRef, useEffect, useState, ReactNode } from 'react'
+import { motion } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+
+interface FadeUpOnInViewProps {
+  children: ReactNode
+  delay?: number
+  className?: string
+}
+
+export const FadeUpOnInView: React.FC<FadeUpOnInViewProps> = ({ children, delay, className }) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    if (!ref.current) return
+    const target = ref.current
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries && entries.length > 0 && entries[0]) {
+          setIsVisible(!!entries[0].isIntersecting)
+        }
+      },
+      {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.5
+      }
+    )
+    observer.observe(target)
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  // Defensive: Only allow number and >= 0 for delay
+  const animationDelay = typeof delay === 'number' && !isNaN(delay) && delay >= 0 ? delay : 0
+
+  // Defensive: Only render children if defined
+  const safeChildren = children === undefined || children === null ? null : children
+
+  return (
+    <motion.div
+      className={cn('fadeupInView', className)}
+      ref={ref}
+      initial={{ opacity: 0, y: 40 }}
+      animate={{
+        opacity: isVisible ? 1 : 0,
+        y: isVisible ? 0 : 40
+      }}
+      exit={{ opacity: 0, y: 40 }}
+      transition={{
+        duration: 0.3,
+        delay: animationDelay
+      }}
+    >
+      {safeChildren}
+    </motion.div>
+  )
+}
+
+export default FadeUpOnInView

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