$ show raphaelsalaja/cambio
Cambio is a React component library that simplifies shared-element animations for dialogs/popups. It provides a compound component API (`Cambio.Root`, `Trigger`, `Portal`, `Backdrop`, `Popup`, `Title`, `Description`, `Close`) built on top of Base UI's accessible Dialog primitives and Motion's animation engine. The library offers four built-in motion presets (snappy, smooth, bouncy, reduced) configurable globally, per-component via variants, or overridden individually. It supports dismissible popups driven by drag gestures with configurable threshold and velocity, automatic respect for `prefers-reduced-motion`, and explicit reduce-motion overrides. The architecture uses React Context for state propagation and Motion's `motion.create` to wrap Base UI components. The code is well-typed in TypeScript, organized into clear modules, and demonstrates craftsmanship in its motion configuration resolution chain and drag physics handling. The repository also includes a documentation website built with Next.js and Fumadocs.
The LLM identified 4 files worth highlighting for reuse:
Implements the Popup component with interactive drag-to-dismiss functionality. Uses Motion's `useMotionValue`, `useSpring`, and `useTransform` to create a resistance-based drag with scaling and opacity feedback. Non-obvious skill: logarithmic resistance scaling for natural feel, configurable dismissal threshold/velocity, and dynamic cursor/touch-action states. This component encapsulates a reusable drag-to-dismiss pattern that could be extracted for any overlay or modal requiring gesture-based closure.
Defines motion presets (snappy, smooth, bouncy, reduced) as `MotionConfig` objects with transition and drag spring parameters. Provides functions for resolving motion presets considering user overrides, reduced motion preference, component-level variants, and global defaults. Includes a robust `getComponentMotionPreset` function with priority chain (component > variants > global > default). Also implements `resolveDismissableConfig` for merging defaults. This module is a clean, parameterized configuration utility that could be reused for any animation system needing layered preset resolution.
Creates motion-enhanced versions of Base UI's Dialog primitives using `motion.create(Dialog.*)`. This adapter pattern allows seamless integration of Motion's animation capabilities with Base UI's accessible dialog components, providing a foundation for animated overlays without duplicating accessibility logic. The pattern is reusable for any library that needs to add motion to third-party components.
Root component that initializes and exposes CambioContext. Handles open state (controlled/uncontrolled), generates unique layout IDs, resolves reduced motion preference using `getReducedMotionState`, parses motion config into preset and variants, and resolves the final motion preset via `resolveMotionPreset`. It passes resolved context to children via `CambioContext.Provider`. Demonstrates a clean separation of configuration parsing and context provisioning.