@dickpy/dsh-imagegen 1.5.8 → 1.5.10

package/src/client/GooeyNav.module.css

@@ -0,0 +1,224 @@
+/* reactbits.dev "GooeyNav" port, theme-following. The gooey merge uses an SVG
+ * alpha-contrast filter (blur + feColorMatrix) instead of the CSS
+ * blur+contrast trick, so colored particles survive on any surface: the pill
+ * and ink follow the host theme via [data-theme]. */
+
+.container {
+  --gooey-time: 1500ms;
+  --gooey-color-1: #5227ff;
+  --gooey-color-2: #ff9ffc;
+  --gooey-color-3: #b19eef;
+  --gooey-color-4: #22d3ee;
+  /* light surface (default): dark ink pill, white text */
+  --gooey-pill: #17171c;
+  --gooey-pill-ink: #ffffff;
+  --gooey-ink: #5b5e6b;
+  position: relative;
+  font-size: 13px;
+}
+
+.container[data-theme='dark'] {
+  --gooey-pill: #ffffff;
+  --gooey-pill-ink: #17171c;
+  --gooey-ink: #ffffff;
+}
+
+.gooSvg {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.container nav {
+  display: flex;
+  position: relative;
+  transform: translate3d(0, 0, 0.01px);
+}
+
+.container nav ul {
+  display: flex;
+  gap: 6px;
+  list-style: none;
+  padding: 0 4px;
+  margin: 0;
+  position: relative;
+  z-index: 3;
+}
+
+.container nav li {
+  border-radius: 100vw;
+  position: relative;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease,
+    box-shadow 0.3s ease;
+  color: var(--gooey-ink);
+}
+
+.container nav li button {
+  display: inline-block;
+  padding: 5px 13px;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.container nav li.active {
+  color: var(--gooey-pill-ink);
+}
+
+.container nav li::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 10px;
+  background: var(--gooey-pill);
+  opacity: 0;
+  transform: scale(0);
+  transition: all 0.3s ease;
+  z-index: -1;
+}
+
+.container nav li.active::after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.effect {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  opacity: 1;
+  pointer-events: none;
+  display: grid;
+  place-items: center;
+  z-index: 1;
+}
+
+.effectText {
+  color: var(--gooey-ink);
+  transition: color 0.3s ease;
+  font-size: 13px;
+}
+
+.effectText.active {
+  color: var(--gooey-pill-ink);
+}
+
+.effectFilter {
+  filter: url(#dsh-gooey-nav-goo);
+}
+
+.effectFilter::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--gooey-pill);
+  transform: scale(0);
+  opacity: 0;
+  z-index: -1;
+  border-radius: 100vw;
+}
+
+.effectFilter.active::after {
+  animation: gooeyPill 0.3s ease both;
+}
+
+@keyframes gooeyPill {
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.particle,
+.point {
+  display: block;
+  opacity: 0;
+  width: 14px;
+  height: 14px;
+  border-radius: 100%;
+  transform-origin: center;
+}
+
+.particle {
+  --time: 1500ms;
+  position: absolute;
+  top: calc(50% - 7px);
+  left: calc(50% - 7px);
+  animation: gooeyParticle calc(var(--time)) ease 1 -350ms;
+}
+
+.point {
+  background: var(--color);
+  opacity: 1;
+  animation: gooeyPoint calc(var(--time)) ease 1 -350ms;
+}
+
+@keyframes gooeyParticle {
+  0% {
+    transform: rotate(0deg) translate(calc(var(--start-x)), calc(var(--start-y)));
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
+  }
+
+  70% {
+    transform: rotate(calc(var(--rotate) * 0.5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2));
+    opacity: 1;
+    animation-timing-function: ease;
+  }
+
+  85% {
+    transform: rotate(calc(var(--rotate) * 0.66)) translate(calc(var(--end-x)), calc(var(--end-y)));
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5));
+    opacity: 1;
+  }
+}
+
+@keyframes gooeyPoint {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
+  }
+
+  25% {
+    transform: scale(calc(var(--scale) * 0.25));
+  }
+
+  38% {
+    opacity: 1;
+  }
+
+  65% {
+    transform: scale(var(--scale));
+    opacity: 1;
+    animation-timing-function: ease;
+  }
+
+  85% {
+    transform: scale(var(--scale));
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .particle,
+  .point {
+    animation: none;
+  }
+}

package/src/client/GooeyNav.tsx

@@ -0,0 +1,185 @@
+/** reactbits.dev "GooeyNav" port (controlled, dependency-free): the active
+ *  pill merges with a radial burst of gooey particles through a
+ *  blur+contrast filter. The original renders white ink on dark surfaces,
+ *  so the palette flips per detected surface to stay readable in the host
+ *  theme. */
+
+import { useEffect, useRef, type ReactNode } from 'react'
+import { detectLightSurface } from './surface-theme.ts'
+import css from './GooeyNav.module.css'
+
+export interface GooeyNavItem {
+  key: string
+  label: ReactNode
+}
+
+const ANIMATION_TIME = 600
+const PARTICLE_COUNT = 15
+const PARTICLE_DISTANCES = [90, 10]
+const PARTICLE_R = 100
+const TIME_VARIANCE = 300
+const COLORS = [1, 2, 3, 1, 2, 3, 1, 4]
+
+export function GooeyNav(props: {
+  items: GooeyNavItem[]
+  activeIndex: number
+  onSelect: (index: number) => void
+  ariaLabel?: string
+}): React.JSX.Element {
+  const { items, activeIndex, onSelect, ariaLabel } = props
+  const containerRef = useRef<HTMLDivElement>(null)
+  const navRef = useRef<HTMLUListElement>(null)
+  const filterRef = useRef<HTMLSpanElement>(null)
+  const textRef = useRef<HTMLSpanElement>(null)
+  const burstRef = useRef<(li: HTMLElement) => void>(() => {})
+  const timersRef = useRef<number[]>([])
+  const activeIndexRef = useRef(activeIndex)
+  activeIndexRef.current = activeIndex
+
+  const updateEffectPosition = (element: HTMLElement): void => {
+    const container = containerRef.current
+    const filter = filterRef.current
+    const text = textRef.current
+    if (container === null || filter === null || text === null) return
+    const containerRect = container.getBoundingClientRect()
+    const pos = element.getBoundingClientRect()
+    const styles = {
+      left: `${pos.x - containerRect.x}px`,
+      top: `${pos.y - containerRect.y}px`,
+      width: `${pos.width}px`,
+      height: `${pos.height}px`,
+    }
+    Object.assign(filter.style, styles)
+    Object.assign(text.style, styles)
+    text.textContent = element.textContent
+  }
+
+  // One-time setup: the particle burst timers must survive selection changes,
+  // so they live outside the activeIndex-driven effect below.
+  useEffect(() => {
+    const container = containerRef.current
+    const filter = filterRef.current
+    const text = textRef.current
+    if (container === null || filter === null || text === null) return
+    container.dataset.theme = detectLightSurface(container) ? 'light' : 'dark'
+    let disposed = false
+    const noise = (amount: number): number => amount / 2 - Math.random() * amount
+    const getXY = (distance: number, pointIndex: number, totalPoints: number): [number, number] => {
+      const angle = ((360 + noise(8)) / totalPoints) * pointIndex * (Math.PI / 180)
+      return [distance * Math.cos(angle), distance * Math.sin(angle)]
+    }
+    const makeParticles = (element: HTMLElement): void => {
+      const bubbleTime = ANIMATION_TIME * 2 + TIME_VARIANCE
+      element.style.setProperty('--time', `${bubbleTime}ms`)
+      for (let i = 0; i < PARTICLE_COUNT; i++) {
+        const time = ANIMATION_TIME * 2 + noise(TIME_VARIANCE * 2)
+        const rotateSeed = noise(PARTICLE_R / 10)
+        const start = getXY(PARTICLE_DISTANCES[0] as number, PARTICLE_COUNT - i, PARTICLE_COUNT)
+        const end = getXY((PARTICLE_DISTANCES[1] as number) + noise(7), PARTICLE_COUNT - i, PARTICLE_COUNT)
+        const scale = 1 + noise(0.2)
+        const color = COLORS[Math.floor(Math.random() * COLORS.length)] ?? 1
+        const rotate = rotateSeed > 0 ? (rotateSeed + PARTICLE_R / 20) * 10 : (rotateSeed - PARTICLE_R / 20) * 10
+        const timer = window.setTimeout(() => {
+          if (disposed) return
+          const particle = document.createElement('span')
+          const point = document.createElement('span')
+          particle.className = css.particle
+          point.className = css.point
+          particle.style.setProperty('--start-x', `${start[0] as number}px`)
+          particle.style.setProperty('--start-y', `${start[1] as number}px`)
+          particle.style.setProperty('--end-x', `${end[0] as number}px`)
+          particle.style.setProperty('--end-y', `${end[1] as number}px`)
+          particle.style.setProperty('--time', `${time}ms`)
+          particle.style.setProperty('--scale', `${scale}`)
+          particle.style.setProperty('--color', `var(--gooey-color-${color}, currentColor)`)
+          particle.style.setProperty('--rotate', `${rotate}deg`)
+          particle.appendChild(point)
+          element.appendChild(particle)
+          if (typeof window.requestAnimationFrame === 'function') {
+            window.requestAnimationFrame(() => { element.classList.add(css.active) })
+          } else {
+            element.classList.add(css.active)
+          }
+          const removeTimer = window.setTimeout(() => { particle.remove() }, time)
+          timersRef.current.push(removeTimer)
+        }, 30)
+        timersRef.current.push(timer)
+      }
+    }
+    burstRef.current = (li: HTMLElement): void => {
+      updateEffectPosition(li)
+      for (const particle of [...filter.querySelectorAll(`.${css.particle}`)]) particle.remove()
+      text.classList.remove(css.active)
+      void text.offsetWidth
+      text.classList.add(css.active)
+      makeParticles(filter)
+    }
+    const positionActive = (): void => {
+      const nav = navRef.current
+      const activeLi = nav?.querySelectorAll('li')[activeIndexRef.current]
+      if (activeLi) {
+        updateEffectPosition(activeLi)
+        text.classList.add(css.active)
+      }
+    }
+    positionActive()
+    const observer = new ResizeObserver(positionActive)
+    observer.observe(container)
+    return () => {
+      disposed = true
+      for (const timer of timersRef.current) window.clearTimeout(timer)
+      timersRef.current = []
+      observer.disconnect()
+    }
+  }, [])
+
+  // External selection changes only reposition the pill (no burst); clicks
+  // animate through burstRef above.
+  useEffect(() => {
+    const nav = navRef.current
+    const text = textRef.current
+    const activeLi = nav?.querySelectorAll('li')[activeIndex]
+    if (activeLi) {
+      updateEffectPosition(activeLi)
+      text?.classList.add(css.active)
+    }
+  }, [activeIndex])
+
+  return (
+    <div className={css.container} ref={containerRef}>
+      <svg className={css.gooSvg} aria-hidden="true" focusable="false">
+        <defs>
+          {/* Alpha-contrast goo: merges the pill and particles without
+              crushing their colors the way CSS contrast() would. */}
+          <filter id="dsh-gooey-nav-goo" x="-150%" y="-150%" width="400%" height="400%">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
+            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" />
+          </filter>
+        </defs>
+      </svg>
+      <nav aria-label={ariaLabel} role="tablist">
+        <ul ref={navRef}>
+          {items.map((item, index) => (
+            <li key={item.key} className={activeIndex === index ? css.active : undefined}>
+              <button
+                type="button"
+                role="tab"
+                aria-selected={activeIndex === index}
+                onClick={event => {
+                  if (index === activeIndex) return
+                  const li = event.currentTarget.closest('li')
+                  if (li !== null) burstRef.current(li)
+                  onSelect(index)
+                }}
+              >
+                {item.label}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      <span className={`${css.effect} ${css.effectFilter}`} ref={filterRef} />
+      <span className={`${css.effect} ${css.effectText}`} ref={textRef} />
+    </div>
+  )
+}