https://github.com/prakhar-002/3d-animation-site

Craft ✏️ intricate 3D animations effortlessly 💫 with our Canvas-based web app 🖥️ , focusing on a single element 💎. Streamlined interface, and real-time rendering ⌚ empower users to unleash their creativity 🪄 with simplicity 🕊️ and depth ☄️.
https://github.com/prakhar-002/3d-animation-site

3d canvas frame front-end-development html-css-javascript website

Last synced: 7 months ago
JSON representation

Craft ✏️ intricate 3D animations effortlessly 💫 with our Canvas-based web app 🖥️ , focusing on a single element 💎. Streamlined interface, and real-time rendering ⌚ empower users to unleash their creativity 🪄 with simplicity 🕊️ and depth ☄️.

• Host: GitHub
• URL: https://github.com/prakhar-002/3d-animation-site
• Owner: Prakhar-002
• Created: 2024-06-03T17:53:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-24T11:25:49.000Z (7 months ago)
• Last Synced: 2025-03-24T12:35:30.714Z (7 months ago)
• Topics: 3d, canvas, frame, front-end-development, html-css-javascript, website
• Language: JavaScript
• Homepage: https://3d-animation-site.netlify.app/
• Size: 68.3 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

# **CYBER FICTION** - A 3D-Animation-site 🍥

**Welcome to our 3D Animation Web App!** powered by `Canvas, Locomotive css, Locomotive JS, G-SAP, and Scroll-Trigger`. This application enables you to create **dynamic and immersive 3D animations directly in your web browser**.

> Apologies for the slow site loading due to canvas frame rendering.

 


 ➥ Live Demo






# Screenshots ⛩️

![cyber fiction 3d](https://github.com/user-attachments/assets/052bc668-716b-44fe-8798-5f0e8e8f028c)

# Tech Stack 👨🏻‍💻

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

# Features 💎

- `Canvas-based Rendering` ➤ **Utilizes** `HTML5/JAVASCRIPT` **Canvas for real-time 3D rendering**.

- `Locomotive CSS` ➤ **Smooth scroll animations** for a `visually appealing experience`.

- `Locomotive JS` ➤  **Lightweight scroll animation** `library for fluid animations`.

- `G-SAP` ➤ **GreenSock Animation Platform** for `powerful, smooth animations`.

- `Scroll-Trigger` ➤ **GSAP plugin** for `triggering animations based on scroll positions`.

# Deployment 🛫

**To 🏃🏻‍♂️ locally this CYBER FICTION - A 3D-Animation-site** *run this command on your git bash*

`For window 🍃`

```bash

  git clone https://github.com/Prakhar-002/3D-Animation-Site.git

```

`For Linux and macOS 🌿`

```bash

  sudo git clone https://github.com/Prakhar-002/3D-Animation-Site.git

```