Demo site of a creative agency

[!note] Explore my personal website's source code - you may like it

Adaptive and stylish landing page of a creative agency with modern animations and interactive components. The project is designed to create a vivid impression.

Design

• Figma

Functionality

• Adaptive design: optimized for different devices and screens.
• Animated sidebar menu: smooth animations for opening and closing the menu.
• Smoke cursor: spectacular smoky cursor for an additional wow effect.
• Request form: ready-made form with interactive fields for sending requests.
• Animated components: dynamic transitions and effects for components to liven up the interface.

Libraries

• TailwindCSS — a utility CSS framework for creating responsive interfaces.
• GSAP — a library for creating high-performance animations.
• Framer Motion — declarative animations and gestures for React components.
• Lenis — custom scroll for smooth user experience.
• Edil Ozi — ready-made animated components for React applications.
• shadcn/ui — a collection of interface components with full customization support.

Running the project

Clone the repository and run :

bash git clone https://github.com/Shatlyk1011/agency-website.git

cd agency-website

npm i

npm run dev

Notes

The smoke cursor is implemented using WebGL. On low-performance devices or outdated browsers, this effect may slow down the site or display incorrectly.

To disable the cursor locally, go to the root page app/page.tsx and disable the <ShadowCursor /> component

This site is completely made using VW units (view width). More