Chinese-language playground of code-rendered motion effects, organised as 12 buildable routes from typography through 3D to video workflows.
motion
codemotion.cc
Visitopens in a new tab
Cuelume
cuelume.dev
Cuelume is a small JavaScript library that adds synthesized interaction sounds to buttons, inputs, selects and navigation.
What is Cuelume?
Cuelume ships fourteen interaction sounds for the web, synthesized live in the browser rather than loaded as audio files. One bind() call wires every element carrying its data attributes: taps, typing, selection, toggles, opening, closing and navigation, with each cue drawn from an envelope shown on the site.
Cues adapt to how an interaction happens — a fingertip lands softer than a mouse, a key press is shorter — and direction is reflected in pitch for earlier and later options. Emphasis is set explicitly with data-cuelume-emphasis, since it cannot be inferred. The package is ESM-only, has zero runtime dependencies, is safe to import during SSR and uses an MIT licence.
Best for
- Adding subtle audio feedback to success, error and loading states
- Micro-interaction polish in React or vanilla JavaScript apps
- Products that want UI sound without hosting audio assets
Key features
- Fourteen interaction sounds synthesized in the browser
- bind() plus data-cuelume-tap, -type, -select, -toggle and -navigate attributes
- Cues vary by input type, direction and emphasis level
- ESM-only with zero runtime dependencies and SSR-safe imports
- Nothing is stored or sent; MIT licensed
Related resources
MIT-licensed React package of 29 named loading indicators, each accepting size, colour and duration props and respecting reduced-motion preferences by default.
motion
loading.dev
The animation library formerly known as Framer Motion, handling layout, scroll, gesture, spring and 3D animation in React, Vue and plain JavaScript from a small API surface.
motion
motion.dev
Visitopens in a new tab