blocks-dusted 0.1.10 → 0.1.12

package/templates/blocks/DDHG-TeamCards/Component.tsx

@@ -0,0 +1,169 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Globe, Briefcase, Camera } from 'lucide-react'
+import { cn } from '@/utilities/ui'
+import { getMediaUrl } from '@/utilities/getMediaUrl'
+
+type MediaDoc = {
+  url?: string | null
+  alt?: string | null
+}
+
+type TeamMember = {
+  name?: string | null
+  role?: string | null
+  bio?: string | null
+  image?: number | MediaDoc | null
+  priority?: boolean | null
+  facebookUrl?: string | null
+  linkedinUrl?: string | null
+  instagramUrl?: string | null
+  id?: string | null
+}
+
+export type DDHGTeamCardsProps = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  members?: TeamMember[] | null
+}
+
+function getMediaDoc(img?: number | MediaDoc | null): MediaDoc | null {
+  if (!img || typeof img === 'number') return null
+  return img
+}
+
+export const DDHGTeamCards: React.FC<DDHGTeamCardsProps> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  members,
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.querySelectorAll<HTMLElement>('.reveal').forEach((el, i) => {
+              setTimeout(() => {
+                el.style.opacity = '1'
+                el.style.transform = 'translateY(0)'
+              }, i * 100)
+            })
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      { threshold: 0.1 },
+    )
+    if (ref.current) observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div id={sectionId ?? undefined} className={cn('px-5 md:px-8 py-8', customClassName)} ref={ref}>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="max-w-7xl mx-auto">
+        {members && members.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6">
+            {members.map((member, i) => {
+              const imageDoc = getMediaDoc(member.image)
+              const imageUrl = getMediaUrl(imageDoc?.url)
+              const socials = [
+                { Icon: Globe, url: member.facebookUrl, label: 'Facebook' },
+                { Icon: Briefcase, url: member.linkedinUrl, label: 'LinkedIn' },
+                { Icon: Camera, url: member.instagramUrl, label: 'Instagram' },
+              ].filter((s) => !!s.url)
+
+              return (
+                <div
+                  key={member.id != null ? `id-${member.id}` : `idx-${i}`}
+                  className="reveal group relative overflow-hidden cursor-pointer rounded-md squircle border-none border-stone-300/0 bg-stone-100/50 transition-all duration-300 hover:shadow-2xl dark:border-stone-700/0 dark:bg-stone-900/50 h-112 md:h-128"
+                  style={{
+                    opacity: 0,
+                    transform: 'translateY(20px)',
+                    transition: `opacity 0.9s ease ${i * 0.1}s, transform 0.9s ease ${i * 0.1}s`,
+                  }}
+                >
+                  {imageDoc && imageUrl && (
+                    <div className="relative w-full h-full overflow-hidden brightness-100 group-hover:brightness-50 transition-all duration-300">
+                      <Image
+                        src={imageUrl}
+                        alt={imageDoc.alt ?? member.name ?? ''}
+                        fill
+                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                        priority={Boolean(member.priority)}
+                        className="team-member object-cover object-top brightness-100 group-hover:brightness-50 group-hover:scale-110 transition-transform duration-500 ease-out"
+                      />
+                    </div>
+                  )}
+                  <div
+                    className="pattern-overlay absolute inset-0 opacity-[0.03] pointer-events-none"
+                    style={{
+                      backgroundImage:
+                        'repeating-linear-gradient(90deg, #000 0px, #000 1px, transparent 1px, transparent 20px)',
+                    }}
+                  />
+                  <div className="gradient-overlay absolute inset-0 bg-linear-to-t from-black/80 via-black/80 to-transparent group-hover:from-black/90 transition-all duration-300 group-hover:backdrop-brightness-50" />
+                  <div className="content-card absolute inset-0 flex flex-col justify-end p-3 text-white">
+                    <div className="z-10 text-center mb-3">
+                      {member.name && (
+                        <h3
+                          className="text-xl md:text-2xl font-bold mb-1 text-white drop-shadow-lg"
+                          style={{ fontFamily: 'Outfit, sans-serif', fontWeight: 700 }}
+                        >
+                          {member.name}
+                        </h3>
+                      )}
+                      {member.role && (
+                        <p
+                          className="text-xs md:text-sm font-medium uppercase tracking-wider text-stone-200 dark:text-stone-200 drop-shadow-md"
+                          style={{ fontFamily: "'Inter', sans-serif", fontWeight: 500 }}
+                        >
+                          {member.role}
+                        </p>
+                      )}
+                    </div>
+                    <div
+                      className="hover-panel transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out p-4"
+                      style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)' }}
+                    >
+                      {member.bio && (
+                        <p className="text-sm text-white/70 leading-relaxed mb-4 opacity-0 group-hover:opacity-100 transition-all duration-300 delay-100">
+                          {member.bio}
+                        </p>
+                      )}
+                      {socials.length > 0 && (
+                        <div className="socials-map flex gap-3 justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 delay-200">
+                          {socials.map(({ Icon, url, label }) => (
+                            <Link
+                              key={label}
+                              href={url!}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              aria-label={`${member.name} on ${label}`}
+                              className="text-white/70 hover:text-white hover:scale-110 transition-all duration-200 p-2 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm"
+                            >
+                              <Icon size={14} />
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DDHGTeamCards

package/templates/blocks/DDHG-TeamCards/config.ts

@@ -0,0 +1,48 @@
+import type { Block } from 'payload'
+
+export const DDHGTeamCards: Block = {
+  slug: 'DDHG-TeamCards',
+  interfaceName: 'DDHGTeamCards',
+  labels: { singular: 'Team Cards', plural: 'Team Cards' },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Team Members',
+          fields: [
+            {
+              name: 'members',
+              type: 'array',
+              label: 'Team Members',
+              fields: [
+                { type: 'row', fields: [
+                  { name: 'name', type: 'text', label: 'Name', required: true, admin: { width: '50%' } },
+                  { name: 'role', type: 'text', label: 'Role / Title', admin: { width: '50%' } },
+                ] },
+                { name: 'bio', type: 'textarea', label: 'Bio (shown on hover)' },
+                { name: 'image', type: 'upload', relationTo: 'media', label: 'Photo' },
+                { name: 'priority', type: 'checkbox', label: 'High Priority', defaultValue: false, admin: { description: 'Enable for above-the-fold media.' } },
+                { type: 'row', fields: [
+                  { name: 'linkedinUrl', type: 'text', label: 'LinkedIn URL', admin: { width: '33%' } },
+                  { name: 'instagramUrl', type: 'text', label: 'Instagram URL', admin: { width: '33%' } },
+                  { name: 'facebookUrl', type: 'text', label: 'Facebook URL', admin: { width: '33%' } },
+                ] },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Advanced',
+          fields: [
+            { type: 'row', fields: [
+              { name: 'sectionId', type: 'text', label: 'Section ID', admin: { width: '50%', description: 'Optional anchor ID' } },
+              { name: 'customClassName', type: 'text', label: 'Custom CSS Classes', admin: { width: '50%' } },
+            ] },
+            { name: 'customCSS', type: 'code', label: 'Custom CSS', admin: { language: 'css', description: 'Injected as a <style> tag. Use with caution.' } },
+          ],
+        },
+      ],
+    },
+  ],
+}

package/templates/blocks/DDHG-TeamCards/manifest.json

@@ -0,0 +1,29 @@
+{
+  "type": "block",
+  "name": "DDHG-TeamCards",
+  "label": "Team Cards",
+  "sourceName": "TeamCards",
+  "portableName": "DDHG-TeamCards",
+  "slug": "DDHG-TeamCards",
+  "version": "0.0.1",
+  "source": { "repo": "Hadizainal/HeatherGrey2025", "originalPath": "src/blocks/TeamCards", "originalSlug": "teamCards", "originalConfigExport": "TeamCards", "originalComponentExport": "TeamCardsBlock", "originalInterfaceName": "TeamCardsBlockProps" },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-TeamCards/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-TeamCards/config.ts" }
+  ],
+  "dependencies": [{ "name": "lucide-react" }],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    { "path": "src/utilities/ui.ts", "reason": "Component uses the cn utility." },
+    { "path": "src/utilities/getMediaUrl.ts", "reason": "Component resolves media URLs through getMediaUrl." }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": { "enabled": true, "collections": ["Pages", "Posts"] },
+  "renderBlocksRegistration": { "enabled": true },
+  "renderBlocksBehavior": { "wrapperless": false },
+  "pageRouteIntegration": { "required": false, "manualSteps": [] },
+  "manualSteps": ["Run payload generate:types after schema changes."],
+  "notes": ["Converted from HeatherGrey2025 TeamCards.", "Generated Payload media type dependency replaced with a local structural type.", "Priority loading now follows each member row's priority field.", "Installer must not overwrite existing target files."],
+  "exportName": "DDHGTeamCards",
+  "interfaceName": "DDHGTeamCards"
+}

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