Skip to content
MoonUIMoonUI
ComponentsTemplatesPricing
Sign inGet started

Getting started

  • Introduction
  • Installation
  • CDN
  • Authentication
  • shadcn CLI
  • MCP Server
  • Usage

Components

Foundation25 components
  • Alert
  • Aspect Ratio
  • Avatar
  • Badge
  • Button
  • Button Group
  • Checkbox
  • File Upload
  • Input
  • Kbd
  • Label
  • Radio Group
  • Rating
  • Select
  • Slider
  • Switch
  • Textarea
  • Toggle
  • Toggle Group
  • Separator
  • Tags Input
  • Color Picker
  • Date Picker
  • Simple Editor
  • Input OTP
Layout10 components
  • Accordion
  • Breadcrumb
  • Card
  • Carousel
  • Collapsible
  • ResizablePro
  • Scroll Area
  • StepperPro
  • Table
  • Tabs
Navigation & Overlays11 components
  • Alert DialogPro
  • Command
  • Context MenuPro
  • Dialog
  • Dropdown Menu
  • Hover CardPro
  • MenubarPro
  • Pagination
  • Popover
  • SheetPro
  • Tooltip
Feedback4 components
  • Progress
  • Skeleton
  • Spinner
  • Toast
Data & Analytics4 components
  • Data TablePro
  • Advanced ChartPro
  • DashboardPro
  • WidgetsPro
Navigation4 components
  • Command AI+Pro
  • SidebarPro
  • NavbarPro
  • Navigation MenuPro
AI Chat4 components
  • MessagePro
  • Message ScrollerPro
  • AttachmentPro
  • Conversation MarkerPro
Content Management6 components
  • Advanced FormsPro
  • Form WizardPro
  • Quiz FormPro
  • Credit Card InputPro
  • Phone Number InputPro
  • Rich Text EditorPro
Project Management3 components
  • KanbanPro
  • TimelinePro
  • CalendarPro
Performance & Utility8 components
  • Virtual ListPro
  • Memory Efficient DataPro
  • Lazy ComponentPro
  • Optimized ImagePro
  • Performance MonitorPro
  • Performance DebuggerPro
  • Error BoundaryPro
  • Health CheckPro
Interactive & Animation15 components
  • Animated NumberPro
  • Floating DockPro
  • Text RevealPro
  • Image ComparePro
  • Splash CursorPro
  • GitHub StarsPro
  • Animated ButtonPro
  • Magnetic ButtonPro
  • Magnetic ElementsPro
  • Mouse TrailPro
  • Hover Card 3DPro
  • Spotlight CardPro
  • Floating Action ButtonPro
  • LightboxPro
  • Media GalleryPro
Gesture & Touch7 components
  • Swipeable CardPro
  • Draggable ListPro
  • Pinch ZoomPro
  • Swipe ActionsPro
  • Gesture DrawerPro
  • Click AnimationsPro
  • Touch GesturesPro
Text Animations12 components
  • Text HighlighterPro
  • Typewriter TextPro
  • Scrambled TextPro
  • Word RotatePro
  • Morphing TextPro
  • Flip TextPro
  • Number TickerPro
  • Glitch TextPro
  • Shiny TextPro
  • Wavy TextPro
  • Gradient TextPro
  • Text 3DPro
Animations12 components
  • Animated ListPro
  • Bounce EffectPro
  • Blur FadePro
  • Elastic AnimationPro
  • MarqueePro
  • Parallax ScrollPro
  • Reveal CardsPro
  • Scroll RevealPro
  • Fade TransitionsPro
  • Focus TransitionsPro
  • Path AnimationsPro
  • SVG AnimationsPro
Layouts1 components
  • Bento GridPro
Effects9 components
  • ConfettiPro
  • Cursor TrailPro
  • Glow EffectPro
  • Pixel ImagePro
  • Neon EffectPro
  • ShimmerPro
  • RipplePro
  • SparklesPro
  • SpotlightPro
Backgrounds17 components
  • Grid PatternPro
  • MeteorsPro
  • Aurora BackgroundPro
  • ParticlesPro
  • StarfieldPro
  • Dot PatternPro
  • Grid DistortionPro
  • WavesPro
  • Matrix RainPro
  • Liquid BackgroundPro
  • Mesh GradientPro
  • Glitch BackgroundPro
  • Gradient FlowPro
  • Floating ElementsPro
  • Bubble BackgroundPro
  • Geometric PatternsPro
  • Code SnippetsPro
Special UI1 components
  • Glow CardPro
Showcase8 components
  • iPhone MockPro
  • Android MockPro
  • Safari MockPro
  • GlobePro
  • Dotted MapPro
  • Icon CloudPro
  • Tweet CardPro
  • File TreePro

Advanced

  • Theming
  • Customization
  • CLI
  • Help & Support
  1. Docs
  3. Components
  5. Bounce Effect

Bounce Effect

Pro

Realistic bounce animations with physics simulation, customizable elasticity, and natural motion effects

Pro features

What the Pro version adds to this component.

  • Physics Simulation

    Realistic bounce with gravity

  • Multiple Triggers

    Hover, click, auto, scroll

  • 5 Directions

    Up, down, left, right, all

  • Bounce Control

    Count, distance, duration

  • Squash & Stretch

    Cartoon-like deformation

  • Rotation Support

    Rotate during bounce

Installation

Install via CLI

npx @moontra/moonui-cli add bounce-effect

Usage

Pro required

Examples

Direction Variants

Pro

Control bounce direction: up, down, left, right for different visual effects

Pro required

Trigger Types

Pro

Choose when bounce animation activates: hover, click, or auto on mount

Pro required

Bounce Intensity

Pro

Control number of bounces (1-4) for different levels of energy

Pro required

Distance Control

Pro

Adjust bounce distance from subtle (10px) to dramatic (50px)

Pro required

Duration Variations

Pro

Control animation speed from quick (300ms) to slow (1200ms)

Pro required

Interactive Buttons

Pro

Real-world button examples with bounce effects

Pro required

Card Bounce Interactions

Pro

Add bounce effects to cards for engaging hover states

Pro required

Icon Animations

Pro

Apply bounce effects to icons for playful UI elements

Pro required
Previous
Animated List
Pro
Next
Blur Fade
Pro
MoonUIMoonUI

168 React components. 45 free under MIT, 123 Pro.

Unsubscribe anytime.

Product

  • Components
  • Templates
  • Pricing

Resources

  • Documentation
  • GitHub
  • Support

Legal

  • Privacy
  • Terms
  • Refund Policy
Made by Moontra Software
  • X
  • LinkedIn
  • GitHub
  • YouTube