@rpironato/mcp-reactbits-server
Version:
Enhanced MCP server for accessing ReactBits component library with GitHub API integration, advanced search, and comprehensive metadata - 107 components with real code access from DavidHDev/react-bits repository
1,053 lines • 41.1 kB
JavaScript
/**
* ReactBits Component Database
* Dados reais dos componentes ReactBits com palavras-chave para busca
*/
// Componentes de Text Animations
export const TEXT_ANIMATIONS = [
{
name: 'ASCIIText',
category: 'TextAnimations',
description: 'Text effect that transforms characters into ASCII patterns',
keywords: ['ascii', 'text', 'animation', 'transform', 'pattern', 'characters'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'ascii-text'
},
{
name: 'BlurText',
category: 'TextAnimations',
description: 'Animated text that gradually comes into focus from blur',
keywords: ['blur', 'text', 'focus', 'animation', 'reveal', 'transition'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'blur-text'
},
{
name: 'CircularText',
category: 'TextAnimations',
description: 'Text arranged in a circular or curved path',
keywords: ['circular', 'text', 'curve', 'path', 'round', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'circular-text'
},
{
name: 'CountUp',
category: 'TextAnimations',
description: 'Animated number counter that counts up to target value',
keywords: ['count', 'counter', 'number', 'animation', 'increment', 'stats'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'count-up'
},
{
name: 'CurvedLoop',
category: 'TextAnimations',
description: 'Text animation in a curved looping pattern',
keywords: ['curved', 'loop', 'text', 'animation', 'path', 'circular'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'curved-loop',
isNew: true
},
{
name: 'DecryptedText',
category: 'TextAnimations',
description: 'Text that appears as if being decrypted or decoded',
keywords: ['decrypt', 'decode', 'text', 'animation', 'matrix', 'reveal'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'decrypted-text'
},
{
name: 'FallingText',
category: 'TextAnimations',
description: 'Text letters that fall and settle into position',
keywords: ['falling', 'text', 'gravity', 'animation', 'letters', 'drop'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'falling-text'
},
{
name: 'FuzzyText',
category: 'TextAnimations',
description: 'Text with fuzzy, soft appearance and animations',
keywords: ['fuzzy', 'text', 'soft', 'blur', 'animation', 'glow'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'fuzzy-text'
},
{
name: 'GlitchText',
category: 'TextAnimations',
description: 'Text with digital glitch effects and distortions',
keywords: ['glitch', 'text', 'digital', 'distortion', 'animation', 'error'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'glitch-text'
},
{
name: 'GradientText',
category: 'TextAnimations',
description: 'Text with animated gradient colors',
keywords: ['gradient', 'text', 'color', 'animation', 'rainbow', 'transition'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'gradient-text'
},
{
name: 'RotatingText',
category: 'TextAnimations',
description: 'Text that rotates between different words or phrases',
keywords: ['rotating', 'text', 'animation', 'cycle', 'transition', 'words'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'rotating-text'
},
{
name: 'ScrambledText',
category: 'TextAnimations',
description: 'Text that appears scrambled before revealing final text',
keywords: ['scrambled', 'text', 'animation', 'reveal', 'random', 'characters'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'scramble-text'
},
{
name: 'ScrollFloat',
category: 'TextAnimations',
description: 'Text that floats and moves based on scroll position',
keywords: ['scroll', 'float', 'text', 'animation', 'parallax', 'movement'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'scroll-float'
},
{
name: 'ScrollReveal',
category: 'TextAnimations',
description: 'Text that reveals based on scroll position',
keywords: ['scroll', 'reveal', 'text', 'animation', 'trigger', 'appear'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'scroll-reveal'
},
{
name: 'ScrollVelocity',
category: 'TextAnimations',
description: 'Text animation that responds to scroll velocity',
keywords: ['scroll', 'velocity', 'text', 'animation', 'speed', 'responsive'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'scroll-velocity'
},
{
name: 'ShinyText',
category: 'TextAnimations',
description: 'Text with shiny, reflective animation effects',
keywords: ['shiny', 'text', 'reflection', 'animation', 'metallic', 'glow'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'shiny-text'
},
{
name: 'SplitText',
category: 'TextAnimations',
description: 'Text that splits into individual characters for animation',
keywords: ['split', 'text', 'characters', 'animation', 'letters', 'reveal'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'split-text'
},
{
name: 'TextCursor',
category: 'TextAnimations',
description: 'Text with animated cursor and typing effects',
keywords: ['cursor', 'text', 'typing', 'animation', 'typewriter', 'blink'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'text-cursor'
},
{
name: 'TextPressure',
category: 'TextAnimations',
description: 'Text that responds to mouse pressure and proximity',
keywords: ['pressure', 'text', 'mouse', 'animation', 'interactive', 'proximity'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'text-pressure'
},
{
name: 'TextTrail',
category: 'TextAnimations',
description: 'Text with trailing animation effects',
keywords: ['trail', 'text', 'animation', 'follow', 'motion', 'path'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'text-trail'
},
{
name: 'TextType',
category: 'TextAnimations',
description: 'Text that animates as if being typed',
keywords: ['type', 'typing', 'text', 'animation', 'typewriter', 'reveal'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'text-type'
},
{
name: 'TrueFocus',
category: 'TextAnimations',
description: 'Text with advanced focus and depth effects',
keywords: ['focus', 'text', 'depth', 'animation', 'blur', 'sharp'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'true-focus'
},
{
name: 'VariableProximity',
category: 'TextAnimations',
description: 'Text that changes based on mouse proximity',
keywords: ['proximity', 'text', 'mouse', 'animation', 'variable', 'interactive'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'variable-proximity'
}
];
// Componentes de Animations
export const ANIMATIONS = [
{
name: 'AnimatedContent',
category: 'Animations',
description: 'Smooth content animations and transitions',
keywords: ['animated', 'content', 'transition', 'smooth', 'reveal', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'animated-content'
},
{
name: 'BlobCursor',
category: 'Animations',
description: 'Animated blob that follows cursor movement',
keywords: ['blob', 'cursor', 'follow', 'animation', 'mouse', 'tracking'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'blob-cursor'
},
{
name: 'ClickSpark',
category: 'Animations',
description: 'Spark animation that triggers on click',
keywords: ['click', 'spark', 'animation', 'trigger', 'particle', 'effect'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'click-spark'
},
{
name: 'Crosshair',
category: 'Animations',
description: 'Animated crosshair cursor effect',
keywords: ['crosshair', 'cursor', 'animation', 'target', 'aim', 'pointer'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'crosshair'
},
{
name: 'Cubes',
category: 'Animations',
description: '3D animated cube effects and transitions',
keywords: ['cubes', '3d', 'animation', 'rotation', 'transition', 'geometric'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'three', '@react-three/fiber'],
urlSlug: 'cubes'
},
{
name: 'ElectricBorder',
category: 'Animations',
description: 'Electric border animation with lightning effects',
keywords: ['electric', 'border', 'lightning', 'animation', 'energy', 'glow'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'electric-border',
isNew: true
},
{
name: 'FadeContent',
category: 'Animations',
description: 'Smooth fade in/out content animations',
keywords: ['fade', 'content', 'animation', 'transition', 'opacity', 'reveal'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'fade-content'
},
{
name: 'GlareHover',
category: 'Animations',
description: 'Glare effect that follows mouse hover',
keywords: ['glare', 'hover', 'mouse', 'animation', 'shine', 'reflection'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'glare-hover'
},
{
name: 'ImageTrail',
category: 'Animations',
description: 'Images that create trailing animation effects',
keywords: ['image', 'trail', 'animation', 'follow', 'sequence', 'motion'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'image-trail'
},
{
name: 'LogoLoop',
category: 'Animations',
description: 'Animated logo in continuous loop',
keywords: ['logo', 'loop', 'animation', 'brand', 'continuous', 'rotation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'logo-loop',
isNew: true
},
{
name: 'Magnet',
category: 'Animations',
description: 'Magnetic attraction animation effect',
keywords: ['magnet', 'attraction', 'animation', 'pull', 'physics', 'magnetic'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'magnet'
},
{
name: 'MagnetLines',
category: 'Animations',
description: 'Animated lines with magnetic attraction effects',
keywords: ['magnet', 'lines', 'animation', 'attraction', 'physics', 'magnetic'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'magnet-lines'
},
{
name: 'MetaBalls',
category: 'Animations',
description: 'Fluid metaball animation effects',
keywords: ['meta', 'balls', 'fluid', 'animation', 'organic', 'morphing'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'meta-balls'
},
{
name: 'MetallicPaint',
category: 'Animations',
description: 'Metallic paint texture animation',
keywords: ['metallic', 'paint', 'texture', 'animation', 'shiny', 'reflection'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'metallic-paint'
},
{
name: 'Noise',
category: 'Animations',
description: 'Animated noise and grain effects',
keywords: ['noise', 'grain', 'animation', 'texture', 'static', 'random'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'noise'
},
{
name: 'PixelTrail',
category: 'Animations',
description: 'Pixelated trail animation effect',
keywords: ['pixel', 'trail', 'animation', 'retro', '8bit', 'pixelated'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'pixel-trail'
},
{
name: 'PixelTransition',
category: 'Animations',
description: 'Pixel-based transition animations',
keywords: ['pixel', 'transition', 'animation', 'retro', '8bit', 'digital'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'pixel-transition'
},
{
name: 'Ribbons',
category: 'Animations',
description: 'Flowing ribbon animation effects',
keywords: ['ribbons', 'flow', 'animation', 'wave', 'fabric', 'smooth'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'three', '@react-three/fiber'],
urlSlug: 'ribbons'
},
{
name: 'ShapeBlur',
category: 'Animations',
description: 'Animated blur effects on geometric shapes',
keywords: ['shape', 'blur', 'animation', 'geometry', 'focus', 'morph'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'shape-blur'
},
{
name: 'SplashCursor',
category: 'Animations',
description: 'Splash animation that follows cursor',
keywords: ['splash', 'cursor', 'animation', 'water', 'liquid', 'follow'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'splash-cursor'
},
{
name: 'StarBorder',
category: 'Animations',
description: 'Animated star border effect',
keywords: ['star', 'border', 'animation', 'sparkle', 'glow', 'celestial'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'star-border'
},
{
name: 'StickerPeel',
category: 'Animations',
description: 'Sticker peeling animation effect',
keywords: ['sticker', 'peel', 'animation', 'reveal', 'adhesive', 'transition'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'sticker-peel',
isNew: true
},
{
name: 'TargetCursor',
category: 'Animations',
description: 'Target-style cursor animation',
keywords: ['target', 'cursor', 'animation', 'aim', 'crosshair', 'focus'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'target-cursor',
isNew: true
}
];
// Componentes de Components (UI)
export const COMPONENTS = [
{
name: 'AnimatedList',
category: 'Components',
description: 'List with smooth item animations',
keywords: ['list', 'animated', 'items', 'animation', 'stagger', 'sequence'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'animated-list'
},
{
name: 'BounceCards',
category: 'Components',
description: 'Cards with bouncy animation effects',
keywords: ['bounce', 'cards', 'animation', 'elastic', 'spring', 'card'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'bounce-cards'
},
{
name: 'BubbleMenu',
category: 'Components',
description: 'Animated bubble-style menu with smooth transitions',
keywords: ['bubble', 'menu', 'navigation', 'nav', 'button', 'animated', 'floating'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'gsap'],
urlSlug: 'bubble-menu',
isNew: true
},
{
name: 'CardNav',
category: 'Components',
description: 'Card-based navigation component',
keywords: ['card', 'navigation', 'nav', 'menu', 'button', 'ui'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'card-nav',
isNew: true
},
{
name: 'CardSwap',
category: 'Components',
description: 'Cards that swap positions with animation',
keywords: ['card', 'swap', 'animation', 'transition', 'exchange', 'flip'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'card-swap'
},
{
name: 'Carousel',
category: 'Components',
description: 'Smooth animated carousel component',
keywords: ['carousel', 'slider', 'images', 'animation', 'swipe', 'gallery'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'carousel'
},
{
name: 'ChromaGrid',
category: 'Components',
description: 'Colorful grid with chromatic effects',
keywords: ['chroma', 'grid', 'color', 'rainbow', 'layout', 'colorful'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'chroma-grid'
},
{
name: 'CircularGallery',
category: 'Components',
description: 'Images arranged in circular gallery format',
keywords: ['circular', 'gallery', 'images', 'round', 'rotation', 'photos'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'circular-gallery'
},
{
name: 'Counter',
category: 'Components',
description: 'Animated counter component with increment/decrement',
keywords: ['counter', 'number', 'increment', 'decrement', 'button', 'input'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'counter'
},
{
name: 'DecayCard',
category: 'Components',
description: 'Card with decay animation effect',
keywords: ['decay', 'card', 'animation', 'deteriorate', 'fade', 'dissolve'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'decay-card'
},
{
name: 'Dock',
category: 'Components',
description: 'MacOS-style dock with magnification effect',
keywords: ['dock', 'macos', 'navigation', 'magnification', 'icons', 'launcher'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'dock'
},
{
name: 'ElasticSlider',
category: 'Components',
description: 'Slider with elastic animation effects',
keywords: ['elastic', 'slider', 'animation', 'spring', 'bounce', 'input'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'elastic-slider'
},
{
name: 'FlowingMenu',
category: 'Components',
description: 'Menu with flowing animation transitions',
keywords: ['flowing', 'menu', 'navigation', 'fluid', 'smooth', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'flowing-menu'
},
{
name: 'FluidGlass',
category: 'Components',
description: 'Glass morphism effect with fluid animations',
keywords: ['fluid', 'glass', 'morphism', 'glassmorphism', 'blur', 'transparent'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'fluid-glass'
},
{
name: 'FlyingPosters',
category: 'Components',
description: 'Posters that fly and animate in 3D space',
keywords: ['flying', 'posters', '3d', 'animation', 'gallery', 'floating'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'three', '@react-three/fiber'],
urlSlug: 'flying-posters'
},
{
name: 'Folder',
category: 'Components',
description: 'Animated folder component with opening/closing',
keywords: ['folder', 'file', 'animation', 'open', 'close', 'organize'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'folder'
},
{
name: 'GlassIcons',
category: 'Components',
description: 'Icons with glass morphism effect',
keywords: ['glass', 'icons', 'glassmorphism', 'transparent', 'blur', 'modern'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'glass-icons'
},
{
name: 'GlassSurface',
category: 'Components',
description: 'Glass surface with modern glassmorphism design',
keywords: ['glass', 'surface', 'glassmorphism', 'modern', 'blur', 'transparent'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'glass-surface',
isNew: true
},
{
name: 'GooeyNav',
category: 'Components',
description: 'Navigation with gooey animation effects',
keywords: ['gooey', 'navigation', 'nav', 'liquid', 'menu', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'gooey-nav'
},
{
name: 'InfiniteMenu',
category: 'Components',
description: 'Menu with infinite scrolling animation',
keywords: ['infinite', 'menu', 'scroll', 'navigation', 'endless', 'loop'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'infinite-menu'
},
{
name: 'InfiniteScroll',
category: 'Components',
description: 'Infinite scrolling component with smooth loading',
keywords: ['infinite', 'scroll', 'loading', 'pagination', 'endless', 'content'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'infinite-scroll'
},
{
name: 'Lanyard',
category: 'Components',
description: 'Discord presence display component using Lanyard API',
keywords: ['lanyard', 'discord', 'presence', 'status', 'api', 'social'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'lanyard'
},
{
name: 'MagicBento',
category: 'Components',
description: 'Magical bento grid layout with animations',
keywords: ['magic', 'bento', 'grid', 'layout', 'animation', 'masonry'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'magic-bento'
},
{
name: 'Masonry',
category: 'Components',
description: 'Masonry grid layout with animated items',
keywords: ['masonry', 'grid', 'layout', 'animation', 'pinterest', 'gallery'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'masonry'
},
{
name: 'ModelViewer',
category: 'Components',
description: '3D model viewer with interactive controls',
keywords: ['model', 'viewer', '3d', 'interactive', 'three', 'controls'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'three', '@react-three/fiber', '@react-three/drei'],
urlSlug: 'model-viewer'
},
{
name: 'PillNav',
category: 'Components',
description: 'Pill-shaped navigation component',
keywords: ['pill', 'navigation', 'nav', 'button', 'menu', 'rounded'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'pill-nav',
isNew: true
},
{
name: 'PixelCard',
category: 'Components',
description: 'Card with pixel art style effects',
keywords: ['pixel', 'card', 'retro', '8bit', 'pixelated', 'game'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'pixel-card'
},
{
name: 'ProfileCard',
category: 'Components',
description: 'Animated profile card component',
keywords: ['profile', 'card', 'user', 'avatar', 'social', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'profile-card'
},
{
name: 'RollingGallery',
category: 'Components',
description: 'Gallery with rolling animation effects',
keywords: ['rolling', 'gallery', 'images', 'animation', 'carousel', 'rotation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'rolling-gallery'
},
{
name: 'ScrollStack',
category: 'Components',
description: 'Stacked cards that animate on scroll',
keywords: ['scroll', 'stack', 'cards', 'animation', 'reveal', 'trigger'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'scroll-stack'
},
{
name: 'SpotlightCard',
category: 'Components',
description: 'Card with spotlight hover effect',
keywords: ['spotlight', 'card', 'hover', 'light', 'animation', 'focus'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'spotlight-card'
},
{
name: 'Stack',
category: 'Components',
description: 'Stackable card component with physics',
keywords: ['stack', 'cards', 'physics', 'drag', 'animation', 'pile'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'stack'
},
{
name: 'Stepper',
category: 'Components',
description: 'Animated step-by-step progress component',
keywords: ['stepper', 'progress', 'steps', 'animation', 'wizard', 'form'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'motion'],
urlSlug: 'stepper'
},
{
name: 'TiltedCard',
category: 'Components',
description: 'Card with 3D tilt animation effect',
keywords: ['tilted', 'card', '3d', 'tilt', 'animation', 'perspective'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'tilted-card'
}
];
// Componentes de Backgrounds
export const BACKGROUNDS = [
{
name: 'Aurora',
category: 'Backgrounds',
description: 'Aurora borealis animated background effect',
keywords: ['aurora', 'background', 'northern', 'lights', 'animation', 'glow'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'aurora'
},
{
name: 'Balatro',
category: 'Backgrounds',
description: 'Balatro-inspired animated background',
keywords: ['balatro', 'background', 'game', 'animation', 'pattern', 'geometric'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'balatro'
},
{
name: 'Ballpit',
category: 'Backgrounds',
description: 'Animated ball pit background with physics',
keywords: ['ballpit', 'background', 'balls', 'physics', 'animation', 'bouncing'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react', 'matter-js'],
urlSlug: 'ballpit'
},
{
name: 'Beams',
category: 'Backgrounds',
description: 'Light beam background animation',
keywords: ['beams', 'background', 'light', 'rays', 'animation', 'glow'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'beams'
},
{
name: 'DarkVeil',
category: 'Backgrounds',
description: 'Dark veil background with subtle animations',
keywords: ['dark', 'veil', 'background', 'shadow', 'animation', 'mystery'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'dark-veil'
},
{
name: 'Dither',
category: 'Backgrounds',
description: 'Dithered background pattern animation',
keywords: ['dither', 'background', 'pattern', 'noise', 'retro', 'pixelated'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'dither'
},
{
name: 'DotGrid',
category: 'Backgrounds',
description: 'Animated dot grid background pattern',
keywords: ['dot', 'grid', 'background', 'pattern', 'animation', 'minimal'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'dot-grid'
},
{
name: 'FaultyTerminal',
category: 'Backgrounds',
description: 'Glitchy terminal background effect',
keywords: ['faulty', 'terminal', 'background', 'glitch', 'error', 'matrix'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'faulty-terminal',
isNew: true
},
{
name: 'Galaxy',
category: 'Backgrounds',
description: 'Animated galaxy background with stars',
keywords: ['galaxy', 'background', 'stars', 'space', 'cosmos', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'galaxy',
isNew: true
},
{
name: 'GradientBlinds',
category: 'Backgrounds',
description: 'Gradient blinds background animation',
keywords: ['gradient', 'blinds', 'background', 'transition', 'color', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'gradient-blinds',
isNew: true
},
{
name: 'GridDistortion',
category: 'Backgrounds',
description: 'Distorted grid background effect',
keywords: ['grid', 'distortion', 'background', 'warp', 'animation', 'geometric'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'grid-distortion'
},
{
name: 'GridMotion',
category: 'Backgrounds',
description: 'Animated grid background with motion',
keywords: ['grid', 'motion', 'background', 'animation', 'movement', 'pattern'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'grid-motion'
},
{
name: 'Hyperspeed',
category: 'Backgrounds',
description: 'Hyperspeed star field background',
keywords: ['hyperspeed', 'background', 'stars', 'space', 'speed', 'lines'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'hyperspeed'
},
{
name: 'Iridescence',
category: 'Backgrounds',
description: 'Iridescent background with color shifting',
keywords: ['iridescence', 'background', 'rainbow', 'color', 'shift', 'holographic'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'iridescence'
},
{
name: 'LetterGlitch',
category: 'Backgrounds',
description: 'Glitching letter background effect',
keywords: ['letter', 'glitch', 'background', 'text', 'digital', 'error'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'letter-glitch'
},
{
name: 'Lightning',
category: 'Backgrounds',
description: 'Lightning strike background animation',
keywords: ['lightning', 'background', 'thunder', 'electric', 'storm', 'energy'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'lightning'
},
{
name: 'LightRays',
category: 'Backgrounds',
description: 'Animated light rays background',
keywords: ['light', 'rays', 'background', 'beams', 'sun', 'glow'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'light-rays',
isNew: true
},
{
name: 'LiquidChrome',
category: 'Backgrounds',
description: 'Liquid chrome background effect',
keywords: ['liquid', 'chrome', 'background', 'metallic', 'reflection', 'fluid'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'liquid-chrome'
},
{
name: 'Orb',
category: 'Backgrounds',
description: 'Floating orb background animation',
keywords: ['orb', 'background', 'floating', 'sphere', 'glow', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'orb'
},
{
name: 'Particles',
category: 'Backgrounds',
description: 'Animated particle system background',
keywords: ['particles', 'background', 'animation', 'dots', 'floating', 'system'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'particles'
},
{
name: 'Plasma',
category: 'Backgrounds',
description: 'Plasma effect background animation',
keywords: ['plasma', 'background', 'energy', 'glow', 'electric', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'plasma',
isNew: true
},
{
name: 'Prism',
category: 'Backgrounds',
description: 'Prism light refraction background',
keywords: ['prism', 'background', 'light', 'refraction', 'rainbow', 'spectrum'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'prism',
isNew: true
},
{
name: 'RippleGrid',
category: 'Backgrounds',
description: 'Grid with ripple wave animation',
keywords: ['ripple', 'grid', 'background', 'wave', 'animation', 'water'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'ripple-grid'
},
{
name: 'Silk',
category: 'Backgrounds',
description: 'Smooth silk fabric background animation',
keywords: ['silk', 'background', 'fabric', 'smooth', 'wave', 'elegant'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'silk'
},
{
name: 'Squares',
category: 'Backgrounds',
description: 'Animated square pattern background',
keywords: ['squares', 'background', 'pattern', 'geometric', 'animation', 'grid'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'squares'
},
{
name: 'Threads',
category: 'Backgrounds',
description: 'Animated thread pattern background',
keywords: ['threads', 'background', 'lines', 'pattern', 'weave', 'animation'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'threads'
},
{
name: 'Waves',
category: 'Backgrounds',
description: 'Animated wave background effect',
keywords: ['waves', 'background', 'water', 'ocean', 'animation', 'fluid'],
versions: ['js', 'js-tailwind', 'ts', 'ts-tailwind'],
dependencies: ['react'],
urlSlug: 'waves'
}
];
// Combinar todos os componentes
export const ALL_COMPONENTS = [
...TEXT_ANIMATIONS,
...ANIMATIONS,
...COMPONENTS,
...BACKGROUNDS
];
// Categorias com contadores
export const CATEGORIES = [
{ name: 'TextAnimations', count: TEXT_ANIMATIONS.length, description: 'Animated text effects and typography' },
{ name: 'Animations', count: ANIMATIONS.length, description: 'General animation components and effects' },
{ name: 'Components', count: COMPONENTS.length, description: 'UI components and interactive widgets' },
{ name: 'Backgrounds', count: BACKGROUNDS.length, description: 'Background effects and patterns' }
];
/**
* Busca componentes por termo de pesquisa
*/
export function searchComponents(searchTerm, category, limit = 10) {
const normalizedSearch = searchTerm.toLowerCase();
let components = ALL_COMPONENTS;
// Filtrar por categoria se especificada
if (category) {
components = components.filter(comp => comp.category === category);
}
// Buscar em nome, descrição e palavras-chave
const results = components.filter(comp => comp.name.toLowerCase().includes(normalizedSearch) ||
comp.description.toLowerCase().includes(normalizedSearch) ||
comp.keywords.some(keyword => keyword.toLowerCase().includes(normalizedSearch)) ||
comp.urlSlug.includes(normalizedSearch));
// Ordenar por relevância (nome exato > descrição > palavras-chave)
results.sort((a, b) => {
const aNameMatch = a.name.toLowerCase().includes(normalizedSearch) ? 3 : 0;
const aDescMatch = a.description.toLowerCase().includes(normalizedSearch) ? 2 : 0;
const aKeywordMatch = a.keywords.some(k => k.toLowerCase().includes(normalizedSearch)) ? 1 : 0;
const bNameMatch = b.name.toLowerCase().includes(normalizedSearch) ? 3 : 0;
const bDescMatch = b.description.toLowerCase().includes(normalizedSearch) ? 2 : 0;
const bKeywordMatch = b.keywords.some(k => k.toLowerCase().includes(normalizedSearch)) ? 1 : 0;
return (bNameMatch + bDescMatch + bKeywordMatch) - (aNameMatch + aDescMatch + aKeywordMatch);
});
return results.slice(0, limit);
}
/**
* Obter componente por nome
*/
export function getComponentByName(name) {
return ALL_COMPONENTS.find(comp => comp.name.toLowerCase() === name.toLowerCase() ||
comp.urlSlug === name.toLowerCase());
}
/**
* Obter componentes por categoria
*/
export function getComponentsByCategory(category, limit, offset = 0) {
const components = ALL_COMPONENTS.filter(comp => comp.category === category);
if (limit) {
return components.slice(offset, offset + limit);
}
return components.slice(offset);
}
//# sourceMappingURL=components.js.map