Snow animations

Css animations ready to use in your proyect. Snow contrast is a proyect created for improve the visual experience of the users in the winter season, and make agile the development of new proyects.

Wich problem resolve?.

Snow animations was created for make your websites more attractive and dynamic, and make agile the development of new proyects. Although i still need make utility classes similary to tailwindcss, but i don't have the knowledge to do it. I'm learning. and soon i will make it for complete this project.

You can contribute to this project.

If you have any idea, suggestion, or you find any bug, please create an issue or a pull request. I will appreciate it. If you know npm packages for animations, please share it with me i would wish have this project publish in npm.

This proyect is inspired by tailwind animations by Midudev and friends. I'm a big fan of his work and i would like to collaborate with him.

Architecture

├── README.md
├── app
│   ├── Header.tsx
│   ├── animations.ts
│   ├── components
│   │   ├── AnimateGrid.tsx
│   │   ├── AnimationCard.tsx
│   │   ├── AnimationCardsCollection.tsx
│   │   ├── AnimationModal.tsx
│   │   ├── CardControls.tsx
│   │   ├── CodeBlock.tsx
│   │   ├── Examples
│   │   │   ├── Card.tsx
│   │   │   └── ExampleCard.tsx
│   │   ├── Footer.tsx
│   │   ├── GithubLink.tsx
│   │   ├── GlobalControls.tsx
│   │   ├── GridCodeExamples.tsx
│   │   ├── Hero.tsx
│   │   ├── Logo.tsx
│   │   ├── Overview.tsx
│   │   ├── RevealOnScroll.tsx
│   │   ├── RevealOnScrollSection.tsx
│   │   ├── ScrollBlocks.tsx
│   │   ├── SequencialGrid.tsx
│   │   ├── Square.tsx
│   │   ├── TimingFunctionBox.tsx
│   │   ├── context
│   │   │   ├── AnimationContext.tsx
│   │   │   ├── GridContext.tsx
│   │   │   └── ModalContext.tsx
│   │   ├── functions
│   │   │   └── CodeClass.ts
│   │   └── hooks
│   │   ├── useActiveOption.ts
│   │   ├── useCycling.ts
│   │   ├── useIntersectionObserver.ts
│   │   └── useWindowResize.ts
│   ├── globals.css
│   ├── icon.tsx
│   ├── layout.tsx
│   ├── lib
│   │   ├── animateClasses.ts
│   │   └── keyframes.ts
│   ├── page.tsx
│   ├── styles
│   │   ├── animations.css
│   │   ├── pageAnimations.css
│   │   └── scrollAnimations.css
│   └── types.d.ts
├── eslint.config.mjs
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── og-image.png
│   ├── vercel.svg
│   └── window.svg
├── tailwind.config.js
└── tsconfig.json

Stack

• Next.js
• React
• TypeScript
• Tailwindcss
• Anime.js

How to use

For the moments you can use any animation copying the keyframes by pressing the "code" button in the animation card, but i repeat, i'm working in it for make it more easy to use publishing it in npm so you will can use the utility classes like tailwindcss.

Thanks for visiting my project, i hope you like it.