https://github.com/thesakshijaiswal/fusion
Fusion is a clean, high-impact UI for SaaS platforms. Built for speed, focus, and effortless design. Powered by Next.js, TypeScript, and Tailwind CSS, it blends modern aesthetics with intuitive, collaborative features.
https://github.com/thesakshijaiswal/fusion
animation drag-and-drop framer-motion javascript nextjs responsive-web-design saas-application tailwindcss typescript
Last synced: 2 months ago
JSON representation
Fusion is a clean, high-impact UI for SaaS platforms. Built for speed, focus, and effortless design. Powered by Next.js, TypeScript, and Tailwind CSS, it blends modern aesthetics with intuitive, collaborative features.
- Host: GitHub
- URL: https://github.com/thesakshijaiswal/fusion
- Owner: thesakshijaiswal
- License: mit
- Created: 2025-07-09T12:05:13.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-08T19:34:33.000Z (10 months ago)
- Last Synced: 2025-09-10T16:59:51.546Z (9 months ago)
- Topics: animation, drag-and-drop, framer-motion, javascript, nextjs, responsive-web-design, saas-application, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://fusion-dashboard-ten.vercel.app
- Size: 863 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fusion: Impactful Design, Created Effortlessly
**Fusion** is a streamlined interface built to explore what modern product design can feel like clean, fast, and purpose-driven. Crafted with Next.js, TypeScript, Tailwind CSS, and Framer Motion, it focuses on delivering smooth interactions, thoughtful layouts, and a visual rhythm that resonates with **startup-grade user experiences**. It’s a hands-on exploration of building intuitive, high-impact UIs with real-world product thinking.
## 🚀 Key Features
- 🖱️**Custom Multiplayer Cursor**
A Figma-inspired cursor that mimics the multiplayer editing experience, adding a modern, collaborative feel to the UI.
- 🎯**Animated Hero Cards with Drag & Drop**
Two hero section cards animate in from opposite directions on load and support drag-and-drop interactions for playful engagement.
- ♾️**Infinite Scroll Animations**
Seamless infinite scrolling effects in both the Hero and CTA sections create a sense of momentum and modern motion design.
- 🌟**Scroll-Reveal Introduction**
The introduction section features elegant text reveal animations triggered on scroll, powered entirely by Framer Motion.
- ⚡**Interactive Hover Effects**
The Features section showcases dynamic hover interactions including text gradients, reveal-on-hover transitions, keyboard-press simulations, and icon animations like rotate and scale.
- 🎞️**Bidirectional Infinite Scroll in Integrations**
Two opposing scroll animations one upward and one downward run continuously in the Integrations section, delivering visual depth and balance.
- 📜**Smooth FAQ Drawer Animations**
Expandable FAQ drawers with smooth open-close transitions provide a refined and user-friendly reading experience.
## 🧰 Tech Stack
| 
| 
| 
| 
| 
| 
|
|:---:|:---:|:---:|:---:|:---:|:---:|
| **React** | **Next** | **Javascript** | **TypeScript** | **Tailwind CSS** | **Framer Motion** |
|
|
|
|
|
|:---:|:---:|:---:|:---:|
| **Vite** | **TW Merge** | **Prettier** | **EsLint** |
## ✨ Installation Steps
#### 1. Clone the Repository
```bash
git clone https://github.com/thesakshijaiswal/fusion.git
cd fusion
```
#### 2. Install Dependencies
```bash
npm install
```
#### 3. Start Development Server
```bash
npm run dev
```
## 📂 Folder Structure
```bash
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── eslint.config.mjs
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
├── src
├── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── assets
│ ├── Images
│ └── logo.svg
├── components
│
└── sections
│ ├── CallToAction..tsx
│ ├── Faqs.tsx
│ ├── Features.tsx
│ ├── Footer.tsx
│ ├── Hero.tsx
│ ├── Integration.tsx
│ ├── Introduction.tsx
│ ├── LogoTicker.tsx
│ └── Navbar.tsx
└── tsconfig.json
```
## 🛠 Developer
[](https://github.com/thesakshijaiswal)
If you found this project useful or inspiring, please consider ⭐️ **starring the repo** to support the work!
## 📄 License
This project is licensed under the [MIT License](LICENSE).