@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/motion/sheet.ts

@@ -0,0 +1,65 @@
+import { gsap, EASE, registerMotion } from '../core/gsap';
+import { motionSpring } from '../core/physics-spring';
+import { reduced } from '../core/reduced';
+import { clearStyles } from '../core/styles';
+import { TIMING } from '../core/timing';
+import { backdropVeil, ghostOf } from './surface';
+
+/*
+ * Dousan's project sheet: the surface rises from below the screen (0.72 s,
+ * cubic(.16,1,.3,1)) while the page behind ([data-mk-underlay]) sinks to
+ * scale .98 / opacity .4 on a 300/30 spring. It closes through an inert copy
+ * that drops away, so focus returns at once.
+ */
+
+const UNDERLAY_STYLES = ['transform', 'translate', 'rotate', 'scale', 'transform-origin', 'opacity'];
+
+export function sheetOpen(surface: HTMLElement) {
+  if (reduced()) return null;
+  registerMotion();
+  return gsap.fromTo(surface, { yPercent: 100 }, { yPercent: 0, duration: TIMING.sheet.open, ease: EASE.sheet, clearProps: 'transform' });
+}
+
+/** Drop a copy of the (still open) sheet off the bottom of the screen. */
+export function sheetClose(surface: HTMLElement, { inPlace = false }: { inPlace?: boolean } = {}) {
+  registerMotion();
+  const dragged = inPlace ? Number(gsap.getProperty(surface, 'y')) || 0 : 0;
+  gsap.killTweensOf(surface);
+  clearStyles([surface], ['transform', 'translate', 'rotate', 'scale']);
+  const ghost = reduced() ? null : ghostOf(surface);
+  if (!ghost) return null;
+  const veil = backdropVeil(surface);
+  document.body.append(veil, ghost);
+  gsap.to(veil, { opacity: 0, duration: TIMING.sheet.close, ease: 'power3.in', onComplete: () => veil.remove() });
+  return gsap.fromTo(
+    ghost,
+    { y: dragged, yPercent: 0 },
+    { yPercent: 100, duration: TIMING.sheet.close, ease: EASE.sheet, onComplete: () => ghost.remove() },
+  );
+}
+
+export function pushUnderlay(elements: HTMLElement[]) {
+  if (!elements.length || reduced()) return;
+  registerMotion();
+  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
+  gsap.to(elements, {
+    scale: TIMING.sheet.underlayScale,
+    opacity: TIMING.sheet.underlayOpacity,
+    transformOrigin: '50% 0',
+    duration,
+    ease,
+    overwrite: 'auto',
+  });
+}
+
+export function releaseUnderlay(elements: HTMLElement[], animated = true) {
+  if (!elements.length) return;
+  const restore = () => clearStyles(elements, UNDERLAY_STYLES);
+  if (!animated || reduced()) {
+    gsap.killTweensOf(elements);
+    restore();
+    return;
+  }
+  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
+  gsap.to(elements, { scale: 1, opacity: 1, duration, ease, overwrite: 'auto', onComplete: restore });
+}

package/src/motion/surface.ts

@@ -0,0 +1,108 @@
+import { SIGNATURE_LINEAR } from '../core/curves';
+import { reduced } from '../core/reduced';
+import { TIMING } from '../core/timing';
+
+/*
+ * Helpers shared by surfaces (dialogs, menus): opening a <dialog> with a
+ * fallback where showModal is missing, the backdrop tint, and an inert visual
+ * copy (ghost) that plays a close while the real element is already gone.
+ */
+
+/** A computed colour with no alpha: `transparent`, `rgba(…, 0)` or `color(… / 0)`. */
+export const transparentColor = (color: string) =>
+  !color || color === 'transparent' || /,\s*0\)$/.test(color) || /\/\s*0\)$/.test(color);
+
+type DialogLike = HTMLElement & Partial<Pick<HTMLDialogElement, 'showModal' | 'show' | 'close'>>;
+
+/** Open a <dialog> modally (or not). Falls back to the `open` attribute. */
+export function openModal(dialog: DialogLike, modal = true) {
+  if (dialog.hasAttribute('open')) return;
+  if (modal && typeof dialog.showModal === 'function') dialog.showModal();
+  else if (typeof dialog.show === 'function') dialog.show();
+  else dialog.setAttribute('open', '');
+}
+
+export function closeModal(dialog: DialogLike) {
+  if (typeof dialog.close === 'function') dialog.close();
+  else dialog.removeAttribute('open');
+}
+
+/**
+ * Fade a modal <dialog>'s ::backdrop in (Stepbro's tint: 0.5 s on the signature
+ * curve) or out (linear). Resolves at once without the Web Animations API.
+ */
+export function fadeBackdrop(dialog: HTMLElement, direction: 'in' | 'out'): Promise<void> {
+  if (typeof dialog.animate !== 'function' || reduced()) return Promise.resolve();
+  try {
+    const animation = dialog.animate(direction === 'in' ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }], {
+      duration: (direction === 'in' ? TIMING.dialog.backdrop : TIMING.dialog.close) * 1000,
+      easing: direction === 'in' ? SIGNATURE_LINEAR : 'linear',
+      fill: direction === 'out' ? 'forwards' : 'none',
+      pseudoElement: '::backdrop',
+    });
+    return animation.finished.then(
+      () => undefined,
+      () => undefined,
+    );
+  } catch {
+    return Promise.resolve();
+  }
+}
+
+/**
+ * An inert visual copy of `surface`, fixed over the place it occupies now and not
+ * yet in the document (null when it has no size). A picture, not a second form:
+ * no ids, labels, names or roles to collide with the page.
+ */
+/** A fixed copy of a modal's backdrop (tint and blur), for a closing ghost to fade with. Not appended. */
+export function backdropVeil(surface: HTMLElement): HTMLElement {
+  const backdrop = getComputedStyle(surface, '::backdrop');
+  const veil = document.createElement('div');
+  veil.setAttribute('aria-hidden', 'true');
+  veil.dataset.mkVeil = '';
+  Object.assign(veil.style, {
+    position: 'fixed',
+    inset: '0',
+    zIndex: '2147483645',
+    background: backdrop.background || backdrop.backgroundColor,
+    backdropFilter: backdrop.backdropFilter,
+    pointerEvents: 'none',
+  });
+  return veil;
+}
+
+export function ghostOf(surface: HTMLElement): HTMLElement | null {
+  const rect = surface.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return null;
+  const style = getComputedStyle(surface);
+  const ghost = document.createElement('div');
+  ghost.className = surface.className;
+  ghost.innerHTML = surface.innerHTML;
+  ghost.setAttribute('aria-hidden', 'true');
+  ghost.inert = true;
+  ghost.dataset.mkGhost = '';
+  const strip = ['id', 'for', 'name', 'aria-labelledby', 'aria-describedby', 'aria-label', 'role'];
+  for (const element of ghost.querySelectorAll(strip.map((name) => `[${name}]`).join(','))) {
+    for (const name of strip) element.removeAttribute(name);
+  }
+  for (const label of ghost.querySelectorAll('label')) {
+    const span = document.createElement('span');
+    span.className = label.className;
+    span.append(...label.childNodes);
+    label.replaceWith(span);
+  }
+  Object.assign(ghost.style, {
+    position: 'fixed',
+    inset: 'auto',
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    margin: '0',
+    display: style.display === 'none' ? 'flex' : style.display,
+    flexDirection: style.flexDirection,
+    zIndex: '2147483646',
+    pointerEvents: 'none',
+  });
+  return ghost;
+}

package/src/react/animated-number.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { tweenNumber } from '../motion/count';
+
+export interface AnimatedNumberProps {
+  value: number;
+  /** How the shown value is written. Default: whole numbers. */
+  format?: (shown: number) => string;
+  /** Seconds. Default 0.6 (Stepbro's numberSoft); prices use 0.7. */
+  duration?: number;
+}
+
+const whole = (shown: number) => String(Math.round(shown));
+
+/** A number that counts to each new value from the one shown (Stepbro's AnimatedNumber). */
+export function AnimatedNumber({ value, format = whole, duration }: AnimatedNumberProps) {
+  const [shown, setShown] = useState(value);
+  const current = useRef(value);
+  useEffect(() => {
+    const tween = tweenNumber(current.current, value, (next) => {
+      current.current = next;
+      setShown(next);
+    }, { duration });
+    return () => {
+      tween?.kill();
+    };
+  }, [value, duration]);
+  return <>{format(shown)}</>;
+}

package/src/react/flip-group.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Component, type ReactNode, type RefObject } from 'react';
+import { captureLayout, reflowLayout, type CapturedLayout } from '../motion/layout';
+
+export interface FlipGroupProps {
+  /** The list element. */
+  root: RefObject<HTMLElement | null>;
+  /** Items inside it; they need a stable `data-flip-id`. */
+  selector?: string;
+  /** Changes whenever the layout should animate (order, filter, grouping): e.g. the ids joined. */
+  signature: string;
+  children?: ReactNode;
+}
+
+/**
+ * Plays Stepbro's layout reflow when `signature` changes: the layout is
+ * measured just before React commits and the items travel from there. A class
+ * component, because only `getSnapshotBeforeUpdate` reads the DOM before the commit.
+ */
+export class FlipGroup extends Component<FlipGroupProps> {
+  private flip: ReturnType<typeof reflowLayout> = null;
+
+  override getSnapshotBeforeUpdate(previous: Readonly<FlipGroupProps>): CapturedLayout | null {
+    const node = this.props.root.current;
+    if (previous.signature === this.props.signature || !node) return null;
+    return captureLayout(node, this.props.selector ?? '[data-flip-id]');
+  }
+
+  override componentDidUpdate(_previous: unknown, _state: unknown, before: CapturedLayout | null) {
+    const node = this.props.root.current;
+    if (!before || !node) return;
+    this.flip?.kill();
+    this.flip = reflowLayout(node, this.props.selector ?? '[data-flip-id]', before);
+  }
+
+  override componentWillUnmount() {
+    this.flip?.kill();
+  }
+
+  override render() {
+    return this.props.children;
+  }
+}

package/src/react/frost.tsx

@@ -0,0 +1,33 @@
+import type { CSSProperties } from 'react';
+
+export interface FrostProps {
+  /** Which edge the blur grows toward (default bottom). */
+  position?: 'bottom' | 'top';
+  /** Pin it to the window instead of the positioned parent. */
+  fixed?: boolean;
+  height?: number | string;
+  /** Multiplies the five blurs (default 1). */
+  strength?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** Dousan's progressive frost: five blur layers. Put it inside a positioned container (or use `fixed`). */
+export function Frost({ position = 'bottom', fixed = false, height, strength, className, style }: FrostProps) {
+  const vars: Record<string, string> = {};
+  if (height !== undefined) vars['--mk-frost-height'] = typeof height === 'number' ? `${height}px` : height;
+  if (strength !== undefined) vars['--mk-frost-strength'] = String(strength);
+  return (
+    <div
+      aria-hidden="true"
+      className={['mk-frost', position === 'top' && 'mk-frost--top', fixed && 'mk-frost--fixed', className].filter(Boolean).join(' ')}
+      style={{ ...style, ...vars } as CSSProperties}
+    >
+      <i />
+      <i />
+      <i />
+      <i />
+      <i />
+    </div>
+  );
+}

package/src/react/index.ts

@@ -0,0 +1,80 @@
+'use client';
+
+export { useRecipe, useLatest, useIsomorphicLayoutEffect } from './use-recipe';
+export * from './use-spring-cards';
+export * from './use-curved-carousel';
+export * from './use-pile';
+export * from './use-words';
+export * from './use-flow';
+export * from './use-pop';
+export * from './use-fit-text';
+export * from './use-stretch-footer';
+export * from './use-radial-menu';
+export * from './use-tabs';
+export * from './use-counter';
+export * from './use-details';
+export * from './use-reveal';
+export * from './use-reflow';
+export * from './use-slot-text';
+export * from './use-sortable';
+export * from './use-mask-text';
+export * from './use-cascade';
+export * from './use-text-roll';
+export * from './use-letters';
+export * from './use-parallax';
+export * from './use-depth-grid';
+export * from './use-frame-zoom';
+export * from './use-contrast';
+export * from './use-marquee';
+export * from './use-card-dock';
+export * from './use-snap-strip';
+export * from './use-fill-text';
+export * from './use-ticket-menu';
+export * from './use-infinite-reel';
+export * from './use-repel-bento';
+export * from './use-rotator';
+export * from './use-drag-ruler';
+export * from './use-dock-pill';
+export * from './use-liquid-blend';
+export * from './use-matcap';
+export * from './use-shader-grain';
+export * from './use-shader-blur';
+export * from './use-particle-hero';
+export { moveItem, type ReorderDetail } from '../recipes/sortable/create-sortable';
+export { pileLayers, pileStyle, type PileLayer } from '../recipes/pile/create-pile';
+export { ThemeProvider, useTheme, type ThemeProviderProps, type ThemeContextValue } from './theme-provider';
+export { ThemePicker, type ThemePickerProps } from '../components/theme-picker/react';
+export { SlotText, type SlotTextProps } from './slot-text';
+export { AnimatedNumber, type AnimatedNumberProps } from './animated-number';
+export { FlipGroup, type FlipGroupProps } from './flip-group';
+export { Dialog, useDialog, MkIcon, type DialogContentProps, type SurfaceRootProps } from '../components/dialog/react';
+export { Menu, type MenuRootProps } from '../components/menu/react';
+export {
+  Toaster,
+  toast,
+  dismissToast,
+  clearToasts,
+  type ToasterProps,
+  type ToastOptions,
+  type ToastTone,
+  type ToastAction,
+} from '../components/toast/react';
+export { ChatBackground, type ChatBackgroundProps } from '../components/chat-background/react';
+export {
+  Chat,
+  useChat,
+  type ChatRootProps,
+  type ChatMessagesProps,
+  type ChatMessageProps,
+  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 { Steps, type StepsProps } from '../components/steps/react';
+export { Cursor, type CursorProps } from '../components/cursor/react';
+export { Frost, type FrostProps } from './frost';
+export { animate, leave, ANIMATIONS, type AnimationName } from '../motion/effects';
+export { confetti, type ConfettiOptions } from '../motion/confetti';
+export { MK_HEAD_SCRIPT } from '../core/reduced';
+export { MK_THEME_HEAD_SCRIPT, themeHeadScript } from '../theme/theme';
+export { Island, IslandDots, type IslandProps, type IslandPanel } from '../components/island/react';

package/src/react/slot-text.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { useIsomorphicLayoutEffect } from './use-recipe';
+import { createSlotText, type SlotTextInstance, type SlotTextOptions } from '../recipes/slot-text/create-slot-text';
+
+export interface SlotTextProps extends Omit<SlotTextOptions, 'text' | 'accessibleCopy'> {
+  text: string;
+  className?: string;
+}
+
+const escapeHtml = (text: string) => text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+
+/**
+ * Text whose letters roll when it changes (Stepbro's SlotText). The server
+ * renders the text itself; React never reconciles the letters (they belong to
+ * the recipe), and screen readers read the plain copy.
+ */
+export function SlotText({ text, className, direction, duration, stagger, exitOffset, colorFade, maxTilt }: SlotTextProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const instance = useRef<SlotTextInstance | null>(null);
+  const [initial] = useState(text);
+  // A stable object: React 19 re-applies innerHTML when this prop changes identity.
+  const [html] = useState(() => ({ __html: escapeHtml(text) }));
+  useIsomorphicLayoutEffect(() => {
+    const created = createSlotText(ref.current, { direction, duration, stagger, exitOffset, colorFade, maxTilt, text: initial, accessibleCopy: false });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // The recipe is created once; the text is pushed below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.set(text);
+  }, [text]);
+  return (
+    <span className={className}>
+      <span className="mk-sr-only">{text}</span>
+      <span ref={ref} aria-hidden="true" dangerouslySetInnerHTML={html} />
+    </span>
+  );
+}

package/src/react/theme-provider.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';
+import { useIsomorphicLayoutEffect } from './use-recipe';
+import { DEFAULT_THEME } from '../theme/presets';
+import { THEME_EVENT, initTheme, setMode, setTheme, type InitThemeOptions, type ThemeMode, type ThemeState } from '../theme/theme';
+
+export interface ThemeContextValue extends ThemeState {
+  setTheme: typeof setTheme;
+  setMode: typeof setMode;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export interface ThemeProviderProps {
+  children?: ReactNode;
+  defaultTheme?: InitThemeOptions['default'];
+  mode?: ThemeMode;
+  storageKey?: string;
+}
+
+/**
+ * Applies the stored (or default) theme on mount and shares it. Add
+ * MK_THEME_HEAD_SCRIPT to <head> as well, so the first paint already has it.
+ */
+export function ThemeProvider({ children, defaultTheme, mode, storageKey }: ThemeProviderProps) {
+  const [state, setState] = useState<ThemeState>(() => ({ id: defaultTheme ?? DEFAULT_THEME, mode: mode ?? 'system', resolved: 'light' }));
+  useIsomorphicLayoutEffect(() => {
+    const onChange = (event: Event) => setState((event as CustomEvent<ThemeState>).detail);
+    document.addEventListener(THEME_EVENT, onChange);
+    setState(initTheme({ default: defaultTheme, mode, storageKey }));
+    return () => document.removeEventListener(THEME_EVENT, onChange);
+  }, [defaultTheme, mode, storageKey]);
+  const value = useMemo(() => ({ ...state, setTheme, setMode }), [state]);
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const value = useContext(ThemeContext);
+  if (!value) throw new Error('useTheme() needs a <ThemeProvider> above it');
+  return value;
+}

package/src/react/use-card-dock.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createCardDock, type CardDockOptions } from '../recipes/card-dock/create-card-dock';
+
+/** iyo.ai's product dock (stacked glass cards that spread on hover). */
+export const useCardDock = (ref: RefObject<HTMLElement | null>, options?: CardDockOptions, deps?: DependencyList) =>
+  useRecipe(ref, createCardDock, options, deps);

package/src/react/use-cascade.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createCascade, type CascadeOptions } from '../recipes/cascade/create-cascade';
+
+/** Siena's reveal group: rules, fades and rises one after another. */
+export const useCascade = (ref: RefObject<HTMLElement | null>, options?: CascadeOptions, deps?: DependencyList) =>
+  useRecipe(ref, createCascade, options, deps);

package/src/react/use-contrast.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createContrast, type ContrastOptions } from '../recipes/contrast/create-contrast';
+
+/** Siena's header contrast from the section under it. */
+export const useContrast = (ref: RefObject<HTMLElement | null>, options?: ContrastOptions, deps?: DependencyList) =>
+  useRecipe(ref, createContrast, options, deps);

package/src/react/use-counter.ts

@@ -0,0 +1,8 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createCounter, type CounterOptions } from '../recipes/counter/create-counter';
+
+export const useCounter = (ref: RefObject<HTMLElement | null>, options?: CounterOptions, deps?: DependencyList) =>
+  useRecipe(ref, createCounter, options, deps);

package/src/react/use-curved-carousel.ts

@@ -0,0 +1,10 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useLatest, useRecipe } from './use-recipe';
+import { createCurvedCarousel, type CurvedCarouselOptions } from '../recipes/curved-carousel/create-curved-carousel';
+
+export function useCurvedCarousel(ref: RefObject<HTMLElement | null>, options: CurvedCarouselOptions = {}, deps?: DependencyList) {
+  const onSelect = useLatest(options.onSelect);
+  return useRecipe(ref, createCurvedCarousel, { ...options, onSelect: (index, slide) => onSelect.current?.(index, slide) }, deps);
+}

package/src/react/use-depth-grid.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createDepthGrid, type DepthGridOptions } from '../recipes/depth-grid/create-depth-grid';
+
+/** Siena's grid gathering from depth as it scrolls. */
+export const useDepthGrid = (ref: RefObject<HTMLElement | null>, options?: DepthGridOptions, deps?: DependencyList) =>
+  useRecipe(ref, createDepthGrid, options, deps);

package/src/react/use-details.ts

@@ -0,0 +1,7 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createDetails } from '../recipes/details/create-details';
+
+export const useDetails = (ref: RefObject<HTMLElement | null>, deps?: DependencyList) => useRecipe(ref, createDetails, undefined, deps);

package/src/react/use-dock-pill.ts

@@ -0,0 +1,10 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useLatest, useRecipe } from './use-recipe';
+import { createDockPill, type DockPillOptions } from '../recipes/dock-pill/create-dock-pill';
+
+export function useDockPill(ref: RefObject<HTMLElement | null>, options: DockPillOptions = {}, deps?: DependencyList) {
+  const callback = useLatest(options.onSelect);
+  return useRecipe(ref, createDockPill, { ...options, onSelect: (index, item) => callback.current?.(index, item) }, deps);
+}

package/src/react/use-drag-ruler.ts

@@ -0,0 +1,10 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useLatest, useRecipe } from './use-recipe';
+import { createDragRuler, type DragRulerOptions } from '../recipes/drag-ruler/create-drag-ruler';
+
+export function useDragRuler(ref: RefObject<HTMLElement | null>, options: DragRulerOptions = {}, deps?: DependencyList) {
+  const callback = useLatest(options.onChange);
+  return useRecipe(ref, createDragRuler, { ...options, onChange: (value) => callback.current?.(value) }, deps);
+}

package/src/react/use-fill-text.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createFillText, type FillTextOptions } from '../recipes/fill-text/create-fill-text';
+
+/** iyo.ai's fill-text: letters fill in as the text scrolls up. */
+export const useFillText = (ref: RefObject<HTMLElement | null>, options?: FillTextOptions, deps?: DependencyList) =>
+  useRecipe(ref, createFillText, options, deps);

package/src/react/use-fit-text.ts

@@ -0,0 +1,8 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createFitText, type FitTextOptions } from '../recipes/fit-text/create-fit-text';
+
+export const useFitText = (ref: RefObject<HTMLElement | null>, options?: FitTextOptions, deps?: DependencyList) =>
+  useRecipe(ref, createFitText, options, deps);

package/src/react/use-flow.ts

@@ -0,0 +1,8 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createFlow, type FlowOptions } from '../recipes/flow/create-flow';
+
+export const useFlow = (ref: RefObject<HTMLElement | null>, options?: FlowOptions, deps?: DependencyList) =>
+  useRecipe(ref, createFlow, options, deps);

package/src/react/use-frame-zoom.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createFrameZoom, type FrameZoomOptions } from '../recipes/frame-zoom/create-frame-zoom';
+
+/** Siena's video mask: frame and picture scale in opposite directions. */
+export const useFrameZoom = (ref: RefObject<HTMLElement | null>, options?: FrameZoomOptions, deps?: DependencyList) =>
+  useRecipe(ref, createFrameZoom, options, deps);

package/src/react/use-infinite-reel.ts

@@ -0,0 +1,8 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createInfiniteReel, type InfiniteReelOptions } from '../recipes/infinite-reel/create-infinite-reel';
+
+export const useInfiniteReel = (ref: RefObject<HTMLElement | null>, options?: InfiniteReelOptions, deps?: DependencyList) =>
+  useRecipe(ref, createInfiniteReel, options, deps);

package/src/react/use-letters.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createLetters, type LettersOptions } from '../recipes/letters/create-letters';
+
+/** Dousan's hero letters (scale on hover or pastel blink). */
+export const useLetters = (ref: RefObject<HTMLElement | null>, options?: LettersOptions, deps?: DependencyList) =>
+  useRecipe(ref, createLetters, options, deps);

package/src/react/use-liquid-blend.ts

@@ -0,0 +1,8 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createLiquidBlend, type LiquidBlendOptions } from '../gl/liquid-blend/create-liquid-blend';
+
+export const useLiquidBlend = (ref: RefObject<HTMLElement | null>, options?: LiquidBlendOptions, deps?: DependencyList) =>
+  useRecipe(ref, createLiquidBlend, options, deps);

package/src/react/use-marquee.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createMarquee, type MarqueeOptions } from '../recipes/marquee/create-marquee';
+
+/** Siena's seamless marquee. */
+export const useMarquee = (ref: RefObject<HTMLElement | null>, options?: MarqueeOptions, deps?: DependencyList) =>
+  useRecipe(ref, createMarquee, options, deps);

package/src/react/use-mask-text.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createMaskText, type MaskTextOptions } from '../recipes/mask-text/create-mask-text';
+
+/** Masked lines / words / letters rising into view (OFFFICE). */
+export const useMaskText = (ref: RefObject<HTMLElement | null>, options?: MaskTextOptions, deps?: DependencyList) =>
+  useRecipe(ref, createMaskText, options, deps);

package/src/react/use-matcap.ts

@@ -0,0 +1,8 @@
+'use client';
+
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createMatcap, type MatcapOptions } from '../gl/matcap/create-matcap';
+
+export const useMatcap = (ref: RefObject<HTMLElement | null>, options?: MatcapOptions, deps?: DependencyList) =>
+  useRecipe(ref, createMatcap, options, deps);