relaced the gif with orb animation (#439)

* relaced the gif with orb animation used the compiled CSS of the orb logo from the https://github.com/newfold-labs/css-wonder-animation * fix linting * fixed linting * changed to scss * fixed linting * changed to 40px * Deleted placeholder sitegen animated gif
newfold-labs · Jan 31, 2024 · 1a03588 · 1a03588
1 parent aa8d9d9
commit 1a03588
Show file tree

Hide file tree

Showing 10 changed files with 252 additions and 22 deletions.
diff --git a/src/OnboardingSPA/components/Heading/AIHeading/index.js b/src/OnboardingSPA/components/Heading/AIHeading/index.js
@@ -1,9 +1,9 @@
 import { memo } from '@wordpress/element';
-
+import OrbAnimation from '../../OrbAnimation';
 const AIHeading = ( { title } ) => {
 	return (
 		<div className={ 'ai-heading' }>
-			<div className={ 'ai-heading--icon' } />
+			<OrbAnimation height={ `40px` } />
 			<div className={ 'ai-heading--title' }>{ title }</div>
 		</div>
 	);

diff --git a/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss b/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss
@@ -5,14 +5,8 @@
 	margin: 16px;
 	align-items: center;
 
-	&--icon {
-		width: 50px;
-		margin-right: 4px;
-		height: 50px;
-		background-size: 200%;
-		background-position: center;
-		background-repeat: no-repeat;
-		background-image: var(--sitegen-ai-animation);
+	.wnd-ai-logo {
+		margin-right: 5px;
 	}
 
 	&--title {

diff --git a/src/OnboardingSPA/components/OrbAnimation/index.js b/src/OnboardingSPA/components/OrbAnimation/index.js
@@ -0,0 +1,22 @@
+const OrbAnimation = ( { height = '80px' } ) => {
+	// Inline style to handle custom properties
+	const logoStyle = {
+		'--wnd-ai-logo-size': height,
+		height: `var(--wnd-ai-logo-size, ${ height })`,
+	};
+
+	return (
+		<span className="wnd-ai-logo" style={ logoStyle }>
+			<span className="wnd-ai-logo__circle wnd-ai-logo__circle--bg"></span>
+			<span className="wnd-ai-logo__circle wnd-ai-logo__circle--1"></span>
+			<span className="wnd-ai-logo__circle wnd-ai-logo__circle--2"></span>
+			<span className="wnd-ai-logo__circle wnd-ai-logo__circle--3"></span>
+			<span className="wnd-ai-logo__circle wnd-ai-logo__circle--4"></span>
+			<span className="wnd-ai-logo__circle wnd-ai-logo__circle--5"></span>
+			<span className="wnd-ai-logo__circle wnd-ai-logo__circle--6"></span>
+			<span className="wnd-ai-logo__spinner"></span>
+		</span>
+	);
+};
+
+export default OrbAnimation;
diff --git a/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss b/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss
@@ -0,0 +1,220 @@
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable declaration-block-no-duplicate-properties */
+:root {
+	--wnd-ai-logo-speed: 0.6; /* range from 0-1, lower the slower */
+	--wnd-ai-logo-size: 100px;
+	--wnd-ai-logo-glow-color: #8b00ff;
+	--wnd-ai-logo-glow-opacity: 0.45;
+	--wnd-ai-logo-gradient: #fff7f3, #fde4e1, #fccfcc, #fbb5bc, #f993b0, #f369a3, #e03f98, #c11889, #360261, #360261, #360261;
+	--wnd-ai-logo-cutout-size: 55%;
+	--wnd-ai-logo-loading-gradient: linear-gradient(25deg, #fff 10%, rgba(0, 0, 0, 0) 60%), linear-gradient(50deg, #fff 10%, rgba(0, 0, 0, 0) 20%);
+	--wnd-ai-logo-mask-composite-webkit: destination-out;
+	--wnd-ai-logo-mask-composite: exclude;
+}
+
+@keyframes wnd-ai-logo-rotate {
+
+	0% {
+		transform: rotateZ(0deg);
+	}
+
+	100% {
+		transform: rotateZ(360deg);
+	}
+}
+
+@keyframes wnd-ai-logo-pulse {
+
+	0% {
+		transform: scale(1);
+		transform: rotateZ(0deg);
+	}
+
+	50% {
+		transform: scale(1.1);
+		transform: rotateZ(180deg);
+	}
+
+	100% {
+		transform: scale(1);
+		transform: rotateZ(360deg);
+	}
+}
+
+.wnd-ai-logo {
+	position: relative;
+	height: var(--wnd-ai-logo-size, 80px);
+	aspect-ratio: 1/1;
+	transition-property: transform, filter;
+	will-change: transform, filter;
+	transition-duration: 0.8s;
+	transition-timing-function: cubic-bezier(0.47, 2, 0.41, 0.8);
+	transform: scale(1);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	filter: brightness(1.3) saturate(1);
+	user-select: none;
+
+	&__spinner {
+		position: absolute;
+		inset: 0;
+		z-index: 1;
+		pointer-events: none;
+		background: trasparent;
+		background-image: var(--wnd-ai-logo-loading-gradient);
+		mask:
+			radial-gradient(ellipse at 50% 50%, #000 calc(var(--wnd-ai-logo-cutout-size) * 1), transparent calc(var(--wnd-ai-logo-cutout-size) * 1)),
+			linear-gradient(to right, #000, #000);
+		-webkit-mask-composite: var(--wnd-ai-logo-mask-composite-webkit);
+		mask-composite: var(--wnd-ai-logo-mask-composite);
+		border-radius: 50%;
+		animation: wnd-ai-logo-rotate 0.85s linear infinite;
+		opacity: 0;
+		transition: filter 0.3s ease-in, opacity 0.3s ease-in-out;
+		mix-blend-mode: overlay;
+		filter: blur(2px);
+
+		&::after,
+		&::before {
+			content: "";
+			position: absolute;
+			inset: 0;
+			background-image: var(--wnd-ai-logo-loading-gradient);
+			border-radius: 50%;
+			filter: blur(2px);
+		}
+	}
+
+	&__circle {
+		background: transparent;
+		background-image: linear-gradient(45deg, var(--wnd-ai-logo-gradient));
+		width: 100%;
+		height: 90%;
+		position: absolute;
+		opacity: 0.16;
+		mix-blend-mode: plus-lighter;
+		filter: brightness(1.2);
+		border-radius: 45%;
+		border: 0.01em solid rgba(255, 255, 255, 1);
+		animation: wnd-ai-logo-circle 2s linear infinite;
+		mask:
+			radial-gradient(ellipse at 50% 50%, #000 var(--wnd-ai-logo-cutout-size), transparent var(--wnd-ai-logo-cutout-size)),
+			linear-gradient(to right, #000, #000);
+		-webkit-mask-composite: var(--wnd-ai-logo-mask-composite-webkit);
+		mask-composite: var(--wnd-ai-logo-mask-composite);
+		animation: wnd-ai-logo-rotate calc(var(--wnd-ai-logo-speed, 1) * 5s) linear infinite;
+		will-change: transform;
+		transition: all 0.3s ease-in;
+
+		&--bg {
+			box-shadow: 0 0 80px 10px var(--wnd-ai-logo-glow-color), 0 0 20px 0 var(--wnd-ai-logo-glow-color);
+			opacity: var(--wnd-ai-logo-glow-opacity);
+			background: var(--wnd-ai-logo-glow-color);
+			border: none;
+			mask: none !important;
+			animation: none;
+			filter: blur(32px);
+			mask: none !important;
+		}
+
+		&--1 {
+			transform: rotateZ(15deg);
+			animation-duration: calc(var(--wnd-ai-logo-speed, 1) * 4s);
+			animation-direction: reverse;
+		}
+
+		&--2 {
+			transform: rotateZ(30deg);
+			animation-duration: calc(var(--wnd-ai-logo-speed, 1) * 4.5s);
+		}
+
+		&--3 {
+			transform: rotateZ(45deg);
+			animation-duration: calc(var(--wnd-ai-logo-speed, 1) * 5s);
+			animation-direction: reverse;
+		}
+
+		&--4 {
+			transform: rotateZ(60deg);
+			animation-duration: calc(var(--wnd-ai-logo-speed, 1) * 6s);
+		}
+
+		&--5 {
+			transform: rotateZ(75deg);
+			animation-duration: calc(var(--wnd-ai-logo-speed, 1) * 7s);
+		}
+
+		&--6 {
+			transform: rotateZ(-90deg);
+			animation-duration: calc(var(--wnd-ai-logo-speed, 1) * 8s);
+			animation-direction: reverse;
+		}
+	}
+}
+
+.light {
+
+	.wnd-ai-logo {
+
+		filter: brightness(1.1) saturate(1.2);
+
+		&__circle {
+
+			&--bg {
+				opacity: 0.2;
+			}
+		}
+	}
+}
+
+
+/* Loading */
+body.wnd-ai-logo-loading .wnd-ai-logo {
+	transition-duration: 0.4s;
+
+	&__spinner {
+		opacity: 1;
+	}
+
+	&__circle:not(.wnd-ai-logo__circle--bg) {
+		filter: brightness(0.3) !important;
+		opacity: 0.065;
+	}
+
+	filter: brightness(1.35) saturate(1.35);
+}
+
+/* Focus & Hover */
+body:has([data-wnd-ai-logo]:focus) .wnd-ai-logo,
+body:not(.wnd-ai-logo-loading) .wnd-ai-logo:hover {
+	transform: scale(1.05);
+	filter: brightness(1.35) saturate(1.5);
+}
+
+/* Keydown */
+body.wnd-ai-logo-keydown .wnd-ai-logo.wnd-ai-logo {
+	transform: scale(1.1);
+	transition-duration: 0.4s;
+	filter: brightness(1.45) saturate(1.2);
+}
+
+
+.light {
+
+	/* Loading */
+	body.wnd-ai-logo-loading .wnd-ai-logo {
+		filter: brightness(1.5) saturate(1.3);
+
+		&__circle:not(.wnd-ai-logo__circle--bg) {
+			filter: brightness(1.2) saturate(1.2) !important;
+			opacity: 0.08;
+		}
+
+		&__spinner {
+			filter: invert(1) blur(6px);
+			opacity: 0.5;
+			mix-blend-mode: plus-darker;
+		}
+	}
+}
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
@@ -2,8 +2,7 @@ $letter-spacing: 0.5px;
 $selected-detail: #1de082;
 
 .nfd-sg-input {
-	margin-top: 25px;
-	margin-bottom: 25px;
+	margin: 25px 16px;
 	width: 100% !important;
 
 	&-box {

diff --git a/src/OnboardingSPA/static/images/sitegen/sitegen-ai-animation.gif b/src/OnboardingSPA/static/images/sitegen/sitegen-ai-animation.gif
diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js
@@ -6,6 +6,7 @@ import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen';
 import { store as nfdOnboardingStore } from '../../../store';
 import { HEADER_SITEGEN } from '../../../../constants';
 import getContents from './contents';
+import OrbAnimation from '../../../components/OrbAnimation';
 
 const SiteGenWelcome = () => {
 	const {
@@ -30,7 +31,9 @@ const SiteGenWelcome = () => {
 	return (
 		<CommonLayout className="nfd-onboarding-step--site-gen__welcome">
 			<div className="nfd-onboarding-step--site-gen__welcome__container">
-				<div className="nfd-onboarding-step--site-gen__welcome__container__animation"></div>
+				<div className="nfd-onboarding-step--site-gen__welcome__container__orb">
+					<OrbAnimation height={ `100px` } />
+				</div>
 				<div className="nfd-onboarding-step--site-gen__welcome__container__heading">
 					<div className="nfd-onboarding-step--site-gen__welcome__container__heading__image"></div>
 					<p className="nfd-onboarding-step--site-gen__welcome__container__heading__text">

diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss
@@ -22,14 +22,6 @@
 					width: 1000px;
 				}
 
-				&__animation {
-					background-image: var(--sitegen-ai-animation);
-					background-repeat: no-repeat;
-					background-size: cover;
-					width: 250px;
-					height: 183px;
-				}
-
 				&__heading {
 					padding: 0;
 					width: 100%;

diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss
@@ -39,7 +39,6 @@ body {
 
 	--sitegen-ai-icon: url(../static/icons/sitegen/sitegen-ai-icon.svg);
 	--sitegen-image-upload-icon: url(../static/icons/sitegen/image-upload.svg);
-	--sitegen-ai-animation: url(../static/images/sitegen/sitegen-ai-animation.gif);
 	--sitegen-toggle-theme-icon-dark: url(../static/icons/sitegen/toggle-dark-mode.svg);
 	--sitegen-toggle-theme-icon-light: url(../static/icons/sitegen/toggle-light-mode.png);
 	--sitegen-favorite: url(../static/icons/sitegen/favorite.svg);

diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
@@ -63,6 +63,7 @@
 @import "../components/Sidebar/components/SitegenEditorPatterns/stylesheet";
 @import "../components/TextInput/TextAreaSiteGenDetails/stylesheet";
 @import "../components/TextInput/TextInputSiteGenDetails/stylesheet";
+@import "../components/OrbAnimation/stylesheet";
 
 // CSS for Pages
 @import "../steps/BasicInfo/stylesheet";