Design Library

Interface libraries, motion experiments, graphics tools, and other design resources I’ve collected along the way.

• Arc UIAnimated React components and blocks.
• AnimataAnimated React components, including text effects and typography.
• ComponentryInteractive effects for React interfaces.
• OriginkitAnimated components for websites.
• Aceternity UIReact components with expressive motion.
• BeUIAnimated React components.
• coss uiAccessible components built on Base UI.
• MantineReact components and useful hooks.
• UiverseOpen-source UI elements.
• PanelUIReact Native UI for AI interactions.
• AstryxReact and StyleX components, themes, and tools for coding agents.
• Beautiful UIInterface patterns for AI agents.
• Extend UIReact components for document apps.
• ToolcraftBuilding blocks for design applications.
• GSAPJavaScript animation tools.
• Anime.jsTimelines, scrolling, and SVG animation.
• Liquid GooeyLiquid effects and bouncy transitions.
• fireworks-jsCustomizable fireworks effects.
• Micro-interactionsSmall animations for everyday UI.
• Dot MatrixDot-matrix loaders for React.
• Thinking OrbsAnimated orbs for AI activity states.
• Scroll MaskAnimated fades for scroll containers.
• Libraries.devVisual effects packaged for coding agents.
• LottieFiles Motion SystemTools for consistent product motion.
• Paper ShadersShader effects and animated backgrounds.
• shadcn.io ShadersWebGL shader components for React.
• Shaders.comShader presets for visual effects.
• MetalForgeShaders for SwiftUI and React Native.
• vgpuWebGPU tools for shader rendering.
• PixiJSFast, interactive 2D graphics.
• Flutter SceneReal-time 3D rendering for Flutter.
• Three.js TSLA guide to Three.js Shader Language.
• Building GlassHow to build liquid-glass effects.
• Trophy UIStreaks, achievements, and leaderboards.
• mapcnReact maps with shadcn styling.
• TiptapCustom editors with collaboration and AI.
• Driver.jsProduct tours and contextual guidance.
• Tabler IconsOpen-source SVG icons.
• HugeiconsIcons for interface design.
• Icon CreatorCreate animated and 3D icons.
• Design Engineer ToolsTools for design, motion, and the web.
• Codrops Creative HubCode and design experiments from the creative web.
• Oil MotionAn AI skill for interactive animations.
• WayframeAn AI studio for animated stories.
• SwishyAI-assisted motion design.
• OpenUIAn open standard for generative UI.
• In The Pocket GuidelinesGuidelines for UX, accessibility, and product design.
• MotionsitesAI prompts for animated hero sections.
• Design & Animation Engineering ToolsSkills for animation review and prototyping.
• DembrandtExtract and audit design tokens.
• OpenDesignAgent-driven design workflows.
• AutoDesignImprove design agents through feedback.
• Paper + ConductorDesign-to-code workflows with AI agents.
• Vercel DesignVercel’s design team and resources.
• DESIGN.md ExtractorTurn website styles into design instructions.
• Design System GlossaryKey terms and concepts in design systems.
• Apple Human Interface GuidelinesA reference to Apple’s interface guidelines.
• SparkbitesWeb design inspiration for you and your AI tools.
• GrainientGradients, animated backgrounds, and shaders.
• Interface CraftInterface-design lessons, interactive examples, and references by Josh Puckett.