Animation Primitive Components

Dev Design Library indexes 26 animation primitive components from 7 open-source UI libraries, with the most coming from Kinetics, Amicro Micro Transitions, OpenSourceUI, Lobe UI and SpaceUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Animation primitive components belong to the Utilities group.

• Fade DownAmicro Micro Transitions · ReactFade with downward translation.
• Motion ProviderLobe UI · ReactMotionProvider lets you choose which motion component (motion or m) Lobe UI uses.
• Focus Breath WidgetOpenSourceUI · React
• Circuit BreakerKinetics · HTML/CSSA physical arm throws closed, open, then half-open to probe
• Spring PlaygroundUI Lab · ReactTune a spring and watch its overshoot and settle, plotted live.
• PresenceCojeev UI · ReactMotionPresence keeps keyed children mounted for their exits. MotionSurface adds coordinated lifecycle states to an…
• Motion EffectSpaceUI · React
• Fade InAmicro Micro Transitions · ReactBasic fade entrance animation.
• Confidence SettleKinetics · HTML/CSSA score overshoots, then settles on the true value
• Fade UpAmicro Micro Transitions · ReactFade with upward translation.
• Float BobKinetics · HTML/CSSA card hovers and bobs with a shadow that breathes beneath — pure CSS
• Scale InAmicro Micro Transitions · ReactScale transition from small to actual size.
• Focus RelayKinetics · HTML/CSSA shared focus ring leaps between fields with a spring morph
• Scroll RevealAmicro Micro Transitions · ReactReveal content block as it scrolls into viewport.
• Gesture ChordKinetics · HTML/CSSTap the keys in sequence to arm a shortcut
• Slide LeftAmicro Micro Transitions · ReactSlide in from right to left.
• Hover Intent GateKinetics · HTML/CSSA deliberate hover quietly unlocks the action
• Slide RightAmicro Micro Transitions · ReactSlide in from left to right.
• Hover LiftKinetics · HTML/CSSSurface rises with a soft cast shadow
• Sticky RevealAmicro Micro Transitions · ReactApple-style scroll-linked side sticky content reveal.
• Optimistic RollbackKinetics · HTML/CSSAn instant local update gracefully retracts after rejection
• Zoom InAmicro Micro Transitions · ReactScale transition combined with deep blur/depth effect.
• Phase LockKinetics · HTML/CSSThree independent signals resolve into sync
• Rate Limit CooldownKinetics · HTML/CSSA token bucket empties fast, then refills on a slow drip
• Reconciliation MergeKinetics · HTML/CSSCompeting values converge into one authoritative state
• Stale While RevalidateKinetics · HTML/CSSThe old value ghosts as the fresh one springs into place

Libraries with animation primitive components

• Kinetics
• Amicro Micro Transitions
• OpenSourceUI
• Lobe UI
• SpaceUI

Related categories

• React Animation Primitive Components
• Tailwind CSS Animation Primitive Components
• Animated Animation Primitive Components
• Utility Components
• Provider Components
• Color Palette Components
• Focus Trap Components
• Portal Components