This is a clone of the ThirtysixStudio website, created to showcase my skills and for learning purposes. The main feature of this project is the interactive experience triggered when the text "ThirtysixStudio" is clicked. Upon clicking, 3D elements and effects pop up on the screen, with the transition created by randomly changing 2D images.
Visit the original ThirtysixStudio website
- React - For building the user interface.
- GSAP - For animations and smooth transitions.
- Locomotive Scroll - For smooth scrolling effects.
- Tailwind CSS - For responsive styling with a utility-first approach.
- Vite - For fast development and bundling.
- Interactive 3D Elements: When the text "ThirtysixStudio" is clicked, dynamic 3D effects pop up, which are triggered by the random switching of 2D images. The transition is smooth and engaging, making for a visually interactive experience.
- Canvas-based Rendering: All images used in the animations are linked in the
canvas.jsfile and rendered dynamically using a<canvas>element. These images are extracted from the original ThirtysixStudio website. - Custom Animations: Using GSAP, the 2D images are animated to create 3D effects, giving a unique experience each time the text is clicked.
This project was created for learning purposes and to showcase my skills in web development. By cloning the ThirtysixStudio website and adding my own interactive effects, I was able to explore and implement new technologies such as GSAP, Locomotive Scroll, and React with Tailwind CSS.
-
Clone the repository:
git clone https://github.com/yourusername/thirtysixstudio-clone.git
-
Navigate to the project directory:
cd thirtysixstudio-clone -
Install the dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and go to
http://localhost:5173to see the project in action.
Feel free to explore the project and check out the unique 3D effects triggered when you click on "ThirtysixStudio"!