— Patterns Library
68+ Patterns.
Motion, backgrounds, and engagement effects — vibe over UI. 14 web + 54 React Native — fully typed, dark-mode native, with live previews.
Gradient Background
Static gradient backgrounds in multiple presets — for hero sections and banners.
Animated Gradient
Slow-drifting animated gradient mesh for ambient hero backgrounds.
Dotted Background
Dotted-grid background pattern — subtle texture without competing for attention.
Noise Background
Subtle noise texture overlay for added depth on flat surfaces.
Hero Shader
WebGL shader hero background with motion control and reduced-motion support.
Fade In
Fade-in entrance primitive with configurable delay and duration.
Slide In
Slide-in entrance primitive from any edge — top / right / bottom / left.
Scale In
Scale-up entrance primitive for cards, badges, and modal content.
Stagger
Staggered children animation primitive for animating lists and grids.
Ripple
Material-style ripple effect on press — for buttons and tappable surfaces.
Reveal
Scroll-triggered reveal animation primitive for content-rich pages.
Transition
Smooth transition primitive for animating value changes between states.
Onboarding Checklist
Step-by-step onboarding checklist with progress tracking and completion state.
Intro Disclosure
First-time-user disclosure card with multi-step walkthrough.
Showing 14 of 14 web patterns · live preview available
Using the components?
Star the SDK.
The whole component SDK is free — the same component, web and native, from one API. A star helps other builders find it.
Star on GitHubGet the free AI configs pack
Pre-tuned CLAUDE.md, .cursorrules, and lovable.md — drop them in and your AI editor already knows your stack.
No spam. Unsubscribe any time.