https://github.com/ecstaticfly/trailframe
Elegant mouse-following image trail animation with TypeScript. Features smooth interpolation, staggered reveals, and automatic cleanup for optimal performance.
https://github.com/ecstaticfly/trailframe
animation nextjs typescript
Last synced: about 1 month ago
JSON representation
Elegant mouse-following image trail animation with TypeScript. Features smooth interpolation, staggered reveals, and automatic cleanup for optimal performance.
- Host: GitHub
- URL: https://github.com/ecstaticfly/trailframe
- Owner: EcstaticFly
- License: gpl-3.0
- Created: 2025-05-28T16:21:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-19T20:27:57.000Z (11 months ago)
- Last Synced: 2026-05-03T07:39:18.807Z (about 1 month ago)
- Topics: animation, nextjs, typescript
- Language: TypeScript
- Homepage: https://trailframe.vercel.app
- Size: 2.28 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TrailFrame
A smooth mouse-following image trail effect built with Next.js and TypeScript. Features staggered reveal animations and automatic cleanup. Images appear along the mouse path with elegant clip-path transitions and fade-out effects.
## 🖥️ Desktop Only
This animation is **optimized for desktop devices only** (screen width > 1000px). On mobile devices, the effect is automatically disabled to ensure optimal performance.
## 🌐 Live Demo
**[View Live Demo →](https://trailframe.vercel.app/)**
## ✨ Features
- **Mouse tracking** - Images follow cursor movement
- **Animation interpolation** - Smooth, fluid motion transitions
- **Staggered reveals** - Images appear with layered clip-path animations
- **Memory-efficient cleanup** - Automatic removal of old trail elements
- **Responsive behavior** - Desktop-only activation with resize detection
- **Performance optimized** - RequestAnimationFrame-based rendering
## 🛠️ Tech Stack
- **Next.js** - React framework
- **TypeScript** - Type-safe development
- **React Hooks** - Modern state management
## 🚀 Usage
```jsx
import TrailContainer from '@/components/TrailContainer';
export default function Home() {
return (
Your Content Here
);
}
```
## 📁 Setup
1. Place your trail images in `/public/trail-images/`
2. Name them `img1.jpeg` through `img20.jpeg`
3. Import and use the `TrailContainer` component
The component automatically handles desktop detection, mouse tracking, and cleanup without affecting your page layout.
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to **fork** the repo and submit a **pull request**.
## 📜 License
This project is licensed under the **GNU GENERAL PUBLIC LICENSE v3.0**.
## 📬 Contact
For inquiries, reach out to me at [Suyash Pandey](mailto:suyash.2023ug1100@iiitranchi.ac.in).