@dickpy/dsh-imagegen 1.5.9 → 1.5.10

package/lib/index.js

@@ -41,7 +41,7 @@ function installSettingsSectionCompat(ctx, ns, schema, entry, hooks) {
 /** Settings namespace this plugin owns (host settings seam + bridge). */
 const IMAGEGEN_SETTINGS_NAMESPACE = "dsh-imagegen";
 /** Published package version shared by the host updater and the client UI. */
-const PLUGIN_VERSION = "1.5.9";
+const PLUGIN_VERSION = "1.5.10";
 /** Same-origin route family (loopback-only, mirroring the dsh-ssh fence). */
 const SETTINGS_API = {
 	describe: "/api/dsh-imagegen/settings/describe",

package/package.json

@@ -1,82 +1,82 @@
-{
-  "name": "@dickpy/dsh-imagegen",
-  "description": "AI image generation plugin for the dsh web GUI: text-to-image and image-to-image through configurable provider channels (gpt-image-2 / grok-imagine-image / nanobanana series / seedream-5.0-pro / dall-e-3, with native xAI Grok Imagine, Google Nano Banana and ByteDance Seedream request shaping), with per-channel model catalogs and a New Session / Image Generation tab entry opening a three-column studio beside the native conversation.",
-  "version": "1.5.9",
-  "type": "module",
-  "main": "lib/index.js",
-  "exports": {
-    ".": "./lib/index.js",
-    "./client": "./lib/client.js",
-    "./package.json": "./package.json"
-  },
-  "dsh": {
-    "bundle": {
-      "patch": "./cordis.patch.yml"
-    },
-    "client": {
-      "inject": [
-        "@deepseek-ai/dsh-client-store",
-        "@deepseek-ai/dsh-api-remotes",
-        "@deepseek-ai/dsh-api-session-controller",
-        "@deepseek-ai/dsh-client-connection",
-        "@deepseek-ai/dsh-client-ui-conversation",
-        "@deepseek-ai/dsh-client-ui-renderer",
-        "@deepseek-ai/dsh-client-ui-settings",
-        "@deepseek-ai/dsh-client-ui-tool"
-      ],
-      "platform": "web"
-    }
-  },
-  "dependencies": {
-    "lucide-react": "^1.41.0",
-    "schemastery": "^3.18.0"
-  },
-  "devDependencies": {
-    "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-api-remotes": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-api-session-controller": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-attachment": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-connection": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-locale": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-store": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-ui-conversation": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-ui-primitives": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-ui-renderer": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-ui-settings": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-ui-slots": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-commands": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-host-webserver": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-llm": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-settings": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-system-prompt": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-tools": "0.1.2-alpha.2",
-    "@types/node": "^22.20.0",
-    "@types/react": "~18.3.1",
-    "@types/react-dom": "^18.3.5",
-    "jsdom": "25.0.1",
-    "lightningcss": "1.32.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "schemastery": "^3.18.0",
-    "tsdown": "0.22.2",
-    "typescript": "~5.7.2"
-  },
-  "files": [
-    "lib",
-    "src",
-    "cordis.patch.yml",
-    "docs",
-    "README.md"
-  ],
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dickpy/dsh-imagegen.git"
-  },
-  "scripts": {
-    "build": "tsdown",
-    "watch": "tsdown --watch",
-    "typecheck": "tsc --noEmit",
-    "fetch-templates": "node scripts/fetch-templates.mjs"
-  }
-}
+{
+  "name": "@dickpy/dsh-imagegen",
+  "description": "AI image generation plugin for the dsh web GUI: text-to-image and image-to-image through configurable provider channels (gpt-image-2 / grok-imagine-image / nanobanana series / seedream-5.0-pro / dall-e-3, with native xAI Grok Imagine, Google Nano Banana and ByteDance Seedream request shaping), with per-channel model catalogs and a New Session / Image Generation tab entry opening a three-column studio beside the native conversation.",
+  "version": "1.5.10",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-store",
+        "@deepseek-ai/dsh-api-remotes",
+        "@deepseek-ai/dsh-api-session-controller",
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-tool"
+      ],
+      "platform": "web"
+    }
+  },
+  "dependencies": {
+    "lucide-react": "^1.41.0",
+    "schemastery": "^3.18.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.2",
+    "@deepseek-ai/dsh-api-remotes": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-api-session-controller": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-attachment": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-connection": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-locale": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-store": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-settings": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-commands": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-host-webserver": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-llm": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-settings": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-system-prompt": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-tools": "0.1.2-alpha.2",
+    "@types/node": "^22.20.0",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "^18.3.5",
+    "jsdom": "25.0.1",
+    "lightningcss": "1.32.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "schemastery": "^3.18.0",
+    "tsdown": "0.22.2",
+    "typescript": "~5.7.2"
+  },
+  "files": [
+    "lib",
+    "src",
+    "cordis.patch.yml",
+    "docs",
+    "README.md"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dickpy/dsh-imagegen.git"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "watch": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "fetch-templates": "node scripts/fetch-templates.mjs"
+  }
+}

package/src/client/CanvasBackgrounds.tsx

@@ -3,6 +3,7 @@
  * receives pointer events, so every listener observes the viewport element. */
 
 import { useEffect, useRef } from 'react'
+import { detectLightSurface } from './surface-theme.ts'
 import css from './canvas-workspace.module.css'
 
 /** Interactive flowmap-style dot field ("fluid distortion"): the pointer's
@@ -632,25 +633,6 @@ const SHADER_QUAD_VERTEX = `
   }
 `
 
-/** Walk up from the grid layer to the first opaque surface and decide
- *  light vs dark, so the shader backdrops can pick their lightMode ink. */
-function detectLightSurface(element: HTMLElement): boolean {
-  let node: HTMLElement | null = element
-  while (node !== null) {
-    const color = getComputedStyle(node).backgroundColor
-    const match = color.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,]+([\d.]+))?\s*\)/)
-    if (match !== null) {
-      const alpha = match[4] !== undefined ? Number(match[4]) : 1
-      if (alpha >= 0.5) {
-        const luminance = (0.2126 * Number(match[1]) + 0.7152 * Number(match[2]) + 0.0722 * Number(match[3])) / 255
-        return luminance > 0.55
-      }
-    }
-    node = node.parentElement
-  }
-  return false
-}
-
 /** Shared engine for the fullscreen-shader backdrops: compiles one program,
  *  owns the DPR-sized canvas, the rAF loop, viewport resize and smoothed
  *  pointer tracking. `frame` sets uniforms and calls draw(). WebGL2 is

package/src/client/CanvasWorkspace.tsx

@@ -351,6 +351,95 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
   const [libraryOpen, setLibraryOpen] = useState(false)
   const [pickerTab, setPickerTab] = useState<'upload' | 'history' | 'gallery' | 'generate'>('upload')
   const backgroundFileRef = useRef<HTMLInputElement>(null)
+
+  /** reactbits.dev "Dock" port: each tile spring-scales by its distance to the
+   *  pointer (width/height, so neighbours part like the macOS dock) and the
+   *  panel breathes taller while hovered to make room for the labels. */
+  const dockOuterRef = useRef<HTMLDivElement>(null)
+  const dockRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const outer = dockOuterRef.current
+    const dock = dockRef.current
+    if (outer === null || dock === null) return
+    if (typeof window.requestAnimationFrame !== 'function') return
+    const clockNow = (): number => (typeof performance !== 'undefined' ? performance.now() : Date.now())
+    const BASE = 34
+    const MAGNIFIED = 50
+    const DISTANCE = 150
+    const REST_HEIGHT = 42
+    const HOVER_HEIGHT = MAGNIFIED + MAGNIFIED / 2 + 4
+    const STIFFNESS = 170
+    const DAMPING = 16
+    const MASS = 0.5
+    const tiles = [...dock.querySelectorAll<HTMLElement>('[data-dock-item]')].map(el => ({ el, size: BASE, velocity: 0 }))
+    let outerSize = REST_HEIGHT
+    let outerVelocity = 0
+    let mouseX = Number.POSITIVE_INFINITY
+    let hovered = false
+    let raf = 0
+    let running = false
+    let last = clockNow()
+    const step = (now: number): void => {
+      const dt = Math.min(0.05, (now - last) / 1000)
+      last = now
+      let settled = true
+      for (const tile of tiles) {
+        let target = BASE
+        if (hovered) {
+          const rect = tile.el.getBoundingClientRect()
+          const distance = Math.abs(mouseX - (rect.left + rect.width / 2))
+          target = BASE + (MAGNIFIED - BASE) * Math.max(0, 1 - distance / DISTANCE)
+        }
+        tile.velocity += ((STIFFNESS * (target - tile.size) - DAMPING * tile.velocity) / MASS) * dt
+        tile.size += tile.velocity * dt
+        if (Math.abs(target - tile.size) > 0.15 || Math.abs(tile.velocity) > 2) settled = false
+        else {
+          tile.size = target
+          tile.velocity = 0
+        }
+        tile.el.style.width = `${tile.size.toFixed(2)}px`
+        tile.el.style.height = `${tile.size.toFixed(2)}px`
+      }
+      const outerTarget = hovered ? HOVER_HEIGHT : REST_HEIGHT
+      outerVelocity += ((STIFFNESS * (outerTarget - outerSize) - DAMPING * outerVelocity) / MASS) * dt
+      outerSize += outerVelocity * dt
+      if (Math.abs(outerTarget - outerSize) > 0.25 || Math.abs(outerVelocity) > 3) settled = false
+      else {
+        outerSize = outerTarget
+        outerVelocity = 0
+      }
+      outer.style.height = `${outerSize.toFixed(2)}px`
+      if (settled) {
+        running = false
+        return
+      }
+      raf = window.requestAnimationFrame(step)
+    }
+    const wake = (): void => {
+      if (running) return
+      running = true
+      last = clockNow()
+      raf = window.requestAnimationFrame(step)
+    }
+    const onPointerMove = (event: PointerEvent): void => {
+      mouseX = event.clientX
+      hovered = true
+      wake()
+    }
+    const onPointerLeave = (): void => {
+      hovered = false
+      mouseX = Number.POSITIVE_INFINITY
+      wake()
+    }
+    dock.addEventListener('pointermove', onPointerMove)
+    dock.addEventListener('pointerleave', onPointerLeave)
+    wake()
+    return () => {
+      window.cancelAnimationFrame(raf)
+      dock.removeEventListener('pointermove', onPointerMove)
+      dock.removeEventListener('pointerleave', onPointerLeave)
+    }
+  }, [])
   const imageFileRef = useRef<HTMLInputElement>(null)
   const [renamingTitle, setRenamingTitle] = useState(false)
   const [confirmDeleteProject, setConfirmDeleteProject] = useState(false)
@@ -1869,59 +1958,58 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
       {emptyState}
     </div>
 
-    <div
-      className={`${css.dock} ${cursorClass}`}
-      data-canvas-no-zoom=""
-      onPointerMove={event => {
-        if (globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true) return
-        const dock = event.currentTarget
-        const cursorX = event.clientX - dock.getBoundingClientRect().left
-        // CSS-module class names are hashed in the DOM, so match by tag.
-        for (const button of dock.querySelectorAll<HTMLButtonElement>('button')) {
-          // offsetLeft is the layout position, unaffected by the scale transform,
-          // so the magnification wave does not feed back into itself.
-          const distance = Math.abs(cursorX - (button.offsetLeft + button.offsetWidth / 2))
-          const influence = Math.exp(-(distance * distance) / (2 * 48 * 48))
-          button.style.setProperty('--dock-scale', (1 + 0.24 * influence).toFixed(3))
-          button.style.setProperty('--dock-lift', `${(-8 * influence).toFixed(2)}px`)
-        }
-      }}
-      onPointerLeave={event => {
-        for (const button of event.currentTarget.querySelectorAll<HTMLButtonElement>('button')) {
-          button.style.setProperty('--dock-scale', '1')
-          button.style.setProperty('--dock-lift', '0px')
-        }
-      }}
-    >
-      <IconButton name="select" size={18} label={tt('canvas.toolSelect')} active={tool === 'select'} onClick={() => setTool('select')} />
-      <IconButton name="pan" size={18} label={tt('canvas.toolPan')} active={tool === 'pan'} onClick={() => setTool('pan')} />
-      <span className={css.dockDivider} />
-      <IconButton
-        name="image"
-        size={18}
-        label={tt('canvas.addImage')}
-        active={imageMenu !== null}
-        onClick={event => openDockMenu('image', event.currentTarget)}
-        onMouseEnter={event => openDockMenu('image', event.currentTarget)}
-        onMouseLeave={scheduleMenuClose}
-      />
-      <IconButton name="text" size={18} label={tt('canvas.addText')} onClick={() => placeNewNode(createTextNode())} />
-      <IconButton name="sparkle" size={18} label={tt('canvas.addConfigNode')} onClick={() => placeNewNode(createConfigNode())} />
-      <IconButton name="template" size={18} label={tt('canvas.templateLibrary')} active={libraryOpen} onClick={() => setLibraryOpen(previous => !previous)} />
-      <span className={css.dockDivider} />
-      <IconButton
-        name="background"
-        size={18}
-        label={tt('canvas.background')}
-        active={backgroundMenu !== null}
-        onClick={event => openDockMenu('background', event.currentTarget)}
-        onMouseEnter={event => openDockMenu('background', event.currentTarget)}
-        onMouseLeave={scheduleMenuClose}
-      />
-      <IconButton name="undo" size={18} label={tt('canvas.undo')} disabled={pastRef.current.length === 0} onClick={undo} />
-      <IconButton name="redo" size={18} label={tt('canvas.redo')} disabled={futureRef.current.length === 0} onClick={redo} />
-      <span className={css.dockDivider} />
-      <IconButton name="trash" size={18} label={tt('canvas.delete')} disabled={selectedIds.size === 0 && selectedConnectionId === null} onClick={deleteSelection} />
+    <div className={css.dockOuter} data-canvas-no-zoom="" ref={dockOuterRef}>
+      <div className={`${css.dock} ${cursorClass}`} ref={dockRef} data-canvas-no-zoom="" role="toolbar">
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.toolSelect')}>
+          <IconButton name="select" size={18} label={tt('canvas.toolSelect')} active={tool === 'select'} onClick={() => setTool('select')} />
+        </div>
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.toolPan')}>
+          <IconButton name="pan" size={18} label={tt('canvas.toolPan')} active={tool === 'pan'} onClick={() => setTool('pan')} />
+        </div>
+        <span className={css.dockDivider} aria-hidden="true" />
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.addImage')}>
+          <IconButton
+            name="image"
+            size={18}
+            label={tt('canvas.addImage')}
+            active={imageMenu !== null}
+            onClick={event => openDockMenu('image', event.currentTarget)}
+            onMouseEnter={event => openDockMenu('image', event.currentTarget)}
+            onMouseLeave={scheduleMenuClose}
+          />
+        </div>
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.addText')}>
+          <IconButton name="text" size={18} label={tt('canvas.addText')} onClick={() => placeNewNode(createTextNode())} />
+        </div>
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.addConfigNode')}>
+          <IconButton name="sparkle" size={18} label={tt('canvas.addConfigNode')} onClick={() => placeNewNode(createConfigNode())} />
+        </div>
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.templateLibrary')}>
+          <IconButton name="template" size={18} label={tt('canvas.templateLibrary')} active={libraryOpen} onClick={() => setLibraryOpen(previous => !previous)} />
+        </div>
+        <span className={css.dockDivider} aria-hidden="true" />
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.background')}>
+          <IconButton
+            name="background"
+            size={18}
+            label={tt('canvas.background')}
+            active={backgroundMenu !== null}
+            onClick={event => openDockMenu('background', event.currentTarget)}
+            onMouseEnter={event => openDockMenu('background', event.currentTarget)}
+            onMouseLeave={scheduleMenuClose}
+          />
+        </div>
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.undo')}>
+          <IconButton name="undo" size={18} label={tt('canvas.undo')} disabled={pastRef.current.length === 0} onClick={undo} />
+        </div>
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.redo')}>
+          <IconButton name="redo" size={18} label={tt('canvas.redo')} disabled={futureRef.current.length === 0} onClick={redo} />
+        </div>
+        <span className={css.dockDivider} aria-hidden="true" />
+        <div className={css.dockItem} data-dock-item="" data-label={tt('canvas.delete')}>
+          <IconButton name="trash" size={18} label={tt('canvas.delete')} disabled={selectedIds.size === 0 && selectedConnectionId === null} onClick={deleteSelection} />
+        </div>
+      </div>
     </div>
 
     {imageMenu !== null ? <div

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