{"id":22884882,"url":"https://github.com/developer-ronnie/beeown-animated-website","last_synced_at":"2025-03-31T17:54:17.664Z","repository":{"id":266889462,"uuid":"898449690","full_name":"Developer-RONNIE/beeown-animated-website","owner":"Developer-RONNIE","description":"Built a visually captivating website featuring scroll-triggered animations, geometric transitions, and engaging video storytelling with modern feel, focusing on engaging UI/UX and smooth responsiveness, capturing the essence of 3D animated website.","archived":false,"fork":false,"pushed_at":"2024-12-09T15:44:22.000Z","size":52244,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-06T22:42:17.746Z","etag":null,"topics":["3danimation","gsap-animation","gsap-plugin","gsap-scrolltrigger","gsap-timeline","webdesign","website"],"latest_commit_sha":null,"homepage":"https://www.beeown.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Developer-RONNIE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-04T12:17:58.000Z","updated_at":"2024-12-25T02:44:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"4dde6898-7759-4b07-b494-0a7408ed493e","html_url":"https://github.com/Developer-RONNIE/beeown-animated-website","commit_stats":null,"previous_names":["developer-ronnie/beeown-animated-website"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developer-RONNIE%2Fbeeown-animated-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developer-RONNIE%2Fbeeown-animated-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developer-RONNIE%2Fbeeown-animated-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developer-RONNIE%2Fbeeown-animated-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Developer-RONNIE","download_url":"https://codeload.github.com/Developer-RONNIE/beeown-animated-website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246514050,"owners_count":20790013,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3danimation","gsap-animation","gsap-plugin","gsap-scrolltrigger","gsap-timeline","webdesign","website"],"created_at":"2024-12-13T19:29:07.810Z","updated_at":"2025-03-31T17:54:17.651Z","avatar_url":"https://github.com/Developer-RONNIE.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n    \u003ca href=\"https://beeown.com\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://github.com/Developer-RONNIE/beeown-animated-website/blob/main/public/img/banner.png\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003cbr /\u003e\n\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-React_JS-black?style=for-the-badge\u0026logoColor=white\u0026logo=react\u0026color=61DAFB\" alt=\"react.js\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-GSAP-black?style=for-the-badge\u0026logoColor=white\u0026logo=greensock\u0026color=88CE02\" alt=\"greensock\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n  \u003c/div\u003e\n\n  \u003ch3 align=\"center\"\u003e3d Animated Website\u003c/h3\u003e\n\n   \u003cdiv align=\"center\"\u003e\n     Ask me doubts related to this project on my discord channel \u003ca href=\"https://discord.gg/P2ZdEgfzTZ\" target=\"_blank\"\u003e\u003cb\u003ebuild with Ronnie\u003c/b\u003e\u003c/a\u003e  Join the devloper family!\n    \u003c/div\u003e\n\u003c/div\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🕸️ [Snippets (Code to Copy)](#snippets)\n\n\n\n\n## ⚠️ Disclaimer\n\nThis repository contains the code corresponding to an commercially used web design agency, \u003ca href=\"https://beeown.com\" target=\"_blank\"\u003e\u003cb\u003eBeeown\u003c/b\u003e\u003c/a\u003e.\n\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\n\nBuilt a visually captivating website featuring scroll-triggered animations, geometric transitions, and engaging video storytelling. Learn how to deliver a luxurious, modern feel, focusing on engaging UI/UX and smooth responsiveness, capturing the essence of 3D animated website.\n\nIf you're getting started and need assistance or face any bugs, join our active Discord community. It's a place where people help each other out.\n\n\u003ca href=\"https://discord.gg/P2ZdEgfzTZ\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/sujatagunale/EasyRead/assets/151519281/618f4872-1e10-42da-8213-1d69e486d02e\" /\u003e\u003c/a\u003e\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- GSAP\n- React.js\n- Tailwind CSS\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Scroll-Based Animations**: Dynamic animations triggered by scrolling for a more engaging user experience.\n\n👉 **Clip Path Shaped Animations**: Unique geometric transitions using CSS clip-paths to create visually stunning effects.\n\n👉 **3D Hover Effects**: Interactive 3D transformations that respond to user interactions for a modern feel.\n\n👉 **Video Transitions**: Seamlessly integrated video elements to enhance storytelling and flow.\n\n👉 **Smooth UI/UX**: Polished interfaces with buttery-smooth interactions for an intuitive user journey.\n\n👉 **Completely Responsive**: Flawless adaptation across all devices, ensuring a consistent experience.\n\nand many more, including code architecture and reusability\n\n## \u003ca name=\"quick-start\"\u003e🤸 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https://github.com/Developer-RONNIE/beeown-animated-website.git\ncd beeown-animated-website\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser to view the project.\n\n## \u003ca name=\"snippets\"\u003e🕸️ Snippets\u003c/a\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eindex.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\n@import url(\"https://fonts.cdnfonts.com/css/general-sans\");\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nbody {\n  width: 100dvw;\n  overflow-x: hidden;\n  background-color: #dfdff0;\n  font-family: \"General Sans\", sans-serif;\n}\n\n@layer base {\n  @font-face {\n    font-family: \"circular-web\";\n    src: url(\"/fonts/circularweb-book.woff2\") format(\"woff2\");\n  }\n\n  @font-face {\n    font-family: \"general\";\n    src: url(\"/fonts/general.woff2\") format(\"woff2\");\n  }\n\n  @font-face {\n    font-family: \"robert-medium\";\n    src: url(\"/fonts/robert-medium.woff2\") format(\"woff2\");\n  }\n\n  @font-face {\n    font-family: \"robert-regular\";\n    src: url(\"/fonts/robert-regular.woff2\") format(\"woff2\");\n  }\n\n  @font-face {\n    font-family: \"zentry\";\n    src: url(\"/fonts/zentry-regular.woff2\") format(\"woff2\");\n  }\n}\n\n@layer utilities {\n  .border-hsla {\n    @apply border border-white/20;\n  }\n\n  .nav-hover-btn {\n    @apply relative ms-10 font-general text-xs uppercase text-blue-50 after:absolute after:-bottom-0.5 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-neutral-800 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100 dark:after:bg-white cursor-pointer;\n  }\n\n  .floating-nav {\n    @apply bg-black rounded-lg border;\n  }\n\n  .absolute-center {\n    @apply absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%];\n  }\n\n  .flex-center {\n    @apply flex justify-center items-center;\n  }\n\n  .mask-clip-path {\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n  }\n\n  .special-font b {\n    font-family: \"Zentry\";\n    font-feature-settings: \"ss01\" on;\n  }\n\n  .hero-heading {\n    @apply uppercase font-zentry font-black text-5xl sm:right-10 sm:text-7xl md:text-9xl lg:text-[12rem];\n  }\n\n  .about-subtext {\n    @apply absolute bottom-[-80dvh] left-1/2 w-full max-w-96 -translate-x-1/2 text-center font-circular-web text-lg md:max-w-[34rem];\n  }\n\n  .about-image {\n    @apply absolute left-1/2 top-0 z-20 h-[60vh] w-96 origin-center -translate-x-1/2 overflow-hidden rounded-3xl md:w-[30vw];\n  }\n\n  .animated-title {\n    @apply flex flex-col gap-1 text-7xl uppercase leading-[.8] text-white sm:px-32 md:text-[6rem];\n  }\n\n  .animated-word {\n    @apply special-font font-zentry font-black opacity-0;\n    transform: translate3d(10px, 51px, -60px) rotateY(60deg) rotateX(-40deg);\n    transform-origin: 50% 50% -150px !important;\n    will-change: opacity, transform;\n  }\n\n  .bento-tilt_1 {\n    @apply relative border-hsla col-span-2 overflow-hidden rounded-md transition-transform duration-300 ease-out;\n  }\n\n  .bento-tilt_2 {\n    @apply relative col-span-1 row-span-1 overflow-hidden rounded-md transition-transform duration-300 ease-out;\n  }\n\n  .bento-title {\n    @apply uppercase md:text-6xl text-4xl font-black font-zentry;\n  }\n\n  .story-img-container {\n    @apply relative md:h-dvh h-[90vh] w-full;\n    filter: url(\"#flt_tag\");\n  }\n\n  .story-img-mask {\n    @apply absolute left-0 top-0 size-full overflow-hidden md:left-[20%] md:top-[-10%] md:size-4/5;\n    clip-path: polygon(4% 0, 83% 21%, 100% 73%, 0% 100%);\n  }\n\n  .story-img-content {\n    @apply absolute w-full md:h-dvh h-[50dvh] opacity-100 left-10 top-16 md:left-0 md:top-10 lg:left-[-300px] lg:top-[-100px];\n    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);\n  }\n\n  .gallery-img-container {\n    @apply size-64 overflow-hidden bg-violet-300;\n  }\n\n  .gallery-img {\n    @apply size-full bg-cover;\n  }\n\n  .gallery-img-4 {\n    @apply sm:size-80 md:h-96 md:w-[25rem] rounded-lg;\n  }\n\n  .sword-man-clip-path {\n    clip-path: polygon(16% 0, 89% 15%, 75% 100%, 0 97%);\n  }\n\n  .contact-clip-path-1 {\n    clip-path: polygon(25% 0%, 74% 0, 69% 64%, 34% 73%);\n  }\n\n  .contact-clip-path-2 {\n    clip-path: polygon(29% 15%, 85% 30%, 50% 100%, 10% 64%);\n  }\n}\n\n.indicator-line {\n  @apply h-1 w-px rounded-full bg-white transition-all duration-200 ease-in-out;\n}\n\n.indicator-line.active {\n  animation: indicator-line 0.5s ease infinite;\n  animation-delay: calc(var(--animation-order) * 0.1s);\n}\n\n@keyframes indicator-line {\n  0% {\n    height: 4px;\n    transform: translateY(-0px);\n  }\n  50% {\n    height: 16px;\n    transform: translateY(-4px);\n  }\n  100% {\n    height: 4px;\n    transform: translateY(-0px);\n  }\n}\n\n/* From Uiverse.io by G4b413l */\n/* https://uiverse.io/G4b413l/tidy-walrus-92 */\n.three-body {\n  --uib-size: 35px;\n  --uib-speed: 0.8s;\n  --uib-color: #5d3fd3;\n  position: relative;\n  display: inline-block;\n  height: var(--uib-size);\n  width: var(--uib-size);\n  animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;\n}\n\n.three-body__dot {\n  position: absolute;\n  height: 100%;\n  width: 30%;\n}\n\n.three-body__dot:after {\n  content: \"\";\n  position: absolute;\n  height: 0%;\n  width: 100%;\n  padding-bottom: 100%;\n  background-color: var(--uib-color);\n  border-radius: 50%;\n}\n\n.three-body__dot:nth-child(1) {\n  bottom: 5%;\n  left: 0;\n  transform: rotate(60deg);\n  transform-origin: 50% 85%;\n}\n\n.three-body__dot:nth-child(1)::after {\n  bottom: 0;\n  left: 0;\n  animation: wobble1 var(--uib-speed) infinite ease-in-out;\n  animation-delay: calc(var(--uib-speed) * -0.3);\n}\n\n.three-body__dot:nth-child(2) {\n  bottom: 5%;\n  right: 0;\n  transform: rotate(-60deg);\n  transform-origin: 50% 85%;\n}\n\n.three-body__dot:nth-child(2)::after {\n  bottom: 0;\n  left: 0;\n  animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15)\n    ease-in-out;\n}\n\n.three-body__dot:nth-child(3) {\n  bottom: -5%;\n  left: 0;\n  transform: translateX(116.666%);\n}\n\n.three-body__dot:nth-child(3)::after {\n  top: 0;\n  left: 0;\n  animation: wobble2 var(--uib-speed) infinite ease-in-out;\n}\n\n@keyframes spin78236 {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes wobble1 {\n  0%,\n  100% {\n    transform: translateY(0%) scale(1);\n    opacity: 1;\n  }\n\n  50% {\n    transform: translateY(-66%) scale(0.65);\n    opacity: 0.8;\n  }\n}\n\n@keyframes wobble2 {\n  0%,\n  100% {\n    transform: translateY(0%) scale(1);\n    opacity: 1;\n  }\n\n  50% {\n    transform: translateY(66%) scale(0.65);\n    opacity: 0.8;\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003ecomponents/RoundedCorners.jsx\u003c/code\u003e\u003c/summary\u003e\n\n```js\nimport React from 'react'\n\nconst RoundedCorners = () =\u003e {\n  return (\n    \u003csvg\n      className=\"invisible absolute size-0\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    \u003e\n      \u003cdefs\u003e\n        \u003cfilter id=\"flt_tag\"\u003e\n          \u003cfeGaussianBlur\n            in=\"SourceGraphic\"\n            stdDeviation=\"8\"\n            result=\"blur\"\n          /\u003e\n          \u003cfeColorMatrix\n            in=\"blur\"\n            mode=\"matrix\"\n            values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\"\n            result=\"flt_tag\"\n          /\u003e\n          \u003cfeComposite\n            in=\"SourceGraphic\"\n            in2=\"flt_tag\"\n            operator=\"atop\"\n          /\u003e\n        \u003c/filter\u003e\n      \u003c/defs\u003e\n    \u003c/svg\u003e\n  )\n}\nexport default RoundedCorners\n```\n\n\u003c/details\u003e\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloper-ronnie%2Fbeeown-animated-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeveloper-ronnie%2Fbeeown-animated-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloper-ronnie%2Fbeeown-animated-website/lists"}