repo_description: An open source collection of animated, interactive & fully customizable React components for building memorable websites.
repo_topics: 3d animations component-library components components-library components-react css-animations javascript react react-components reactjs tailwind tailwindcss ui-components ui-library web
code: const getStarted = {
    introduction: () => import('../docs/Introduction.jsx'),
    installation: () => import('../docs/Installation.jsx'),
    mcp: () => import('../docs/McpServer.jsx')
  };
  
  const animations = {
    'gradual-blur': () => import('../demo/Animations/GradualBlurDemo'),
    'blob-cursor': () => import('../demo/Animations/BlobCursorDemo'),
    'animated-content': () => import('../demo/Animations/AnimatedContentDemo'),
    'magnet': () => import('../demo/Animations/MagnetDemo'),
    'fade-content': () => import('../demo/Animations/FadeContentDemo'),
    'crosshair': () => import('../demo/Animations/CrosshairDemo'),
    'shape-blur': () => import('../demo/Animations/ShapeBlurDemo'),
    'star-border': () => import('../demo/Animations/StarBorderDemo'),
    'noise': () => import('../demo/Animations/NoiseDemo'),
    'magnet-lines': () => import('../demo/Animations/MagnetLinesDemo'),
    'splash-cursor': () => import('../demo/Animations/SplashCursorDemo'),
    'click-spark': () => import('../demo/Animations/ClickSparkDemo'),
    'pixel-transition': () => import('../demo/Animations/PixelTransitionDemo'),
    'image-trail': () => import('../demo/Animations/ImageTrailDemo'),
    'pixel-trail': () => import('../demo/Animations/PixelTrailDemo'),
    'ribbons': () => import('../demo/Animations/RibbonsDemo'),
    'meta-balls': () => import('../demo/Animations/MetaBallsDemo'),
    'metallic-paint': () => import('../demo/Animations/MetallicPaintDemo'),
    'glare-hover': () => import('../demo/Animations/GlareHoverDemo'),
    'cubes': () => import('../demo/Animations/CubesDemo'),
    'target-cursor': () => import('../demo/Animations/TargetCursorDemo'),
    'sticker-peel': () => import('../demo/Animations/StickerPeelDemo'),
    'electric-border': () => import('../demo/Animations/ElectricBorderDemo'),
    'laser-flow': () => import('../demo/Animations/LaserFlowDemo'),
    'ghost-cursor': () => import('../demo/Animations/GhostCursorDemo'),
    'antigravity': () => import('../demo/Animations/AntigravityDemo'),
    'orbit-images': () => import('../demo/Animations/OrbitImagesDemo'),
    'magic-rings': () => import('../demo/Animations/MagicRingsDemo'),
  };
  
  const textAnimations = {
    'split-text': () => import('../demo/TextAnimations/SplitTextDemo'),
    'blur-text': () => import('../demo/TextAnimations/BlurTextDemo'),
    'shiny-text': () => import('../demo/TextAnimations/ShinyTextDemo'),
    'gradient-text': () => import('../demo/TextAnimations/GradientTextDemo'),
    'count-up': () => import('../demo/TextAnimations/CountUpDemo'),
    'decrypted-text': () => import('../demo/TextAnimations/DecryptedTextDemo'),
    'true-focus': () => import('../demo/TextAnimations/TrueFocusDemo'),
    'variable-proximity': () => import('../demo/TextAnimations/VariableProximityDemo'),
    'text-pressure': () => import('../demo/TextAnimations/TextPressureDemo'),
    'ascii-text': () => import('../demo/TextAnimations/ASCIITextDemo.jsx'),
    'falling-text': () => import('../demo/TextAnimations/FallingTextDemo'),
    'rotating-text': () => import('../demo/TextAnimations/RotatingTextDemo'),
    'circular-text': () => import('../demo/TextAnimations/CircularTextDemo'),
    'scroll-velocity': () => import('../demo/TextAnimations/ScrollVelocityDemo'),
    'scroll-reveal': () => import('../demo/TextAnimations/ScrollRevealDemo'),
    'scroll-float': () => import('../demo/TextAnimations/ScrollFloatDemo'),
    'glitch-text': () => import('../demo/TextAnimations/GlitchTextDemo'),
    'fuzzy-text': () => import('../demo/TextAnimations/FuzzyTextDemo'),
    'text-cursor': () => import('../demo/TextAnimations/TextCursorDemo'),
    'scrambled-text': () => import('../demo/TextAnimations/ScrambledTextDemo'),
    'curved-loop': () => import('../demo/TextAnimations/CurvedLoopDemo'),
    'text-type': () => import('../demo/TextAnimations/TextTypeDemo'),
    'logo-loop': () => import('../demo/Animations/LogoLoopDemo'),
    'shuffle': () => import('../demo/TextAnimations/ShuffleDemo')
  };
  
  const components = {
    'stack': () => import('../demo/Components/StackDemo'),
    'dock': () => import('../demo/Components/DockDemo'),
    'spotlight-card': () => import('../demo/Components/SpotlightCardDemo'),
    'border-glow': () => import('../demo/Components/BorderGlowDemo'),
    'elastic-slider': () => import('../demo/Components/ElasticSliderDemo'),
    'decay-card': () => import('../demo/Components/DecayCardDemo'),
    'bounce-cards': () => import('../demo/Components/BounceCardsDemo'),
    'pixel-card': () => import('../demo/Components/PixelCardDemo'),
    'tilted-card': () => import('../demo/Components/TiltedCardDemo'),
    'infinite-menu': () => import('../demo/Components/InfiniteMenuDemo'),
    'flying-posters': () => import('../demo/Components/FlyingPostersDemo'),
    'flowing-menu': () => import('../demo/Components/FlowingMenuDemo'),
    'circular-gallery': () => import('../demo/Components/CircularGalleryDemo'),
    'stepper': () => import('../demo/Components/StepperDemo'),
    'carousel': () => import('../demo/Components/CarouselDemo'),
    'counter': () => import('../demo/Components/CounterDemo'),
    'lanyard': () => import('../demo/Components/LanyardDemo'),
    'glass-icons': () => import('../demo/Components/GlassIconsDemo'),
    'animated-list': () => import('../demo/Components/AnimatedListDemo'),
    'folder': () => import('../demo/Components/FolderDemo'),
    'gooey-nav': () => import('../demo/Components/GooeyNavDemo'),
    'chroma-grid': () => import('../demo/Components/ChromaGridDemo'),
    'profile-card': () => import('../demo/Components/ProfileCardDemo'),
    'card-swap': () => import('../demo/Components/CardSwapDemo'),
    'model-viewer': () => import('../demo/Components/ModelViewerDemo'),
    'fluid-glass': () => import('../demo/Components/FluidGlassDemo'),
    'masonry': () => import('../demo/Components/MasonryDemo'),
    'magic-bento': () => import('../demo/Components/MagicBentoDemo'),
    'scroll-stack': () => import('../demo/Components/ScrollStackDemo'),
    'glass-surface': () => import('../demo/Components/GlassSurfaceDemo'),
    'pill-nav': () => import('../demo/Components/PillNavDemo.jsx'),
    'card-nav': () => import('../demo/Components/CardNavDemo'),
    'bubble-menu': () => import('../demo/Components/BubbleMenuDemo'),
    'dome-gallery': () => import('../demo/Components/DomeGalleryDemo'),
    'staggered-menu': () => import('../demo/Components/StaggeredMenuDemo'),
    'reflective-card': () => import('../demo/Components/ReflectiveCardDemo')
  };
  
  const backgrounds = {
    'silk': () => import('../demo/Backgrounds/SilkDemo'),
    'aurora': () => import('../demo/Backgrounds/AuroraDemo'),
    'shape-grid': () => import('../demo/Backgrounds/ShapeGridDemo'),
    'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo'),
    'iridescence': () => import('../demo/Backgrounds/IridescenceDemo'),
    'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo'),
    'waves': () => import('../demo/Backgrounds/WavesDemo'),
    'ballpit': () => import('../demo/Backgrounds/BallpitDemo'),
    'letter-glitch': () => import('../demo/Backgrounds/LetterGlitchDemo'),
    'grid-distortion': () => import('../demo/Backgrounds/GridDistortionDemo'),
    'orb': () => import('../demo/Backgrounds/OrbDemo'),
    'particles': () => import('../demo/Backgrounds/ParticlesDemo'),
    'liquid-chrome': () => import('../demo/Backgrounds/LiquidChromeDemo'),
    'balatro': () => import('../demo/Backgrounds/BalatroDemo'),
    'threads': () => import('../demo/Backgrounds/ThreadsDemo'),
    'dither': () => import('../demo/Backgrounds/DitherDemo'),
    'lightning': () => import('../demo/Backgrounds/LightningDemo'),
    'dot-grid': () => import('../demo/Backgrounds/DotGridDemo'),
    'beams': () => import('../demo/Backgrounds/BeamsDemo'),
    'ripple-grid': () => import('../demo/Backgrounds/RippleGridDemo'),
    'dark-veil': () => import('../demo/Backgrounds/DarkVeilDemo'),
    'galaxy': () => import('../demo/Backgrounds/GalaxyDemo'),
    'light-rays': () => import('../demo/Backgrounds/LightRaysDemo'),
    'faulty-terminal': () => import('../demo/Backgrounds/FaultyTerminalDemo'),
    'plasma': () => import('../demo/Backgrounds/PlasmaDemo'),
    'plasma-wave': () => import('../demo/Backgrounds/PlasmaWaveDemo'),
    'prism': () => import('../demo/Backgrounds/PrismDemo'),
    'gradient-blinds': () => import('../demo/Backgrounds/GradientBlindsDemo'),
    'grainient': () => import('../demo/Backgrounds/GrainientDemo.jsx'),
    'prismatic-burst': () => import('../demo/Backgrounds/PrismaticBurstDemo.jsx'),
    'pixel-blast': () => import('../demo/Backgrounds/PixelBlastDemo.jsx'),
    'liquid-ether': () => import('../demo/Backgrounds/LiquidEtherDemo.jsx'),
    'color-bends': () => import('../demo/Backgrounds/ColorBendsDemo.jsx'),
    'line-waves': () => import('../demo/Backgrounds/LineWavesDemo.jsx'),
    'grid-scan': () => import('../demo/Backgrounds/GridScanDemo.jsx'),
    'floating-lines': () => import('../demo/Backgrounds/FloatingLinesDemo.jsx'),
    'light-pillar': () => import('../demo/Backgrounds/LightPillarDemo.jsx'),
    'pixel-snow': () => import('../demo/Backgrounds/PixelSnowDemo.jsx'),
    'radar': () => import('../demo/Backgrounds/RadarDemo.jsx'),
    'soft-aurora': () => import('../demo/Backgrounds/SoftAuroraDemo.jsx'),
    'evil-eye': () => import('../demo/Backgrounds/EvilEyeDemo.jsx'),
    'dot-field': () => import('../demo/Backgrounds/DotFieldDemo')
  };
  
  export const componentMap = {
    ...getStarted,
    ...animations,
    ...textAnimations,
    ...components,
    ...backgrounds
  };
  