https://github.com/linkb15/animation
Animations with ReactJS and NextJS using TailwindCSS, ShadcnUI, React-Spring.
https://github.com/linkb15/animation
animation react-spring shadcn-ui tailwindcss
Last synced: 11 months ago
JSON representation
Animations with ReactJS and NextJS using TailwindCSS, ShadcnUI, React-Spring.
- Host: GitHub
- URL: https://github.com/linkb15/animation
- Owner: linkb15
- Created: 2024-01-06T08:22:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T17:58:17.000Z (almost 2 years ago)
- Last Synced: 2024-05-16T02:56:22.581Z (over 1 year ago)
- Topics: animation, react-spring, shadcn-ui, tailwindcss
- Language: TypeScript
- Homepage: https://ravox.vercel.app/
- Size: 1.09 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcnui - Github
README
# Animation
> This repo is used for this [Reddit Post 🔗](https://www.reddit.com/r/nextjs/comments/18zt889/animation_is_hard).
The animation in this repo is inspired by this [Instagram Reel 🔗](https://www.instagram.com/p/C0RdOSMLCWa/).
[Figma File 🔗](https://www.figma.com/file/QJu7FdMACG7rEky2V0XtaW/Tap-Tap-Reels-%7C-Ravox?type=design&node-id=0%3A1&mode=design&t=Y1apmy1PPQSuuPH5-1) is from the original creator from the Instagram Reel Creator ([Howardle](https://www.instagram.com/uxui_howard.le/)). I modified it a bit to see more elements better.
## Getting Started
First, install dependencies and run the development server:
```bash
pnpm i
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.