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
Loading.dev
loading.dev
MIT-licensed React package of 29 named loading indicators, each accepting size, colour and duration props and respecting reduced-motion preferences by default.
What is Loading.dev?
loading-dev is a small React library distributed on npm as loading-dev. Every indicator is imported by name, for example Arc, Orbit or Wave, and accepts size, color and duration, with a few exposing extras such as easing or cap; the package also exports playState for pausing, and any indicator can be restyled. It requires React 19 or later and honours reduced motion without extra work.
The documentation site gives each of the 29 spinners its own page with a live preview and a markdown version, which makes it easy to compare shapes, from single rotating strokes (Arc, Ring, Comet) to multi-dot sequences (BouncingDots, Leap, Eclipse) and grid-based marks (Blocks, Swirl, Gather). The source lives at jakubkrehel/loading under the MIT licence.
Best for
- Replacing hand-rolled CSS spinners in a React 19 app
- Choosing a loading state that fits a minimal design system
- Shipping motion that already honours reduced-motion settings
Key features
- 29 indicators importable by name, from Arc and Classic to Trace and Wave
- size, color and duration props on every indicator, plus easing and cap on some
- Exported playState for pausing animations
- Respects reduced motion out of the box; requires React 19+
- Installable with npm install loading-dev; MIT licensed
Related resources
Cuelume is a small JavaScript library that adds synthesized interaction sounds to buttons, inputs, selects and navigation.
motion
cuelume.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