Open-source state and motion tools for React and React Native. Three focused packages that work from the first import and grow only as far as you need.
Components read the same value without a Provider, actions, or reducers. They re-render only when their selection changes, and saving or restoring happens exactly when you say so.
Use the timing, spring, and interpolate you know from React Native Animated on React DOM. One value drives the style of many elements, with no React render per frame.
The slider changes a single Value. The position, turn, size, and corners of all twelve shapes are derived from it. Press the spring, then grab the slider mid-flight.
Rolling numbers, a highlight that travels, lists that move only what changed, sheets and swipe actions. Pass your data — no provider or setup call — on React and React Native.
Pick a period: MotionHighlight travels to it, MotionNumber rolls, ProgressRing fills, and MotionList moves only the rows that changed.
TodayThis weekThis month
Visits
1,284
Home
Pricing
Docs
Blog
Sample data
02 · Ensemble
One strike.Everything moves.
This stage is built with Animated. A single Value holding your scroll progress conducts the position, turn, scale, and opacity of 48 shapes at once.
01
Ring
Scattered points gather into the rings of a gong.
02
Split
The ring divides three ways and takes on each tool's color.
03
Shape
They become state's links, motion's trajectory, and the chorus's pillars.
04
Beat
Everything lines up and lands on the same beat.
progress
03 · Principles
Small,all the way through.
Start with one import
No wrapping provider or global setup up front. Add capabilities only when your app asks for them.
Only what needs it
Only the components whose selection changed, the elements that use a value, and the rows that moved are updated.
Responsible to the end
Interrupted motion continues from what is on screen, and subscriptions and animations are released when their owner goes away.
Typed and documented
Every package ships TypeScript declarations, and the documentation reads in 39 languages.
04 · The name
Kkwaenggwari,the gong that starts the band.
Say it kweng-gwah-ree. In Korean pungmul, the lead kkwaenggwari (꽹과리) player sets the beat for the whole ensemble. Our tools aim for the same: small but clear, keeping your whole app on one beat.
kkwaenggwariKkwaenggwari takes its name from the kkwaenggwari (꽹과리), a small Korean gong played with a mallet. Its bright, clear ring inspired the name for these small open-source tools.
