@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/src/motion/liquid.ts

@@ -9,7 +9,9 @@ import { transparentColor } from './surface';
  * a "goo" filter (blur 20, alpha threshold 19·a − 9), so while the surface's
  * blob swings out of the opener on a spring (144/14, kick 2400 px/s) they
  * stretch and merge like a liquid; the content zooms in from twice its size.
- * Each property runs on its own channel, as in the source.
+ * Each property runs on its own channel, as in the source. The goo only works
+ * while the shape leaves the opener: then the filter goes, so the rest of the
+ * travel is drawn sharp, and it settles as soon as the springs rest.
  */
 
 const GOO = 'mk-liquid-goo';
@@ -22,7 +24,7 @@ function ensureGoo() {
   svg.setAttribute('width', '0');
   svg.setAttribute('height', '0');
   svg.style.position = 'absolute';
-  svg.innerHTML = `<defs><filter id="${GOO}" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/><feColorMatrix type="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.innerHTML = `<defs><filter id="${GOO}" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/><feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"/></filter></defs>`;
   document.body.append(svg);
 }
 
@@ -139,7 +141,7 @@ export function liquidOpen(surface: HTMLElement, origin: HTMLElement, parts: HTM
     }
   });
   const L = TIMING.liquid;
-  void motion.animate(
+  const settled = motion.animate(
     { top: box.top, left: box.left, width: box.width, height: box.height, radius: endRadius, scale: 1, blur: 0 },
     {
       top: spring(144, 14, { velocity: 2400, direction: towardY }),
@@ -154,17 +156,25 @@ export function liquidOpen(surface: HTMLElement, origin: HTMLElement, parts: HTM
   gsap.to(shape, { background: surfaceColor, duration: L.color, delay: L.colorDelay, ease: 'power2.out' });
   if (parts.length) gsap.to(parts, { opacity: 1, duration: L.color, delay: L.colorDelay, ease: 'power2.out' });
   gsap.to(originBlob, { opacity: 0, duration: L.ghost, delay: L.ghostDelay, ease: 'power2.out' });
+  // Once the opener's blob has gone there is nothing left to melt into: the thresholded blur would only blur the
+  // shape's edge, so the shape is drawn as it is for the rest of the way.
+  const sharpen = setTimeout(() => {
+    layer.style.filter = 'none';
+    originBlob.remove();
+  }, (L.ghostDelay + L.ghost) * 1000 + 30);
   let done = false;
   const finish = () => {
     if (done) return;
     done = true;
     motion.stop();
     clearTimeout(timer);
+    clearTimeout(sharpen);
     layer.remove();
     restore();
     if (parts.length) gsap.set(parts, { clearProps: 'opacity,transform,transformOrigin,filter' });
   };
-  // The springs settle well within the source's 1.1 s window.
+  // The surface takes over as soon as every channel rests; the source's 1.1 s window stays as a safety net.
+  void settled.then(finish);
   const timer = setTimeout(finish, L.safetyMs);
   return finish;
 }

package/src/react/index.ts

@@ -69,7 +69,7 @@ export {
   type ChatComposerProps,
 } from '../components/chat/react';
 export { Nav, type NavProps, type NavItem } from '../components/nav/react';
-export { NAV_STYLES, type NavStyle } from '../components/nav/engine';
+export { NAV_STYLES, NAV_STYLE_ALIASES, toNavStyle, type NavStyle, type NavStyleAlias } from '../components/nav/engine';
 export { Steps, type StepsProps } from '../components/steps/react';
 export { Cursor, type CursorProps } from '../components/cursor/react';
 export { Frost, type FrostProps } from './frost';
@@ -156,3 +156,16 @@ export { EditableTable, type EditableTableProps, type EditableTableHandle } from
 export type { EditableColumn, RowChange, EditorKind } from '../components/editable-table/engine';
 export { RichTextEditor, type RichTextEditorProps, type RichTextEditorHandle } from '../components/rich-text-editor/react';
 export type { RichCommand } from '../components/rich-text-editor/engine';
+export { Select, type SelectProps } from '../components/select/react';
+export { AddToCart, type AddToCartProps } from '../components/add-to-cart/react';
+export { ScrollIsland, type ScrollIslandProps } from '../components/scroll-island/react';
+export { PillButton, type PillButtonProps } from '../components/pill-button/react';
+export { Toolbar, type ToolbarProps } from '../components/toolbar/react';
+export { BidirectionalSlider, type BidirectionalSliderProps } from '../components/bidirectional-slider/react';
+export { VoiceDots, type VoiceDotsProps } from '../components/voice-dots/react';
+export { PieChart, type PieChartProps } from '../components/pie-chart/react';
+export { RadarChart, type RadarChartProps } from '../components/radar-chart/react';
+export { RadialChart, type RadialChartProps } from '../components/radial-chart/react';
+export { SankeyChart, type SankeyChartProps } from '../components/sankey-chart/react';
+export { HeatmapChart, type HeatmapChartProps } from '../components/heatmap-chart/react';
+export { OrbitMenu, type OrbitMenuProps } from '../components/orbit-menu/react';