# Web Kits

> Interface kits for the web.

Every page is also available as Markdown by adding .mdx to its URL.

- Repository: https://github.com/raphaelsalaja/web-kits

## Audio

> Sounds described as plain objects, played with one call.

- Package: @web-kits/audio (npm)
- Docs: https://web-kits.dev/audio

- [ensureReady](https://web-kits.dev/audio/api/context/ensure-ready.mdx): Resume the AudioContext after a user gesture.
- [getContext](https://web-kits.dev/audio/api/context/get-context.mdx): Access the shared AudioContext instance.
- [setListener](https://web-kits.dev/audio/api/context/set-listener.mdx): Position the 3D audio listener.
- [setMasterVolume](https://web-kits.dev/audio/api/context/set-master-volume.mdx): Set the global output volume.
- [bufferToWav](https://web-kits.dev/audio/api/output/buffer-to-wav.mdx): Convert an AudioBuffer to a WAV blob.
- [createMasterAnalyser](https://web-kits.dev/audio/api/output/create-master-analyser.mdx): Real-time FFT and waveform analysis on the master output.
- [renderToBuffer](https://web-kits.dev/audio/api/output/render-to-buffer.mdx): Render a sound offline to an AudioBuffer.
- [renderToWav](https://web-kits.dev/audio/api/output/render-to-wav.mdx): Render a sound and encode as a WAV file.
- [definePatch](https://web-kits.dev/audio/api/patches/define-patch.mdx): Create a patch instance from an inline object.
- [loadPatch](https://web-kits.dev/audio/api/patches/load-patch.mdx): Load a patch from a URL or inline object.
- [defineSequence](https://web-kits.dev/audio/api/sounds/define-sequence.mdx): Create a timed sound sequence with play/stop controls.
- [defineSound](https://web-kits.dev/audio/api/sounds/define-sound.mdx): Create a reusable play function from a sound definition.
- [Shorthands](https://web-kits.dev/audio/api/sounds/shorthands.mdx): One-liner sound constructors.
- [Command Line](https://web-kits.dev/audio/cli.mdx): Install and manage sound patches from the command line.
- [Effects](https://web-kits.dev/audio/concepts/effects.mdx): 14 built-in effects you can apply per-layer or globally.
- [Envelopes](https://web-kits.dev/audio/concepts/envelopes.mdx): Control how sounds fade in and out.
- [Filters](https://web-kits.dev/audio/concepts/filters.mdx): Shape the frequency content of any layer.
- [Layers](https://web-kits.dev/audio/concepts/layers.mdx): Stack multiple signal paths into one sound.
- [Modulation](https://web-kits.dev/audio/concepts/modulation.mdx): Animate any parameter with low-frequency oscillators.
- [Sources](https://web-kits.dev/audio/concepts/sources.mdx): The starting point of every sound.
- [Spatial Audio](https://web-kits.dev/audio/concepts/spatial.mdx): Position sounds in 3D space.
- [React](https://web-kits.dev/audio/getting-started/react.mdx): Use @web-kits/audio with React hooks.
- [TypeScript](https://web-kits.dev/audio/getting-started/typescript.mdx): Use @web-kits/audio with plain TypeScript or JavaScript.
- [Overview](https://web-kits.dev/audio.mdx): Declarative audio synthesis for the web.
- [Patches](https://web-kits.dev/audio/integrations/patches.mdx): Shareable JSON collections of sound definitions.
- [SoundProvider](https://web-kits.dev/audio/integrations/react/provider.mdx): Context provider for managing audio state in React.
- [useAnalyser](https://web-kits.dev/audio/integrations/react/use-analyser.mdx): Real-time audio analysis for visualizations.
- [useListener](https://web-kits.dev/audio/integrations/react/use-listener.mdx): Set the 3D audio listener position.
- [usePatch](https://web-kits.dev/audio/integrations/react/use-patch.mdx): Load and play sounds from a patch.
- [useSequence](https://web-kits.dev/audio/integrations/react/use-sequence.mdx): Play timed sound sequences.
- [useSound](https://web-kits.dev/audio/integrations/react/use-sound.mdx): Play a sound from a definition.
- [Changelog](https://web-kits.dev/audio/resources/changelog.mdx): What's new in @web-kits/audio.
- [llms.txt](https://web-kits.dev/audio/resources/llms.mdx): Machine-readable project summary for AI assistants and language models.
- [Skill](https://web-kits.dev/audio/resources/skill.mdx): An agent skill that generates a SoundDefinition from a prompt, an audio file, or both.

## Springboard

> Apple's springs, app launch and genie for any element.

- Package: @web-kits/springboard (npm)
- Docs: https://web-kits.dev/springboard

- [Base UI](https://web-kits.dev/springboard/base-ui.mdx): Follow a Base UI popup's own open state.
- [Changelog](https://web-kits.dev/springboard/changelog.mdx): What's new in @web-kits/springboard.
- [Introduction](https://web-kits.dev/springboard.mdx): Apple's motion for the web, from the values iOS and macOS ship.
- [Installation](https://web-kits.dev/springboard/installation.mdx): Install @web-kits/springboard and pick an entry point.
- [Instance](https://web-kits.dev/springboard/instance.mdx): The methods on what origin returns.
- [Options](https://web-kits.dev/springboard/options.mdx): The options origin takes, and the options of each effect.
- [React](https://web-kits.dev/springboard/react.mdx): Drive a popup from React state with useOrigin.
- [Springs](https://web-kits.dev/springboard/springs.mdx): SwiftUI's, UIKit's and SpringBoard's springs, for CSS and Motion.

## Blur

> The progressive blur from the iOS scroll edge.

- Package: @web-kits/blur (npm)
- Docs: https://web-kits.dev/blur

- [Introduction](https://web-kits.dev/blur.mdx): The progressive blur from the iOS 27 scroll edge, for the web.
- [Installation](https://web-kits.dev/blur/installation.mdx): Install @web-kits/blur and pick an entry point.
- [Instance](https://web-kits.dev/blur/instance.mdx): The methods on what progressiveBlur returns.
- [Layout](https://web-kits.dev/blur/layout.mdx): Where to put the host so the blur can see the content.
- [Limits](https://web-kits.dev/blur/limits.mdx): What the blur doesn't cover yet.
- [Options](https://web-kits.dev/blur/options.mdx): The options progressiveBlur and ProgressiveBlur take.
- [React](https://web-kits.dev/blur/react.mdx): Render the blur with the ProgressiveBlur component.
- [Techniques](https://web-kits.dev/blur/techniques.mdx): The three ways the web can blend the wide blur, and which browsers take each.

## Motion Blur

> Motion blur sized from speed, frame time and shutter.

- Package: @web-kits/motion-blur (npm)
- Docs: https://web-kits.dev/motion-blur

- [Changelog](https://web-kits.dev/motion-blur/changelog.mdx): What's new in @web-kits/motion-blur.
- [Introduction](https://web-kits.dev/motion-blur.mdx): Motion blur for elements that move on the web.
- [Installation](https://web-kits.dev/motion-blur/installation.mdx): Install @web-kits/motion-blur and pick an entry point.
- [Instance](https://web-kits.dev/motion-blur/instance.mdx): The methods on what motionBlur returns.
- [Options](https://web-kits.dev/motion-blur/options.mdx): The options motionBlur, useMotionBlur and MotionBlur take.
- [React](https://web-kits.dev/motion-blur/react.mdx): The hook, the component and the provider.
- [Techniques](https://web-kits.dev/motion-blur/techniques.mdx): The four ways the streak can be drawn.
- [When to Use It](https://web-kits.dev/motion-blur/when-to-use-it.mdx): What to blur, and what to leave sharp.
- [Writing a Technique](https://web-kits.dev/motion-blur/writing-a-technique.mdx): Draw the streak your own way with a painter.
- [Your Own Positions](https://web-kits.dev/motion-blur/your-own-positions.mdx): Blur motion you work out yourself, from a physics loop or a canvas.

## Calligraph

> Text that flows from one word to the next.

- Package: calligraph (npm)
- Docs: https://web-kits.dev/calligraph

- [Animations](https://web-kits.dev/calligraph/animations.mdx): The timing presets Calligraph animates with.
- [Changelog](https://web-kits.dev/calligraph/changelog.mdx): What's new in calligraph.
- [Introduction](https://web-kits.dev/calligraph.mdx): Fluid text transitions powered by Motion.
- [Installation](https://web-kits.dev/calligraph/installation.mdx): Install calligraph with your package manager of choice.
- [Props](https://web-kits.dev/calligraph/props.mdx): Every prop Calligraph takes.
- [Requirements](https://web-kits.dev/calligraph/requirements.mdx): What Calligraph needs in your project.
- [Usage](https://web-kits.dev/calligraph/usage.mdx): Render text that transitions when it changes.