Beautiful, customizable back-to-top buttons with stunning animations. Design that enhances user experience⚡

Create professional back-to-top buttons with 30+ stunning animation effects and complete customization options. Instantly generate production-ready code snippets for React, Next.js, or vanilla HTML/CSS. Built with modern technologies for seamless integration.

Perfect for developers and designers working with React, Next.js, Vue, Angular, or any modern frontend framework. Made for devs who appreciate great UX.

• 30+ Animation Effects - From smooth scrolling to rocket launches, fireworks, and particle trails
• Live Preview - See animations in action with real-time customization
• Export Ready Code - Copy and paste React/Next.js components or HTML/CSS snippets
• Highly Customizable - Colors, sizes, positions, shapes, and animation speeds
• Modern Design - Built with contemporary CSS techniques and Framer Motion
• Responsive - Optimized for all screen sizes and devices
• Zero Dependencies - Pure CSS implementations available
• TypeScript Support - Full type safety and IntelliSense
• Dual Mode Support - Scroll to top and bottom functionality
• Effect Combinations - Mix and match multiple animation effects

• Rocket Launch - Smooth rocket takeoff with flame trails
• Rocket Trail - Exhaust particles and realistic rocket movement
• Rocket Boost - Powerful boost effect with flame animation
• Cosmic Blast - Space-themed explosion effects
• Galaxy Swirl - Swirling galaxy animation
• Meteor Shower - Falling meteors with trails
• Supernova Explosion - Dramatic stellar explosion
• Warp Speed - Star field warp effect

• Fireworks Click - Explosive fireworks on interaction
• Fireworks Burst - Colorful burst animations
• Particle Trail - Trailing particle effects
• Star Shower - Falling star animations
• Sparkle Rain - Gentle sparkle effects
• Pulse Wave - Ripple wave animations
• Neon Glow - Glowing neon effects

• Liquid Morph - Fluid shape transformations
• Hologram - Futuristic holographic effects
• Glitch Effect - Digital glitch animations
• Quantum Teleport - Sci-fi teleportation effect
• Vortex Spin - Spinning vortex animation
• Rainbow Shift - Color-changing rainbow effects
• Magnetic Hover - Magnetic attraction on hover

• Smooth Scroll - Clean, simple scrolling
• Bounce - Playful bouncing animation
• Elastic Spring - Spring-based movements
• Fade In/Out - Smooth opacity transitions
• Rotate Icon - Spinning icon effects
• Morph Shape - Shape transformation
• Progress Ring - Scroll progress indicator
• Flip Card - 3D card flip animation

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe development
• Framer Motion - Advanced animations and interactions
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible component primitives
• next-intl - Internationalization support
• Lucide React - Beautiful icon library

• Node.js 18+
• npm, yarn, pnpm, or bun

1. Clone the repository:

git clone https://github.com/gzamon/back2topfun.git
cd back2topfun

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open http://localhost:3000 in your browser

npm run build
npm start

1. Visit the live site: https://back2top.fun
2. Customize your button: Use the control panel to select animations, colors, shapes, and positions
3. Live preview: Scroll in the preview area to see your button in action
4. Export code: Copy the generated React component or HTML/CSS code
5. Integrate: Paste the code into your project - it's responsive and ready to go!

import { BackToTopButton } from './components/BackToTopButton';

function App() {
  const config = {
    animationType: 'rocketLaunch',
    shape: 'circle',
    icon: 'sparkles',
    style: 'gradient',
    position: 'bottom-right',
    size: 56,
    colors: {
      background: '#8b5cf6',
      icon: '#ffffff',
      effect: '#ec4899',
      hover: '#7c3aed'
    }
  };

  return (
    <div>
      {/* Your page content */}
      <BackToTopButton config={config} />
    </div>
  );
}

<!DOCTYPE html>
<html>
<head>
  <style>
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #8b5cf6, #ec4899);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .back-to-top:hover {
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <button class="back-to-top" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
    ↑
  </button>
</body>
</html>

interface ButtonConfig {
  animationType: AnimationType;
  shape: 'circle' | 'square' | 'capsule' | 'wavy';
  icon: 'arrow' | 'chevron' | 'sparkles' | 'rocket' | 'star';
  style: 'solid' | 'gradient' | 'outline' | 'glass';
  position: 'bottom-right' | 'bottom-left' | 'floating-middle' | 'top-right' | 'top-left';
  size: number; // 40-80px
  speed: number; // Animation speed in ms
  showAfterScroll: number; // Show after X pixels scrolled
  dualMode: boolean; // Enable scroll to top/bottom
  colors: {
    background: string;
    icon: string;
    effect: string;
    hover: string;
  };
}

All 30+ animation effects are available:

• smoothScroll, bounce, elasticSpring, fadeInOut
• rocketLaunch, rocketTrail, rocketBoost
• fireworksClick, fireworksBurst, particleTrail
• pulseWave, neonGlow, glitchEffect
• liquidMorph, hologram, quantumTeleport
• And many more...

back2topfun/
├── app/
│   ├── [locale]/           # Internationalized routes
│   │   ├── layout.tsx      # Layout with providers
│   │   └── page.tsx        # Main application page
│   └── globals.css         # Global styles
├── components/
│   ├── BackToTopButton.tsx # Main button component
│   ├── ControlsPanel.tsx   # Configuration panel
│   ├── PreviewBackToTop.tsx # Preview area
│   ├── ExportCode.tsx      # Code generation
│   ├── FloatingShareButton.tsx # Social sharing
│   └── ui/                 # Reusable UI components
├── lib/
│   ├── effects.ts          # Animation effect definitions
│   └── src/                # NPM package source
├── types/
│   └── button.ts           # TypeScript definitions
└── messages/
    └── en.json             # Internationalization

1. Add your effect to lib/effects.ts:

export type EffectId = "yourNewEffect" | /* existing effects */;

// Add to EFFECTS array
export const EFFECTS: EffectId[] = [
  /* existing effects */,
  "yourNewEffect"
];

// Add code snippet generator
const map: Record<EffectId, string> = {
  /* existing effects */,
  yourNewEffect: `${common}\n\n// Your animation code here`
};

2. Implement the animation in components/BackToTopButton.tsx
3. Test in the preview area
4. Update documentation

• Use TypeScript for type safety
• Follow ESLint and Prettier configurations
• Maintain consistent code formatting
• Use semantic commit messages
• Test animations across different browsers

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

1. Import the repository in Vercel
2. Framework preset: Next.js
3. Build command: npm run build
4. No additional environment variables needed

We welcome contributions to expand the animation collection and improve functionality:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-animation
3. Add your animation effect following the existing patterns
4. Test thoroughly across different browsers and devices
5. Submit a pull request with clear description

• Consistency: Follow existing code patterns and naming conventions
• Performance: Ensure animations are smooth and don't impact performance
• Accessibility: Consider users with motion sensitivity
• Documentation: Update README and add code comments
• Testing: Verify animations work across different screen sizes

This project is open source and available under the MIT License.

For questions, issues, or suggestions:

• Open an issue on GitHub
• Check existing issues before creating new ones
• Provide detailed information for bug reports

• Built with Next.js, Framer Motion, and Tailwind CSS
• Inspired by modern web animation trends
• Community-driven animation collection
• Icons by Lucide React

Happy coding! Create beautiful user experiences with Back2Top.fun⚡