blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DD-NineCanvas/styles.scss

@@ -0,0 +1,152 @@
+.topLogoBgWrapper {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  margin: auto;
+  width: fit-content;
+  max-width: fit-content;
+  height: fit-content;
+  max-height: 2.5rem;
+  z-index: 99999;
+  pointer-events: auto;
+
+  filter: drop-shadow(0px 1px 2px var(--border)) drop-shadow(rgba(0, 0, 0, 0.8) 2px 4px 6px);
+
+  animation: topLogoEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes topLogoEnter {
+  from {
+    opacity: 0;
+    transform: translateY(-1.25rem) scale(0.94);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@media (max-width: 768px) {
+  .topLogoBgWrapper {
+    scale: 0.7;
+    transform-origin: top;
+  }
+}
+
+.svglogolink {
+  position: relative;
+  top: -2.6rem;
+  max-width: fit-content;
+  margin: auto;
+  padding-top: 0.6rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 99999;
+  filter: brightness(0.8) drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
+  transition: all 0.3s;
+}
+.svglogolink::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  width: 3.5rem;
+  height: 5px;
+  border-radius: 999px;
+  background: #e5e5e5;
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.65);
+  opacity: 0;
+  filter: blur(0.25px);
+  transform: translateY(-2px);
+  transition: all 0.3s;
+}
+.svglogolink::after {
+  content: '';
+  position: absolute;
+  top: 5px;
+  width: 5.25rem;
+  height: 3rem;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.28),
+    rgba(255, 255, 255, 0.08) 45%,
+    rgba(255, 255, 255, 0)
+  );
+  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
+  filter: blur(1.5px);
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s;
+  mix-blend-mode: lighten;
+}
+.svglogolink:hover {
+  filter: brightness(1.5) drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.8));
+}
+.svglogolink:hover::before,
+.svglogolink:hover::after {
+  opacity: 1;
+}
+
+.bottomLogoBgWrapper {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: fit-content;
+  height: fit-content;
+  z-index: 100;
+  pointer-events: auto;
+
+  filter: drop-shadow(0px 1px 2px var(--border)) drop-shadow(rgba(0, 0, 0, 0.8) 2px 4px 6px);
+
+  animation: bottomLogoEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes bottomLogoEnter {
+  from {
+    opacity: 0;
+    transform: translateY(1.25rem) scale(0.94);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@media (max-width: 768px) {
+  .bottomLogoBgWrapper {
+    scale: 0.7;
+    transform-origin: bottom;
+  }
+}
+
+.ninecanvas {
+  position: relative;
+  min-height: 100vh;
+  max-height: 100vh;
+  overflow: auto hidden;
+  z-index: 20;
+}
+
+body.has-ninecanvas-footer-reveal article.page-article {
+  overflow: auto hidden;
+}
+
+.hzNineCanvasBlock {
+  isolation: isolate;
+  margin: 0;
+  position: sticky;
+  top: 0;
+  height: 100dvh;
+  // background: var(--card-foreground);
+  background: radial-gradient(circle at center, #353535, transparent);
+  overflow: hidden;
+  z-index: 20;
+}
+
+.hzNineCanvasBlock .renderblock-container {
+  min-height: initial;
+}

package/templates/blocks/DD-NineCanvas/tooltip/get-strict-context.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+function getStrictContext<T>(
+  name?: string,
+): readonly [
+  ({ value, children }: { value: T; children?: React.ReactNode }) => React.JSX.Element,
+  () => T,
+] {
+  const Context = React.createContext<T | undefined>(undefined)
+
+  const Provider = ({ value, children }: { value: T; children?: React.ReactNode }) => (
+    <Context.Provider value={value}>{children}</Context.Provider>
+  )
+
+  const useSafeContext = () => {
+    const ctx = React.useContext(Context)
+    if (ctx === undefined) {
+      throw new Error(`useContext must be used within ${name ?? 'a Provider'}`)
+    }
+    return ctx
+  }
+
+  return [Provider, useSafeContext] as const
+}
+
+export { getStrictContext }

package/templates/blocks/DD-NineCanvas/tooltip/primitives.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import * as React from 'react'
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+import {
+  AnimatePresence,
+  motion,
+  useMotionValue,
+  useSpring,
+  type HTMLMotionProps,
+  type MotionValue,
+  type SpringOptions,
+} from 'motion/react'
+
+import { getStrictContext } from './get-strict-context'
+import { useControlledState } from './use-controlled-state'
+
+type TooltipContextType = {
+  isOpen: boolean
+  setIsOpen: TooltipProps['onOpenChange']
+  x: MotionValue<number>
+  y: MotionValue<number>
+  followCursor?: boolean | 'x' | 'y'
+  followCursorSpringOptions?: SpringOptions
+}
+
+const [LocalTooltipProvider, useTooltip] = getStrictContext<TooltipContextType>('TooltipContext')
+
+type TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider>
+
+function TooltipProvider(props: TooltipProviderProps) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />
+}
+
+type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {
+  followCursor?: boolean | 'x' | 'y'
+  followCursorSpringOptions?: SpringOptions
+}
+
+function Tooltip({
+  followCursor = false,
+  followCursorSpringOptions = { stiffness: 200, damping: 17 },
+  ...props
+}: TooltipProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  })
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
+
+  return (
+    <LocalTooltipProvider
+      value={{
+        isOpen,
+        setIsOpen,
+        x,
+        y,
+        followCursor,
+        followCursorSpringOptions,
+      }}
+    >
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} onOpenChange={setIsOpen} />
+    </LocalTooltipProvider>
+  )
+}
+
+type TooltipTriggerProps = React.ComponentProps<typeof TooltipPrimitive.Trigger>
+
+function TooltipTrigger({ onMouseMove, ...props }: TooltipTriggerProps) {
+  const { x, y, followCursor } = useTooltip()
+
+  const handleMouseMove = (
+    event: Parameters<NonNullable<TooltipTriggerProps['onMouseMove']>>[0],
+  ) => {
+    onMouseMove?.(event)
+
+    const target = event.currentTarget.getBoundingClientRect()
+
+    if (followCursor === 'x' || followCursor === true) {
+      const eventOffsetX = event.clientX - target.left
+      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2
+      x.set(offsetXFromCenter)
+    }
+
+    if (followCursor === 'y' || followCursor === true) {
+      const eventOffsetY = event.clientY - target.top
+      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2
+      y.set(offsetYFromCenter)
+    }
+  }
+
+  return (
+    <TooltipPrimitive.Trigger
+      data-slot="tooltip-trigger"
+      onMouseMove={handleMouseMove}
+      {...props}
+    />
+  )
+}
+
+type TooltipPortalProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Portal>, 'keepMounted'>
+
+function TooltipPortal(props: TooltipPortalProps) {
+  const { isOpen } = useTooltip()
+
+  return (
+    <AnimatePresence>
+      {isOpen && <TooltipPrimitive.Portal keepMounted data-slot="tooltip-portal" {...props} />}
+    </AnimatePresence>
+  )
+}
+
+type TooltipPositionerProps = React.ComponentProps<typeof TooltipPrimitive.Positioner>
+
+function TooltipPositioner(props: TooltipPositionerProps) {
+  return <TooltipPrimitive.Positioner data-slot="tooltip-positioner" {...props} />
+}
+
+type TooltipPopupProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Popup>, 'render'> &
+  HTMLMotionProps<'div'>
+
+function TooltipPopup({
+  transition = { type: 'spring', stiffness: 300, damping: 25 },
+  style,
+  ...props
+}: TooltipPopupProps) {
+  const { x, y, followCursor, followCursorSpringOptions } = useTooltip()
+  const translateX = useSpring(x, followCursorSpringOptions)
+  const translateY = useSpring(y, followCursorSpringOptions)
+
+  return (
+    <TooltipPrimitive.Popup
+      render={
+        <motion.div
+          key="tooltip-popup"
+          data-slot="tooltip-popup"
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.5 }}
+          transition={transition}
+          style={{
+            x: followCursor === 'x' || followCursor === true ? translateX : undefined,
+            y: followCursor === 'y' || followCursor === true ? translateY : undefined,
+            ...style,
+          }}
+          {...props}
+        />
+      }
+    />
+  )
+}
+
+type TooltipArrowProps = React.ComponentProps<typeof TooltipPrimitive.Arrow>
+
+function TooltipArrow(props: TooltipArrowProps) {
+  return <TooltipPrimitive.Arrow data-slot="tooltip-arrow" {...props} />
+}
+
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipPositioner,
+  TooltipPopup,
+  TooltipArrow,
+  useTooltip,
+  type TooltipProviderProps,
+  type TooltipProps,
+  type TooltipTriggerProps,
+  type TooltipPortalProps,
+  type TooltipPositionerProps,
+  type TooltipPopupProps,
+  type TooltipArrowProps,
+  type TooltipContextType,
+}

package/templates/blocks/DD-NineCanvas/tooltip/tooltip.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+
+import {
+  TooltipProvider as TooltipProviderPrimitive,
+  Tooltip as TooltipPrimitive,
+  TooltipTrigger as TooltipTriggerPrimitive,
+  TooltipPositioner as TooltipPositionerPrimitive,
+  TooltipPopup as TooltipPopupPrimitive,
+  TooltipArrow as TooltipArrowPrimitive,
+  TooltipPortal as TooltipPortalPrimitive,
+  type TooltipProviderProps as TooltipProviderPrimitiveProps,
+  type TooltipProps as TooltipPrimitiveProps,
+  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,
+  type TooltipPositionerProps as TooltipPositionerPrimitiveProps,
+  type TooltipPopupProps as TooltipPopupPrimitiveProps,
+} from './primitives'
+import { cn } from '@/utilities/ui'
+
+type TooltipProviderProps = TooltipProviderPrimitiveProps
+
+function TooltipProvider({ delay = 0, ...props }: TooltipProviderProps) {
+  return <TooltipProviderPrimitive delay={delay} {...props} />
+}
+
+type TooltipProps = TooltipPrimitiveProps & {
+  delay?: TooltipProviderProps['delay']
+}
+
+function Tooltip({ delay = 0, ...props }: TooltipProps) {
+  return (
+    <TooltipProvider delay={delay}>
+      <TooltipPrimitive {...props} />
+    </TooltipProvider>
+  )
+}
+
+type TooltipTriggerProps = TooltipTriggerPrimitiveProps
+
+function TooltipTrigger({ ...props }: TooltipTriggerProps) {
+  return <TooltipTriggerPrimitive {...props} />
+}
+
+type TooltipPanelProps = TooltipPositionerPrimitiveProps & TooltipPopupPrimitiveProps
+
+function TooltipPanel({ className, sideOffset = 4, children, style, ...props }: TooltipPanelProps) {
+  return (
+    <TooltipPortalPrimitive>
+      <TooltipPositionerPrimitive sideOffset={sideOffset} className="z-100 hzToolTip" {...props}>
+        <TooltipPopupPrimitive
+          className={cn(
+            'bg-primary/75 text-primary-foreground w-fit origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+            className,
+          )}
+          style={style}
+        >
+          {children}
+          <TooltipArrowPrimitive className="bg-primary fill-primary z-50 size-2.5 data-[side='bottom']:-top-1 data-[side='right']:-left-1 data-[side='left']:-right-1 data-[side='inline-start']:-right-1 data-[side='inline-end']:-left-1 rotate-45 rounded-[2px]" />
+        </TooltipPopupPrimitive>
+      </TooltipPositionerPrimitive>
+    </TooltipPortalPrimitive>
+  )
+}
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPanel,
+  type TooltipProps,
+  type TooltipTriggerProps,
+  type TooltipPanelProps,
+}

package/templates/blocks/DD-NineCanvas/tooltip/use-controlled-state.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+interface CommonControlledStateProps<T> {
+  value?: T
+  defaultValue?: T
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useControlledState<T, Rest extends any[] = []>(
+  props: CommonControlledStateProps<T> & {
+    onChange?: (value: T, ...args: Rest) => void
+  },
+): readonly [T, (next: T, ...args: Rest) => void] {
+  const { value, defaultValue, onChange } = props
+
+  const [state, setInternalState] = React.useState<T>(
+    value !== undefined ? value : (defaultValue as T),
+  )
+
+  React.useEffect(() => {
+    if (value !== undefined) setInternalState(value)
+  }, [value])
+
+  const setState = React.useCallback(
+    (next: T, ...args: Rest) => {
+      setInternalState(next)
+      onChange?.(next, ...args)
+    },
+    [onChange],
+  )
+
+  return [state, setState] as const
+}

package/templates/blocks/DD-NineCanvas/utilities/FadeOnScroll.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { motion, useScroll, useTransform } from 'framer-motion'
+
+type FadeOffset = 'start start' | 'start center' | 'start end' | `start ${number}%`
+
+interface FadeOnScrollProps {
+  children: React.ReactNode
+  startFade?: number
+  endFade?: number
+  finalOpacity?: number
+  offsetStart?: FadeOffset
+  offsetEnd?: FadeOffset
+  useAbsoluteScroll?: boolean
+}
+
+export const FadeOnScroll: React.FC<FadeOnScrollProps> = ({
+  children,
+  startFade = 0,
+  endFade = 1,
+  finalOpacity = 0,
+  offsetStart = 'start 50%',
+  offsetEnd = 'start 0%',
+  useAbsoluteScroll = false,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [targetRef, setTargetRef] = useState<HTMLElement | null>(null)
+
+  // Bind scroll tracking only when ready
+  const scrollSetupRef = useRef(false)
+  const { scrollY, scrollYProgress } = useScroll({
+    target: targetRef ? { current: targetRef } : undefined,
+    offset: [offsetStart, offsetEnd],
+  })
+
+  const opacity = useTransform(
+    useAbsoluteScroll ? scrollY : scrollYProgress,
+    [startFade, endFade],
+    [1, finalOpacity],
+  )
+
+  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/blocks/DD-NineCanvas/utilities/ParallaxWrapper.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import React, { useEffect, useId, useRef } from 'react'
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
+
+type ParallaxWrapperProps = {
+  children: React.ReactNode
+  enabled?: boolean
+  sectionId?: string
+  animationConfig?: {
+    smooth?: number
+    effects?: boolean
+    scrollToSelector?: string
+    scrollDuration?: number
+    ease?: string
+    triggerSelector?: string
+    pinSpacing?: number | string
+    pinTargetSelector?: string
+    markers?: boolean
+    makers?: boolean
+    parallaxDistance?: number
+    parallaxDirection?: 'up' | 'down'
+  }
+}
+
+const toNumber = (value: number | string | undefined, fallback: number): number => {
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) return parsed
+  }
+
+  return fallback
+}
+
+const ParallaxWrapper: React.FC<ParallaxWrapperProps> = ({
+  children,
+  enabled = true,
+  sectionId,
+  animationConfig = {},
+}) => {
+  const reactId = useId()
+  const safeId = sectionId || `parallax-${reactId.replace(/:/g, '')}`
+
+  const sectionRef = useRef<HTMLElement>(null)
+  const innerRef = useRef<HTMLDivElement>(null)
+
+  const {
+    scrollToSelector,
+    scrollDuration = 1.3,
+    triggerSelector,
+    pinTargetSelector,
+    pinSpacing,
+    markers,
+    makers,
+    parallaxDistance = 120,
+    parallaxDirection = 'up',
+  } = animationConfig
+
+  const showMarkers = markers === true || makers === true
+  const distance = Math.abs(toNumber(parallaxDistance, 120))
+  const yStart = parallaxDirection === 'down' ? -distance : distance
+  const yEnd = parallaxDirection === 'down' ? distance : -distance
+
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ['start end', 'end start'],
+  })
+
+  const y = useTransform(scrollYProgress, [0, 1], [yStart, yEnd])
+
+  useEffect(() => {
+    if (!enabled || typeof window === 'undefined') return
+
+    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin)
+
+    const sectionEl = sectionRef.current
+    const innerEl = innerRef.current
+
+    if (!sectionEl || !innerEl) return
+
+    const scrollTo = (selector: string = scrollToSelector || `#${safeId}`) => {
+      if (!selector) return
+
+      if ((window as any).lenis) {
+        ;(window as any).lenis.scrollTo(selector, {
+          offset: 0,
+          duration: scrollDuration,
+          easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+        })
+        return
+      }
+
+      const target = document.querySelector(selector)
+      if (target) {
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+    }
+
+    ;(window as any).gsapScrollTo = scrollTo
+
+    const triggerEl = triggerSelector ? document.querySelector(triggerSelector) : sectionEl
+    const pinEl = pinTargetSelector ? document.querySelector(pinTargetSelector) : null
+
+    if (!triggerEl) return
+
+    let pinTrigger: ScrollTrigger | undefined
+
+    if (pinEl) {
+      const pinDistance = toNumber(pinSpacing, window.innerHeight)
+
+      pinTrigger = ScrollTrigger.create({
+        trigger: triggerEl,
+        pin: pinEl,
+        start: 'top top',
+        end: `+=${pinDistance}`,
+        scrub: true,
+        markers: showMarkers,
+        invalidateOnRefresh: true,
+      })
+    }
+
+    return () => {
+      pinTrigger?.kill()
+    }
+  }, [
+    enabled,
+    safeId,
+    scrollToSelector,
+    scrollDuration,
+    triggerSelector,
+    pinTargetSelector,
+    pinSpacing,
+    showMarkers,
+  ])
+
+  if (!enabled) return <>{children}</>
+
+  return (
+    <section
+      id={safeId}
+      ref={sectionRef}
+      className="relative overflow-hidden"
+      data-parallax-wrapper="true"
+    >
+      <motion.div ref={innerRef} style={{ y }} className="relative will-change-transform">
+        {children}
+      </motion.div>
+    </section>
+  )
+}
+
+export default ParallaxWrapper

package/templates/blocks/DD-NineCanvas/utilities/renderCustomCSS.ts

@@ -0,0 +1,5 @@
+export const extractCustomCSS = (blocks: any[]) =>
+  (Array.isArray(blocks) ? blocks : [])
+    ?.filter((block) => block.blockType === 'customCSS')
+    .map((block) => block.css)
+    .join('\n')