A modern, high-performance website featuring smooth animations, scroll-triggered effects, and an immersive user experience. Built with cutting-edge web technologies and animation libraries.
- 🎨 Smooth Scrolling - Powered by Locomotive Scroll for buttery-smooth page navigation
- 🎬 Advanced Animations - GSAP ScrollTrigger animations with custom timelines
- 🎭 Framer Motion - React-based motion library for component animations
- 🎥 Video Backgrounds - Immersive full-screen video hero sections
- 🎯 Scroll-Triggered Effects - Dynamic animations that respond to scroll position
- 🌈 Theme Switching - Dynamic theme changes based on scroll sections
- 📱 Responsive Design - Mobile-first approach with Tailwind CSS
- ⚡ Lightning Fast - Optimized with Vite for instant hot module replacement
- React 18.2.0 - Modern UI library with hooks
- Vite 5.2.0 - Next-generation frontend build tool
- Tailwind CSS 3.4.3 - Utility-first CSS framework
- CSS Modules - Component-scoped styling
- PostCSS - CSS processing with Autoprefixer
- GSAP 3.12.5 - Professional-grade animation library
- ScrollTrigger plugin for scroll-based animations
- Timeline animations for complex sequences
- Framer Motion 11.0.24 - Production-ready motion library for React
- Locomotive Scroll 5.0.0 - Smooth scrolling with parallax effects
- Shery.js 1.0.0 - 3D effects and advanced visual enhancements
- React Icons 5.0.1 - Popular icon library
- ESLint - Code quality and consistency
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/TheNeovimmer/significo.git
cd significo- Install dependencies
npm install- Start the development server
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildPreview the production build:
npm run previewsignifico/
├── public/ # Static assets
├── src/
│ ├── assets/ # Images, fonts, videos
│ │ ├── fonts/ # Custom font files
│ │ ├── images/ # Image assets
│ │ └── video/ # Video files
│ ├── components/ # React components
│ │ ├── Home/ # Hero section with video
│ │ ├── Craft/ # Craft section
│ │ ├── Real/ # Real section
│ │ ├── Team/ # Team showcase
│ │ ├── Paragraph/ # Text sections
│ │ ├── Capsule/ # Capsule component
│ │ └── Footer/ # Footer component
│ ├── App.jsx # Main app component
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── index.html # HTML template
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind configuration
└── package.json # Dependencies
- Full-screen video background
- Animated text reveal on scroll
- Smooth scroll-triggered animations
- Responsive navigation with hide/show on scroll
- GSAP ScrollTrigger: Complex scroll-based animations
- Framer Motion: Component-level animations and transitions
- Locomotive Scroll: Smooth scrolling experience
- Theme Switching: Dynamic color themes per section
Modify theme colors by updating the data-color attributes in section components and corresponding CSS variables.
Adjust animation timings and effects in component files:
- GSAP animations:
src/components/Home/Index.jsx - Framer Motion: Component-level
motionprops - ScrollTrigger: Configure in
App.jsx
- Global styles:
src/index.css - Component styles:
src/components/*/Style.module.css - Tailwind config:
tailwind.config.js
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
This project demonstrates:
- Advanced scroll-based animations
- Performance-optimized React components
- Modern CSS with Tailwind
- Smooth user experience with multiple animation libraries
- Responsive design patterns
- Video integration and optimization
TheNeovimmer
- GitHub: @TheNeovimmer
This project is private and proprietary.
- GSAP team for the powerful animation library
- Framer team for Framer Motion
- Locomotive Scroll for smooth scrolling
- All contributors to the open-source libraries used
Built with ❤️ using React, Vite, and modern web technologies
⭐ Star this repo if you find it interesting!