@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/components/chat/engine.ts

@@ -0,0 +1,295 @@
+import { gsap, Flip, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { splitWords } from '../../core/split';
+import { TIMING } from '../../core/timing';
+import { inert, warnOnce, type Instance } from '../../core/types';
+import { enterMessages, fitComposer, scrollToLatest } from '../../motion/chat';
+import { flowIn } from '../../motion/flow';
+import { iconSvg } from '../icons';
+
+/*
+ * Stepbro's PrettyChat: new bubbles grow from their speaker's side while their
+ * words rise (enterMessages); the conversation scrolls to the newest one
+ * (0.35 s). A "Pensando…" placeholder shows only if the answer takes more than
+ * 500 ms, and then morphs (Flip, 0.7 s, no scaling of the text) into the reply.
+ * The composer grows with its text (0.18 s, from 64 px); Enter sends.
+ * Parts: [data-mk-part] messages, composer, input, mic, send.
+ * Messages: [data-mk-message] with data-mk-role="user|assistant|system" and a [data-mk-text].
+ */
+
+export type ChatRole = 'user' | 'assistant' | 'system';
+
+export interface ChatLabels {
+  thinking?: string;
+}
+
+export interface ChatOptions {
+  /** Animate the messages already there when the chat starts (default: no, history stays still). */
+  animateExisting?: boolean;
+  /** Clear the input after sending (default). */
+  clearOnSend?: boolean;
+  labels?: ChatLabels;
+  onSend?: (text: string) => void;
+}
+
+export interface ChatInstance extends Instance {
+  /** Append a plain-text message (vanilla convenience); it enters on its own. */
+  add(role: ChatRole, text: string): HTMLElement;
+  /** Show the thinking placeholder after 500 ms (a fast answer never shows it). */
+  pending(): void;
+  /** Add the answer: it morphs out of the placeholder if that was showing, else it enters. */
+  reply(message: HTMLElement | string): HTMLElement;
+  /** A confirmation bar flows in and its words rise. */
+  confirm(bar: HTMLElement): void;
+  setRecording(on: boolean): void;
+  scrollToLatest(): void;
+  /** Mark a message as already shown (a framework animates it itself). */
+  adopt(message: Element): void;
+  readonly messages: HTMLElement;
+}
+
+const MESSAGE = '[data-mk-message]';
+/** data-flip-id of the thinking placeholder; a framework's own placeholder must carry it. */
+export const PENDING_ID = 'mk-chat-pending';
+const part = (root: HTMLElement, name: string) => root.querySelector<HTMLElement>(`[data-mk-part="${name}"]`);
+
+/** The thinking placeholder's geometry, taken before the DOM changes (for frameworks). */
+export const capturePending = (placeholder: Element | null) => {
+  registerMotion();
+  return placeholder ? Flip.getState(placeholder) : null;
+};
+
+/** Morph a captured placeholder into the reply (after the DOM shows the reply). */
+export function morphPendingToReply(state: ReturnType<typeof Flip.getState> | null, reply: HTMLElement, scroller?: HTMLElement | null) {
+  registerMotion();
+  if (!state || reduced()) {
+    if (!reduced()) enterMessages([reply]);
+    return null;
+  }
+  const text = reply.querySelector<HTMLElement>('[data-mk-text], .message-text');
+  if (text) text.style.width = `${text.getBoundingClientRect().width}px`;
+  // Flip pairs the reply with the placeholder by this id (the placeholder carries it too).
+  reply.setAttribute('data-flip-id', PENDING_ID);
+  const words = text && !text.querySelector('table, pre') ? splitWords(text) : null;
+  if (words?.parts.length) {
+    gsap.fromTo(
+      words.parts,
+      { y: 16, autoAlpha: 0, filter: 'blur(6px)' },
+      {
+        y: 0,
+        autoAlpha: 1,
+        filter: 'blur(0px)',
+        duration: TIMING.word,
+        ease: 'back.out(1)',
+        stagger: TIMING.wordStagger,
+        clearProps: 'transform,opacity,visibility,filter',
+        onComplete: () => words.revert(),
+      },
+    );
+  }
+  return Flip.from(state, {
+    targets: reply,
+    duration: TIMING.bubble,
+    scale: false,
+    ease: EASE.signature,
+    onUpdate: () => {
+      if (scroller) scroller.scrollTop = scroller.scrollHeight;
+    },
+    onComplete: () => {
+      reply.removeAttribute('data-flip-id');
+      if (text) text.style.width = '';
+    },
+  });
+}
+
+/** A message bubble element (plain text). */
+export function chatMessage(role: ChatRole, text: string) {
+  const message = document.createElement('div');
+  message.dataset.mkMessage = '';
+  message.dataset.mkRole = role;
+  const body = document.createElement('span');
+  body.dataset.mkText = '';
+  body.textContent = text;
+  message.append(body);
+  return message;
+}
+
+export function createChat(root: HTMLElement | null, options: ChatOptions = {}): ChatInstance {
+  const messages = root ? part(root, 'messages') : null;
+  if (!root || !messages) {
+    warnOnce('chat: needs a [data-mk-part="messages"] container');
+    return inert({
+      add: () => document.createElement('div'),
+      pending() {},
+      reply: () => document.createElement('div'),
+      confirm() {},
+      setRecording() {},
+      scrollToLatest() {},
+      adopt() {},
+      messages: null as unknown as HTMLElement,
+    });
+  }
+  registerMotion();
+  const { clearOnSend = true } = options;
+  const thinking = options.labels?.thinking ?? 'Pensando...';
+  const scope = createScope();
+  const composer = part(root, 'composer');
+  const input = composer?.querySelector<HTMLTextAreaElement>('[data-mk-part="input"], textarea') ?? null;
+  const mic = part(root, 'mic');
+  const seen = new WeakSet<Element>();
+  let placeholder: HTMLElement | null = null;
+  let pendingTimer: ReturnType<typeof setTimeout> | undefined;
+  let waiting = false;
+
+  scope.attr(messages, 'role', 'log');
+  scope.attr(messages, 'aria-live', 'polite');
+  const existing = [...messages.querySelectorAll<HTMLElement>(MESSAGE)];
+  if (options.animateExisting) enterMessages(existing);
+  for (const message of existing) seen.add(message);
+
+  // New bubbles (from the app, a framework or add()) enter on their own.
+  const observer = scope.observe(
+    new MutationObserver((records) => {
+      const fresh: HTMLElement[] = [];
+      for (const record of records) {
+        for (const node of record.addedNodes) {
+          if (!(node instanceof HTMLElement) || !node.matches(MESSAGE) || seen.has(node)) continue;
+          seen.add(node);
+          fresh.push(node);
+        }
+      }
+      if (!fresh.length) return;
+      enterMessages(fresh);
+      scrollToLatest(messages);
+    }),
+  );
+  observer.observe(messages, { childList: true });
+
+  const clearPending = () => {
+    clearTimeout(pendingTimer);
+    pendingTimer = undefined;
+    waiting = false;
+  };
+
+  const add = (role: ChatRole, text: string) => {
+    const message = chatMessage(role, text);
+    messages.append(message);
+    return message;
+  };
+
+  const pending = () => {
+    clearPending();
+    waiting = true;
+    pendingTimer = setTimeout(() => {
+      pendingTimer = undefined;
+      if (!waiting || placeholder) return;
+      placeholder = document.createElement('div');
+      placeholder.dataset.mkMessage = '';
+      placeholder.dataset.mkRole = 'assistant';
+      placeholder.dataset.mkPending = '';
+      placeholder.setAttribute('data-flip-id', PENDING_ID);
+      placeholder.innerHTML = `<span class="mk-chat__thinking">${iconSvg('sparkle', 18)}<span></span></span>`;
+      placeholder.querySelector('span span')!.textContent = thinking;
+      seen.add(placeholder);
+      messages.append(placeholder);
+      enterMessages([placeholder]);
+      scrollToLatest(messages);
+    }, TIMING.chat.pendingDelayMs);
+  };
+
+  const reply = (content: HTMLElement | string) => {
+    const message = typeof content === 'string' ? chatMessage('assistant', content) : content;
+    clearPending();
+    seen.add(message);
+    const was = placeholder;
+    placeholder = null;
+    if (was?.isConnected) {
+      const state = capturePending(was);
+      was.replaceWith(message);
+      morphPendingToReply(state, message, messages);
+    } else {
+      if (!message.isConnected) messages.append(message);
+      enterMessages([message]);
+      scrollToLatest(messages);
+    }
+    return message;
+  };
+
+  const confirm = (bar: HTMLElement) => {
+    if (reduced()) return;
+    flowIn(bar);
+    const words = splitWords(bar);
+    if (!words.parts.length) return;
+    gsap.fromTo(
+      words.parts,
+      { y: 16, autoAlpha: 0, filter: 'blur(6px)' },
+      {
+        y: 0,
+        autoAlpha: 1,
+        filter: 'blur(0px)',
+        duration: TIMING.word,
+        ease: 'back.out(1)',
+        stagger: TIMING.chat.confirmWordStagger,
+        clearProps: 'transform,opacity,visibility,filter',
+        onComplete: () => words.revert(),
+      },
+    );
+  };
+
+  const send = () => {
+    if (!input) return;
+    const text = input.value.trim();
+    if (!text) return;
+    const allowed = root.dispatchEvent(new CustomEvent('mk:send', { bubbles: true, cancelable: true, detail: { text } }));
+    if (!allowed) return;
+    options.onSend?.(text);
+    if (clearOnSend) {
+      input.value = '';
+      fitComposer(input);
+    }
+  };
+
+  if (input) {
+    scope.on(input, 'input', () => fitComposer(input));
+    scope.on(input, 'keydown', (event) => {
+      const key = event as KeyboardEvent;
+      if (key.key !== 'Enter' || key.shiftKey || key.isComposing) return;
+      event.preventDefault();
+      send();
+    });
+  }
+  if (composer) {
+    scope.on(composer, 'submit', (event) => {
+      event.preventDefault();
+      send();
+    });
+    const sendButton = part(root, 'send');
+    if (sendButton && !composer.matches('form')) scope.on(sendButton, 'click', send);
+  }
+  scope.add(() => {
+    clearPending();
+    placeholder?.remove();
+    placeholder = null;
+  });
+  if (input) fitComposer(input);
+  root.dataset.mkReady = '';
+
+  return {
+    add,
+    pending,
+    reply,
+    confirm,
+    setRecording(on: boolean) {
+      if (mic) scope.attr(mic, 'data-mk-recording', on ? '' : null);
+    },
+    scrollToLatest: () => scrollToLatest(messages),
+    adopt: (message: Element) => seen.add(message),
+    messages,
+    destroy() {
+      scope.dispose();
+      if (input) input.style.removeProperty('height');
+      delete root.dataset.mkReady;
+    },
+  };
+}

package/src/components/chat/react.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import {
+  Component,
+  createContext,
+  useContext,
+  useRef,
+  type ContextType,
+  type HTMLAttributes,
+  type MutableRefObject,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+} from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { MkIcon } from '../icon';
+import { TIMING } from '../../core/timing';
+import { PENDING_ID, capturePending, createChat, morphPendingToReply, type ChatInstance, type ChatLabels, type ChatRole } from './engine';
+
+interface ChatContextValue {
+  instance: MutableRefObject<ChatInstance | null>;
+  labels: ChatLabels;
+}
+
+const ChatContext = createContext<ChatContextValue | null>(null);
+
+export interface ChatRootProps extends HTMLAttributes<HTMLDivElement> {
+  onSend?: (text: string) => void;
+  animateExisting?: boolean;
+  labels?: ChatLabels;
+  children?: ReactNode;
+}
+
+function Root({ onSend, animateExisting, labels = {}, className, children, ...props }: ChatRootProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<ChatInstance | null>(null);
+  const send = useLatest(onSend);
+  useIsomorphicLayoutEffect(() => {
+    const created = createChat(ref.current, { animateExisting, labels, onSend: (text) => send.current?.(text) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // The engine is created once; callbacks are read through refs.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <ChatContext.Provider value={{ instance, labels }}>
+      <div ref={ref} className={['mk-chat', className].filter(Boolean).join(' ')} {...props}>
+        {children}
+      </div>
+    </ChatContext.Provider>
+  );
+}
+
+export interface ChatMessagesProps {
+  /** Waiting for an answer: "Pensando…" shows after 500 ms and morphs into the next assistant message. */
+  pending?: boolean;
+  children?: ReactNode;
+}
+
+interface MessagesState {
+  showPending: boolean;
+}
+
+type Snapshot = ReturnType<typeof capturePending>;
+
+/**
+ * The message list. A class component: only getSnapshotBeforeUpdate can measure
+ * the placeholder before React replaces it with the answer.
+ */
+class Messages extends Component<ChatMessagesProps, MessagesState> {
+  static contextType = ChatContext;
+  declare context: ContextType<typeof ChatContext>;
+  state: MessagesState = { showPending: false };
+  private list: HTMLDivElement | null = null;
+  private timer: ReturnType<typeof setTimeout> | undefined;
+
+  override componentDidMount() {
+    if (this.props.pending) this.wait();
+  }
+
+  override componentDidUpdate(previous: ChatMessagesProps, _state: MessagesState, snapshot: Snapshot) {
+    if (this.props.pending && !previous.pending) this.wait();
+    if (!this.props.pending && previous.pending) {
+      clearTimeout(this.timer);
+      if (this.state.showPending) this.setState({ showPending: false });
+    }
+    if (!snapshot || !this.list) return;
+    const answers = [...this.list.querySelectorAll<HTMLElement>('[data-mk-message][data-mk-role="assistant"]:not([data-mk-pending])')];
+    const reply = answers[answers.length - 1];
+    if (!reply) return;
+    this.context?.instance.current?.adopt(reply);
+    morphPendingToReply(snapshot, reply, this.list);
+  }
+
+  override getSnapshotBeforeUpdate(previous: ChatMessagesProps): Snapshot {
+    // The answer arrives as `pending` turns off: measure the placeholder while it is still there.
+    if (!previous.pending || this.props.pending || !this.state.showPending || !this.list) return null;
+    return capturePending(this.list.querySelector('[data-mk-pending]'));
+  }
+
+  override componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  private wait() {
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      if (this.props.pending) this.setState({ showPending: true });
+    }, TIMING.chat.pendingDelayMs);
+  }
+
+  override render() {
+    const thinking = this.context?.labels.thinking ?? 'Pensando...';
+    return (
+      <div
+        ref={(node) => {
+          this.list = node;
+        }}
+        data-mk-part="messages"
+      >
+        {this.props.children}
+        {this.props.pending && this.state.showPending ? (
+          <div data-mk-message="" data-mk-role="assistant" data-mk-pending="" data-flip-id={PENDING_ID}>
+            <span className="mk-chat__thinking">
+              <MkIcon name="sparkle" size={18} />
+              <span>{thinking}</span>
+            </span>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
+  role?: ChatRole;
+  children?: ReactNode;
+}
+
+function Message({ role = 'assistant', children, ...props }: ChatMessageProps) {
+  return (
+    <div data-mk-message="" data-mk-role={role} {...props}>
+      <div data-mk-text="">{children}</div>
+    </div>
+  );
+}
+
+export interface ChatComposerProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Extra buttons before send (a microphone…). */
+  actions?: ReactNode;
+  sendLabel?: string;
+}
+
+function Composer({ actions, sendLabel = 'Enviar', placeholder = 'Escribe un mensaje...', ...props }: ChatComposerProps) {
+  return (
+    <form data-mk-part="composer">
+      <textarea data-mk-part="input" rows={1} placeholder={placeholder} aria-label={placeholder} {...props} />
+      <div data-mk-part="buttons">
+        {actions}
+        <button type="submit" data-mk-part="send" aria-label={sendLabel}>
+          <MkIcon name="send" size={22} />
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function Confirm({ children, ...props }: HTMLAttributes<HTMLDivElement>) {
+  const ref = useRef<HTMLDivElement>(null);
+  const context = useContext(ChatContext);
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) context?.instance.current?.confirm(ref.current);
+    // Plays once, when the bar appears.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <div ref={ref} data-mk-part="confirm" {...props}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Stepbro's chat: <Chat.Root onSend><ChatBackground /><Chat.Messages pending>{messages.map(m =>
+ * <Chat.Message role>)}</Chat.Messages><Chat.Composer /></Chat.Root>.
+ */
+export const Chat = { Root, Messages, Message, Composer, Confirm };
+
+/** The chat engine of the surrounding <Chat.Root> (setRecording, scrollToLatest…). */
+export function useChat() {
+  const context = useContext(ChatContext);
+  if (!context) throw new Error('useChat() needs a <Chat.Root> above it');
+  return context.instance;
+}

package/src/components/chat-background/README.md

@@ -0,0 +1,50 @@
+# chat-background
+
+El fondo vivo del chat de Stepbro: dos manchas suaves (primary-container y tertiary-container, degradados radiales de 800 px, saturación 150 %) que orbitan detrás del chat, con grano encima. La energía (0…1, por ejemplo la del micrófono) acelera las órbitas (`10 − 3.5·e` s y `15 − 4.5·e` s), sube su opacidad (`.5 + .15·e`) y las agranda (`(1 + .1·e)·scale`).
+
+El estado "ocupado" del onboarding la lleva a energía 1.6 y escala 1.8 en 0.8 s (`power2.out`) y la devuelve en 0.6 s (`power2.inOut`).
+
+Origen: Stepbro PrettyBackground (`chat-background`, `background-audio-energy`, `onboarding-busy-background` en el kit). El grano es un SVG `feTurbulence` en lugar del PNG de Stepbro.
+
+## HTML / Astro
+
+```html
+<div class="panel" style="position: relative">
+  <mk-chat-background energy="0"></mk-chat-background>
+  …
+</div>
+```
+
+`element.setEnergy(0.4)`, `element.busy(true)`. Sin custom element: `createChatBackground(div)`.
+
+## React
+
+```tsx
+<div style={{ position: 'relative' }}>
+  <ChatBackground energy={energy} />
+</div>
+```
+
+## Micrófono
+
+```js
+import { audioEnergy, createChatBackground } from '@yewdiel21/motion-kit';
+const background = createChatBackground(el);
+const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); // tu app pide el permiso
+const meter = audioEnergy(stream, (energy) => background.setEnergy(energy));
+// al terminar: meter.stop()
+```
+
+`audioEnergy` usa FFT 256, suavizado .3, −90…−10 dB, el 40 % grave de las bandas ×3 (máx. 1), ataque .8 y caída .15. Nunca pide el micrófono por su cuenta.
+
+## API
+
+`createChatBackground(root, { energy, scale })` → `{ setEnergy, setScale, busy(on), energy, scale, destroy }`; `chatBackgroundOf(el)` devuelve la instancia que corre en un elemento.
+
+## Variables CSS
+
+`--mk-chat-blob-1`, `--mk-chat-blob-2` (colores), `--mk-chat-background-opacity`; las escribe el motor: `--mk-chat-orbit-1`, `--mk-chat-orbit-2`, `--mk-chat-blob-opacity`, `--mk-chat-scale`.
+
+## Accesibilidad
+
+Decorativo (`aria-hidden`). Con movimiento reducido las manchas no orbitan.

package/src/components/chat-background/audio.ts

@@ -0,0 +1,56 @@
+/*
+ * Microphone energy for the chat background (Stepbro's analyser): FFT 256,
+ * smoothing .3, −90…−10 dB; the lowest 40 % of the bins, ×3, clamped to 1, with
+ * attack .8 and release .15. The caller passes a MediaStream it already has
+ * permission for: this never asks for the microphone.
+ */
+
+export interface AudioEnergy {
+  stop(): void;
+}
+
+export function audioEnergy(
+  stream: MediaStream,
+  onEnergy: (energy: number) => void,
+  { fftSize = 256, smoothing = 0.3 }: { fftSize?: number; smoothing?: number } = {},
+): AudioEnergy {
+  const AudioCtor = (globalThis as { AudioContext?: typeof AudioContext }).AudioContext;
+  if (!AudioCtor) {
+    onEnergy(0);
+    return { stop() {} };
+  }
+  const context = new AudioCtor();
+  const analyser = context.createAnalyser();
+  analyser.fftSize = fftSize;
+  analyser.smoothingTimeConstant = smoothing;
+  analyser.minDecibels = -90;
+  analyser.maxDecibels = -10;
+  const input = context.createMediaStreamSource(stream);
+  input.connect(analyser);
+  const bins = new Uint8Array(analyser.frequencyBinCount);
+  let energy = 0;
+  let frame = 0;
+  let stopped = false;
+  const tick = () => {
+    if (stopped) return;
+    analyser.getByteFrequencyData(bins);
+    const count = Math.ceil(bins.length * 0.4);
+    let sum = 0;
+    for (let i = 0; i < count; i++) sum += bins[i] ?? 0;
+    const target = Math.min(((sum / (count * 255)) * 3), 1);
+    energy += (target - energy) * (target > energy ? 0.8 : 0.15);
+    onEnergy(energy);
+    frame = requestAnimationFrame(tick);
+  };
+  tick();
+  return {
+    stop() {
+      if (stopped) return;
+      stopped = true;
+      cancelAnimationFrame(frame);
+      input.disconnect();
+      void context.close();
+      onEnergy(0);
+    },
+  };
+}

package/src/components/chat-background/chat-background.css

@@ -0,0 +1,86 @@
+/* chat-background — Stepbro's PrettyBackground: two orbiting blobs and a grain, driven by energy. */
+.mk-chat-background,
+mk-chat-background {
+  --mk-chat-orbit-1: 10s;
+  --mk-chat-orbit-2: 15s;
+  --mk-chat-blob-opacity: 0.5;
+  --mk-chat-scale: 1;
+  --mk-chat-background-opacity: 1;
+  --mk-chat-blob-1: var(--md-sys-color-primary-container);
+  --mk-chat-blob-2: var(--md-sys-color-tertiary-container);
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  border-radius: inherit;
+  opacity: var(--mk-chat-background-opacity);
+  pointer-events: none;
+}
+
+.mk-chat-background::before,
+.mk-chat-background::after,
+mk-chat-background::before,
+mk-chat-background::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 800px;
+  height: 800px;
+  content: '';
+  opacity: var(--mk-chat-blob-opacity);
+  translate: -50% -50%;
+  scale: var(--mk-chat-scale);
+  filter: saturate(150%);
+  transition: opacity 1s ease;
+}
+
+.mk-chat-background::before,
+mk-chat-background::before {
+  background: radial-gradient(circle at center, var(--mk-chat-blob-1) 0%, transparent 70%);
+  animation: mk-chat-blob-1 var(--mk-chat-orbit-1) linear infinite;
+}
+
+.mk-chat-background::after,
+mk-chat-background::after {
+  background: radial-gradient(circle at center, var(--mk-chat-blob-2) 0%, transparent 70%);
+  animation: mk-chat-blob-2 var(--mk-chat-orbit-2) linear infinite;
+}
+
+/* Grain on top (Stepbro ships a PNG; this is SVG turbulence at the same 30 %). */
+.mk-chat-background__noise {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0.3;
+  mix-blend-mode: overlay;
+}
+
+@keyframes mk-chat-blob-1 {
+  from {
+    transform: rotate(0) translate(150px) rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg) translate(150px) rotate(-360deg);
+  }
+}
+
+@keyframes mk-chat-blob-2 {
+  from {
+    transform: rotate(180deg) translateY(120px) rotate(-180deg);
+  }
+
+  to {
+    transform: rotate(-180deg) translateY(120px) rotate(180deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-chat-background::before,
+  .mk-chat-background::after,
+  mk-chat-background::before,
+  mk-chat-background::after {
+    animation: none;
+  }
+}