Design References & Resources

This document contains curated design resources that our development team is familiar with and can implement. Designers should use these references to create designs that align with our technical capabilities.

🎨 UI Components

21st.dev Components

A comprehensive collection of modern, production-ready UI components built with React and Tailwind CSS.

What we can implement:

  • Marketing Blocks: Announcements, Backgrounds, Borders, CTAs, Clients, Comparisons, Docks, Features, Footers, Heroes, Hooks, Images, Maps, Navigation, Pricing, Scroll Areas, Testimonials, Texts, Videos
  • UI Components: Accordions, AI Chats, Alerts, Avatars, Badges, Buttons, Calendars, Cards, Carousels, Checkboxes, Date Pickers, Dialogs/Modals, Dropdowns, Empty States, File Trees, File Upload, Forms, Icons, Inputs, Links, Menus, Notifications, Numbers, Paginations, Popovers, Radio Groups, Selects, Sidebars, Sign Ins/Outs, Sliders, Spinner Loaders, Tables, Tabs, Tags, Text Areas, Toasts, Toggles, Tooltips

Motion.dev React Examples

Official React examples using Framer Motion for animations and interactions.

What we can implement:

  • Gesture-based interactions
  • Layout animations
  • Page transitions
  • Drag and drop interfaces
  • Scroll-triggered animations
  • State-based animations

✨ Animation Libraries

GSAP Demos

Professional-grade animation library with extensive examples and capabilities.

What we can implement:

  • Text Animations: Typing effects, text reveals, character-by-character animations
  • Scroll Animations: Parallax effects, scroll-triggered animations, timeline-based sequences
  • SVG Animations: Path animations, morphing, drawing effects
  • 3D Transforms: Card flips, 3D rotations, perspective effects
  • Timeline Animations: Complex sequences, staggered animations, chained effects
  • Performance Optimized: Hardware-accelerated animations, smooth 60fps performance

Best for: High-performance animations, complex sequences, and professional-grade effects

Rive.app

Interactive vector graphics and animations with state machines.

What we can implement:

  • Interactive Graphics: Clickable animations, hover states, interactive elements
  • State Machines: Complex animation states, user-triggered animations
  • Vector Graphics: Scalable animations, crisp visuals at any resolution
  • Cross-platform: Web, mobile, and desktop compatibility
  • Real-time Interactions: User input responsive animations

Best for: Interactive illustrations, game-like interfaces, and complex animated graphics

🎯 Icon Systems

Helpy UI Icons

Beautiful animated icons built with Motion and Lucide.

What we can implement:

  • Animated Icons: Smooth micro-animations, hover effects, click states
  • Consistent Design: Unified icon style and animation patterns
  • Accessibility: Proper ARIA labels and semantic meaning
  • Customization: Color, size, and animation speed adjustments
  • Integration: Easy integration with React components

Best for: Navigation elements, action buttons, and interface icons

🚀 Design References & Inspiration

When No Design is Available or Using UX Pilot

This section provides reference designs organized by platform and industry to help with rapid development when there’s no specific design or when using UX Pilot for quick prototyping.

📱 Reference: Web Applications & Dashboards

Blockchain & Web3 Projects

🔗 Quick Links

Last updated: January 2025