Desktop.2024.07.02.-.16.17.01.01.mp4
This repository contains the dark version of the website ochi.in.design.
- React: A JavaScript library for building user interfaces.
- Vite: A build tool that aims to provide a faster development experience for modern web projects.
- Tailwind CSS: A CSS framework for rapidly building custom designs.
- Locomotive Scroll: A simple scroll library that provides smooth scrolling, parallax effects, and more.
- Framer Motion: An animation library for React that powers production-ready animations.
playful_eyes.mp4
How it was made:
- For the eyes to look more playful and rotate according to the cursor I used the following logic
- An event listener is added for mouse movement.
- When the mouse moves, the current X and Y coordinates of the mouse are captured.
- The difference between the mouse's X and Y coordinates and the center of the window's width is calculated.
- Using these differences, the angle of rotation is determined using the arctangent function.
- The calculated angle is then set as the rotation value for the eyes.
card.mp4
How it was made:
- For the cards to look a little more dynamic this feature is added which changes the text on hover
- When hovering over a card, the name of the card is displayed with an animation.
- When hovering over a card, the name of the card is displayed with an animation.
- The text animation uses Framer Motion for smooth transitions and delay for a staggered effect.