Satisfying And Silly Animations

Satisfying Animations (Logo)
Home screen
Home screen (Scrolled Down)
Flying Burger
Dancing Pizza
Bouncing Balls
Swirling Toilet
Spiral Galaxy
Floating Particles
Colour Cascade
Ocean Waves
Shape Morph
Liquid Blob
Pulsing Energy
Advert Space - For v2
Made With Bolt
Back Button

Inspiration

I am 11 (my dad is in the hackathon + he gave me permission). It was the day before the the hackathon ended. I wanted to create my third project! So I thought for 2 hrs and builded for for 5/6hrs. This is what I came out with...

What it does

This project is a React application that showcases a collection of "satisfying" and "silly" animations. It presents these animations as interactive cards on a main page. When you click on an animation card, it opens that specific animation in a full-screen view for a more immersive experience. There's also a "Play All Animations" button that triggers all the animations displayed on the main page. The animations are created using CSS keyframes directly within the application's code.

How we built it

This application was built using a modern web development stack, primarily focused on providing a fast and efficient development experience.

Here's a breakdown of how it was built:

React: The user interface is developed using React, a popular JavaScript library for building interactive UIs. This allows for a component-based structure, making the application modular and easier to manage. Vite: Vite is used as the build tool and development server. It provides a very fast development environment with features like hot module replacement (HMR), which significantly speeds up the development workflow. TypeScript: The entire codebase is written in TypeScript, which adds static typing to JavaScript. This helps catch errors early in the development process, improves code readability, and enhances maintainability. Tailwind CSS: For styling, the project utilizes Tailwind CSS, a utility-first CSS framework. This allows for rapid UI development by composing styles directly in the JSX markup using pre-defined utility classes. Lucide React: Icons used throughout the application are sourced from Lucide React, a collection of open-source icons provided as React components. CSS Keyframes: The animations themselves are primarily implemented using native CSS keyframes, defined directly within the React component. This provides fine-grained control over the animation properties and performance. ESLint: ESLint is configured for linting, ensuring code quality and consistency across the project by enforcing coding standards and identifying potential issues.

Challenges we ran into

Bugs.

Accomplishments that we're proud of

Persevering through hell.

Clear Component Structure: The application is well-organized into reusable components like AnimationCard and FullscreenAnimation, which makes the codebase modular and easy to understand. Creative and Diverse Animations: The project features a wide variety of engaging and "satisfying" CSS animations, showcasing creativity and a good grasp of CSS keyframes. Effective State Management for Animations: The use of animationKey to re-trigger CSS animations is a clever and effective way to manage animation playback within React's component lifecycle. Modern Technology Stack: The use of React, TypeScript, Tailwind CSS, and Vite demonstrates a commitment to modern and efficient web development practices. Responsive Design Principles: The application appears to be designed with responsiveness in mind, using Tailwind CSS utility classes to adapt the layout for different screen sizes. Engaging User Experience: The concept of a collection of satisfying animations, combined with the fullscreen viewing mode and the "Play All Animations" button, creates a fun and interactive user experience.