feat: polish BossAI website motion
This commit is contained in:
boos
+175
-14
@@ -3,9 +3,14 @@
|
||||
import { type ReactNode, useRef } from "react";
|
||||
import gsap from "gsap";
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import { CustomEase } from "gsap/CustomEase";
|
||||
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { SplitText } from "gsap/SplitText";
|
||||
|
||||
gsap.registerPlugin(useGSAP, ScrollTrigger);
|
||||
gsap.registerPlugin(useGSAP, ScrollTrigger, ScrollToPlugin, SplitText, CustomEase);
|
||||
|
||||
const bossEase = CustomEase.create("boss-ease", "M0,0 C0.18,0.84 0.32,1 1,1");
|
||||
|
||||
type BossAiMotionProps = {
|
||||
children: ReactNode;
|
||||
@@ -16,21 +21,54 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
const root = scopeRef.current;
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
gsap.set("[data-motion]", { autoAlpha: 1 });
|
||||
gsap.set("[data-motion-line]", { transformOrigin: "center" });
|
||||
|
||||
if (reduceMotion) {
|
||||
return;
|
||||
}
|
||||
const matchMedia = gsap.matchMedia();
|
||||
|
||||
const intro = gsap.timeline({ defaults: { ease: "power3.out" } });
|
||||
matchMedia.add("(prefers-reduced-motion: reduce)", () => {
|
||||
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
|
||||
autoAlpha: 1,
|
||||
clearProps: "transform",
|
||||
});
|
||||
});
|
||||
|
||||
matchMedia.add("(prefers-reduced-motion: no-preference)", () => {
|
||||
const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
|
||||
const splitTitle = heroTitle
|
||||
? SplitText.create(heroTitle, {
|
||||
type: "words",
|
||||
aria: "auto",
|
||||
wordsClass: "hero-word",
|
||||
})
|
||||
: null;
|
||||
|
||||
const intro = gsap.timeline({ defaults: { ease: bossEase } });
|
||||
intro
|
||||
.from("[data-motion='nav']", { autoAlpha: 0, y: -18, duration: 0.7 })
|
||||
.from("[data-motion='hero-copy']", { autoAlpha: 0, y: 36, duration: 0.9 }, "-=0.35")
|
||||
.from("[data-motion='hero-console']", { autoAlpha: 0, y: 34, rotateX: 5, duration: 0.9 }, "-=0.65")
|
||||
.from("[data-motion='route-row']", { autoAlpha: 0, x: 24, duration: 0.55, stagger: 0.08 }, "-=0.45")
|
||||
.from(".section-kicker", { autoAlpha: 0, y: 18, duration: 0.56 }, "-=0.18")
|
||||
.from(
|
||||
splitTitle?.words ?? ".hero-copy h1",
|
||||
{
|
||||
autoAlpha: 0,
|
||||
yPercent: 92,
|
||||
rotateX: -18,
|
||||
transformOrigin: "50% 100%",
|
||||
duration: 0.82,
|
||||
stagger: { each: 0.035, from: "start" },
|
||||
},
|
||||
"-=0.28",
|
||||
)
|
||||
.from(".hero-copy p", { autoAlpha: 0, y: 22, duration: 0.7 }, "-=0.5")
|
||||
.from(".hero-actions > *", { autoAlpha: 0, y: 14, duration: 0.46, stagger: 0.08 }, "-=0.42")
|
||||
.from(".hero-proof > div", { autoAlpha: 0, y: 16, duration: 0.5, stagger: 0.07 }, "-=0.28")
|
||||
.from("[data-motion='hero-console']", { autoAlpha: 0, y: 34, rotateX: 5, duration: 0.9 }, "-=0.78")
|
||||
.from("[data-motion='route-row']", { autoAlpha: 0, x: 24, duration: 0.55, stagger: 0.08 }, "-=0.48")
|
||||
.from("[data-motion='node']", { autoAlpha: 0, scale: 0.94, duration: 0.45, stagger: 0.08 }, "-=0.3");
|
||||
|
||||
gsap.to("[data-motion-orbit]", {
|
||||
@@ -62,8 +100,8 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
gsap.from(section, {
|
||||
autoAlpha: 0,
|
||||
y: 42,
|
||||
duration: 0.8,
|
||||
ease: "power3.out",
|
||||
duration: 0.82,
|
||||
ease: bossEase,
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: "top 82%",
|
||||
@@ -72,14 +110,17 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
});
|
||||
});
|
||||
|
||||
gsap.utils.toArray<HTMLElement>("[data-motion='card']").forEach((card, index) => {
|
||||
gsap.utils
|
||||
.toArray<HTMLElement>("[data-motion='card']")
|
||||
.filter((card) => !card.closest(".hero-section"))
|
||||
.forEach((card, index) => {
|
||||
gsap.from(card, {
|
||||
autoAlpha: 0,
|
||||
y: 28,
|
||||
scale: 0.97,
|
||||
duration: 0.62,
|
||||
delay: index * 0.04,
|
||||
ease: "power3.out",
|
||||
delay: (index % 4) * 0.04,
|
||||
ease: bossEase,
|
||||
scrollTrigger: {
|
||||
trigger: card,
|
||||
start: "top 88%",
|
||||
@@ -87,6 +128,22 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const cleanupAnchors = setupSmoothAnchors(root);
|
||||
const cleanupActiveNav = setupActiveNavigation(root);
|
||||
const cleanupMagneticCards = window.matchMedia("(hover: hover) and (pointer: fine)").matches
|
||||
? setupMagneticCards(root)
|
||||
: () => undefined;
|
||||
|
||||
return () => {
|
||||
cleanupMagneticCards();
|
||||
cleanupActiveNav();
|
||||
cleanupAnchors();
|
||||
splitTitle?.revert();
|
||||
};
|
||||
});
|
||||
|
||||
return () => matchMedia.revert();
|
||||
},
|
||||
{ scope: scopeRef },
|
||||
);
|
||||
@@ -97,3 +154,107 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function setupSmoothAnchors(root: HTMLElement) {
|
||||
const anchors = gsap.utils.toArray<HTMLAnchorElement>("a[href^='#']", root);
|
||||
|
||||
const cleanups = anchors.map((anchor) => {
|
||||
const onClick = (event: MouseEvent) => {
|
||||
const href = anchor.getAttribute("href");
|
||||
const targetId = href?.slice(1);
|
||||
const target = targetId ? document.getElementById(targetId) : null;
|
||||
if (!href || !target) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
window.history.pushState(null, "", href);
|
||||
gsap.to(window, {
|
||||
duration: 0.92,
|
||||
ease: bossEase,
|
||||
overwrite: "auto",
|
||||
scrollTo: { y: target, offsetY: 22 },
|
||||
});
|
||||
};
|
||||
|
||||
anchor.addEventListener("click", onClick);
|
||||
return () => anchor.removeEventListener("click", onClick);
|
||||
});
|
||||
|
||||
return () => cleanups.forEach((cleanup) => cleanup());
|
||||
}
|
||||
|
||||
function setupActiveNavigation(root: HTMLElement) {
|
||||
const links = gsap.utils.toArray<HTMLAnchorElement>(".nav-links a[href^='#']", root);
|
||||
const linkById = new Map(
|
||||
links
|
||||
.map((link) => [link.getAttribute("href")?.slice(1), link] as const)
|
||||
.filter((entry): entry is readonly [string, HTMLAnchorElement] => Boolean(entry[0])),
|
||||
);
|
||||
|
||||
const setActive = (id: string) => {
|
||||
links.forEach((link) => link.classList.toggle("is-active", linkById.get(id) === link));
|
||||
};
|
||||
|
||||
const triggers = gsap.utils
|
||||
.toArray<HTMLElement>("section[id]", root)
|
||||
.filter((section) => linkById.has(section.id))
|
||||
.map((section) =>
|
||||
ScrollTrigger.create({
|
||||
trigger: section,
|
||||
start: "top 42%",
|
||||
end: "bottom 42%",
|
||||
onEnter: () => setActive(section.id),
|
||||
onEnterBack: () => setActive(section.id),
|
||||
}),
|
||||
);
|
||||
|
||||
return () => {
|
||||
triggers.forEach((trigger) => trigger.kill());
|
||||
links.forEach((link) => link.classList.remove("is-active"));
|
||||
};
|
||||
}
|
||||
|
||||
function setupMagneticCards(root: HTMLElement) {
|
||||
const cards = gsap.utils.toArray<HTMLElement>("[data-motion='card']", root);
|
||||
|
||||
const cleanups = cards.map((card) => {
|
||||
const onPointerMove = (event: PointerEvent) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const xRatio = (event.clientX - rect.left) / rect.width - 0.5;
|
||||
const yRatio = (event.clientY - rect.top) / rect.height - 0.5;
|
||||
|
||||
gsap.to(card, {
|
||||
x: xRatio * 10,
|
||||
y: yRatio * 10,
|
||||
rotateX: yRatio * -3,
|
||||
rotateY: xRatio * 4,
|
||||
duration: 0.38,
|
||||
ease: "power3.out",
|
||||
overwrite: "auto",
|
||||
});
|
||||
};
|
||||
|
||||
const onPointerLeave = () => {
|
||||
gsap.to(card, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
rotateX: 0,
|
||||
rotateY: 0,
|
||||
duration: 0.58,
|
||||
ease: bossEase,
|
||||
overwrite: "auto",
|
||||
});
|
||||
};
|
||||
|
||||
card.addEventListener("pointermove", onPointerMove);
|
||||
card.addEventListener("pointerleave", onPointerLeave);
|
||||
|
||||
return () => {
|
||||
card.removeEventListener("pointermove", onPointerMove);
|
||||
card.removeEventListener("pointerleave", onPointerLeave);
|
||||
};
|
||||
});
|
||||
|
||||
return () => cleanups.forEach((cleanup) => cleanup());
|
||||
}
|
||||
|
||||
+72
-5
@@ -63,6 +63,7 @@ a {
|
||||
|
||||
.motion-root {
|
||||
min-height: 100dvh;
|
||||
perspective: 1400px;
|
||||
}
|
||||
|
||||
[data-motion],
|
||||
@@ -165,12 +166,14 @@ a {
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
.nav-links a:focus-visible {
|
||||
.nav-links a:focus-visible,
|
||||
.nav-links a.is-active {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-links a:hover::after,
|
||||
.nav-links a:focus-visible::after {
|
||||
.nav-links a:focus-visible::after,
|
||||
.nav-links a.is-active::after {
|
||||
opacity: 0.8;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
@@ -183,6 +186,8 @@ a {
|
||||
.solid-link,
|
||||
.primary-cta,
|
||||
.secondary-cta {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -196,6 +201,17 @@ a {
|
||||
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
|
||||
}
|
||||
|
||||
.solid-link::before,
|
||||
.primary-cta::before {
|
||||
position: absolute;
|
||||
inset: -1px auto -1px -42%;
|
||||
width: 38%;
|
||||
content: "";
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left 560ms ease;
|
||||
}
|
||||
|
||||
.ghost-link,
|
||||
.secondary-cta {
|
||||
border-color: var(--line);
|
||||
@@ -221,6 +237,13 @@ a {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.solid-link:hover::before,
|
||||
.primary-cta:hover::before,
|
||||
.solid-link:focus-visible::before,
|
||||
.primary-cta:focus-visible::before {
|
||||
left: 108%;
|
||||
}
|
||||
|
||||
.ghost-link:hover,
|
||||
.secondary-cta:hover,
|
||||
.ghost-link:focus-visible,
|
||||
@@ -274,6 +297,7 @@ a {
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.07em;
|
||||
text-wrap: balance;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.hero-copy h1 span {
|
||||
@@ -281,6 +305,11 @@ a {
|
||||
color: var(--acid);
|
||||
}
|
||||
|
||||
.hero-word {
|
||||
display: inline-block;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
max-width: 60ch;
|
||||
margin: 0;
|
||||
@@ -385,17 +414,32 @@ a {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.route-row::before,
|
||||
.console-bar::before {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
content: "";
|
||||
background: var(--acid);
|
||||
box-shadow: 0 0 20px rgba(215, 255, 77, 0.55);
|
||||
}
|
||||
|
||||
.console-bar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
justify-content: flex-start;
|
||||
border-radius: 18px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.console-bar strong {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.console-bar span,
|
||||
.route-row em,
|
||||
.console-metrics span,
|
||||
@@ -418,13 +462,21 @@ a {
|
||||
}
|
||||
|
||||
.route-row {
|
||||
position: relative;
|
||||
min-height: 58px;
|
||||
display: grid;
|
||||
grid-template-columns: 78px 1fr auto;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
border-radius: 18px;
|
||||
padding: 0 14px;
|
||||
padding: 0 14px 0 32px;
|
||||
}
|
||||
|
||||
.route-row::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 14px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.route-row span {
|
||||
@@ -437,6 +489,11 @@ a {
|
||||
color: #ffec99;
|
||||
}
|
||||
|
||||
.route-row[data-tone="hot"]::before {
|
||||
background: #ffec99;
|
||||
box-shadow: 0 0 20px rgba(255, 236, 153, 0.5);
|
||||
}
|
||||
|
||||
.route-row[data-tone="lime"] span {
|
||||
color: var(--acid);
|
||||
}
|
||||
@@ -445,6 +502,11 @@ a {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.route-row[data-tone="blue"]::before {
|
||||
background: var(--blue);
|
||||
box-shadow: 0 0 20px rgba(139, 246, 255, 0.5);
|
||||
}
|
||||
|
||||
.route-row strong,
|
||||
.console-metrics strong,
|
||||
.mini-grid strong,
|
||||
@@ -542,6 +604,7 @@ a {
|
||||
.deploy-section,
|
||||
.final-section {
|
||||
padding-block: 72px;
|
||||
scroll-margin-top: 22px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
@@ -644,7 +707,8 @@ a {
|
||||
.endpoint-card,
|
||||
.ops-card,
|
||||
.module-strip span {
|
||||
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.capability-card:hover,
|
||||
@@ -654,6 +718,9 @@ a {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--line-strong);
|
||||
background-color: rgba(255, 255, 255, 0.045);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
0 22px 54px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.api-section {
|
||||
|
||||
Reference in New Issue
Block a user