revert website high contrast redesign
This commit is contained in:
boos
@@ -27,20 +27,19 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
}
|
||||
|
||||
gsap.set("[data-motion]", { autoAlpha: 1 });
|
||||
gsap.set(".signal-line, .status-node", { transformOrigin: "center" });
|
||||
gsap.set("[data-motion-line]", { transformOrigin: "center" });
|
||||
|
||||
const matchMedia = gsap.matchMedia();
|
||||
|
||||
matchMedia.add("(prefers-reduced-motion: reduce)", () => {
|
||||
gsap.set("[data-motion], .signal-line, .status-node, .boot-screen", {
|
||||
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
|
||||
autoAlpha: 1,
|
||||
clearProps: "transform",
|
||||
});
|
||||
gsap.set(".boot-screen", { display: "none" });
|
||||
});
|
||||
|
||||
matchMedia.add("(prefers-reduced-motion: no-preference)", () => {
|
||||
const heroTitle = root.querySelector<HTMLElement>(".hero-title");
|
||||
const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
|
||||
const splitTitle = heroTitle
|
||||
? SplitText.create(heroTitle, {
|
||||
type: "words",
|
||||
@@ -51,14 +50,10 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
|
||||
const intro = gsap.timeline({ defaults: { ease: bossEase } });
|
||||
intro
|
||||
.from(".boot-brand", { autoAlpha: 0, y: 12, duration: 0.34 })
|
||||
.from(".boot-lines p", { autoAlpha: 0, y: 8, duration: 0.28, stagger: 0.08 }, "-=0.1")
|
||||
.to(".boot-screen", { autoAlpha: 0, yPercent: -7, duration: 0.7, ease: "power3.inOut", delay: 0.16 })
|
||||
.set(".boot-screen", { display: "none" })
|
||||
.from("[data-motion='nav']", { autoAlpha: 0, y: -18, duration: 0.7 })
|
||||
.from(".section-kicker", { autoAlpha: 0, y: 18, duration: 0.56 }, "-=0.18")
|
||||
.from(
|
||||
splitTitle?.words ?? ".hero-title",
|
||||
splitTitle?.words ?? ".hero-copy h1",
|
||||
{
|
||||
autoAlpha: 0,
|
||||
yPercent: 92,
|
||||
@@ -69,23 +64,31 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
},
|
||||
"-=0.28",
|
||||
)
|
||||
.from(".hero-lede", { autoAlpha: 0, y: 22, duration: 0.7 }, "-=0.5")
|
||||
.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("[data-motion='hero-terminal']", { autoAlpha: 0, y: 34, rotateX: 5, duration: 0.9 }, "-=0.72")
|
||||
.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(".hero-stat", { autoAlpha: 0, y: 16, duration: 0.48, stagger: 0.07 }, "-=0.3");
|
||||
.from("[data-motion='node']", { autoAlpha: 0, scale: 0.94, duration: 0.45, stagger: 0.08 }, "-=0.3");
|
||||
|
||||
gsap.to(".status-node", {
|
||||
gsap.to("[data-motion-orbit]", {
|
||||
rotate: 360,
|
||||
duration: 28,
|
||||
ease: "none",
|
||||
repeat: -1,
|
||||
});
|
||||
|
||||
gsap.to("[data-motion-dot]", {
|
||||
scale: 1.18,
|
||||
autoAlpha: 0.72,
|
||||
duration: 1.35,
|
||||
duration: 1.4,
|
||||
ease: "sine.inOut",
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
stagger: 0.18,
|
||||
stagger: 0.24,
|
||||
});
|
||||
|
||||
gsap.to(".signal-line", {
|
||||
gsap.to("[data-motion-line]", {
|
||||
strokeDashoffset: -160,
|
||||
duration: 5.8,
|
||||
ease: "none",
|
||||
@@ -93,26 +96,19 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
stagger: 0.28,
|
||||
});
|
||||
|
||||
gsap.to(".ticker-track", {
|
||||
xPercent: -50,
|
||||
duration: 28,
|
||||
ease: "none",
|
||||
repeat: -1,
|
||||
});
|
||||
|
||||
const heroSection = root.querySelector<HTMLElement>(".hero-section");
|
||||
const heroTerminal = root.querySelector<HTMLElement>(".hero-terminal");
|
||||
const routeRows = gsap.utils.toArray<HTMLElement>(".terminal-row", root);
|
||||
const terminalTiles = gsap.utils.toArray<HTMLElement>(".hero-stat", root);
|
||||
const heroConsole = root.querySelector<HTMLElement>(".hero-console");
|
||||
const routeRows = gsap.utils.toArray<HTMLElement>(".route-row", root);
|
||||
const consoleTiles = gsap.utils.toArray<HTMLElement>(".console-metrics > div, .mini-grid > div", root);
|
||||
|
||||
if (heroSection && heroTerminal) {
|
||||
gsap.set(heroTerminal, {
|
||||
if (heroSection && heroConsole) {
|
||||
gsap.set(heroConsole, {
|
||||
"--scan-y": "12%",
|
||||
"--scan-opacity": 0.16,
|
||||
"--grid-opacity": 0.16,
|
||||
} as gsap.TweenVars);
|
||||
|
||||
gsap.to(heroTerminal, {
|
||||
gsap.to(heroConsole, {
|
||||
yPercent: -4,
|
||||
scale: 0.985,
|
||||
ease: "none",
|
||||
@@ -124,10 +120,10 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
},
|
||||
});
|
||||
|
||||
gsap.to(heroTerminal, {
|
||||
gsap.to(heroConsole, {
|
||||
"--scan-y": "88%",
|
||||
"--scan-opacity": 0.34,
|
||||
"--grid-opacity": 0.32,
|
||||
"--scan-opacity": 0.38,
|
||||
"--grid-opacity": 0.34,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: heroSection,
|
||||
@@ -138,26 +134,26 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
} as gsap.TweenVars);
|
||||
|
||||
gsap.to(routeRows, {
|
||||
x: (index) => (index % 2 === 0 ? -6 : 6),
|
||||
x: (index) => (index % 2 === 0 ? -4 : 4),
|
||||
y: (index) => -2 - index * 0.9,
|
||||
autoAlpha: (index) => 1 - index * 0.015,
|
||||
ease: "none",
|
||||
stagger: 0.03,
|
||||
scrollTrigger: {
|
||||
trigger: heroTerminal,
|
||||
trigger: heroConsole,
|
||||
start: "top 76%",
|
||||
end: "bottom 18%",
|
||||
scrub: true,
|
||||
},
|
||||
});
|
||||
|
||||
gsap.to(terminalTiles, {
|
||||
y: -10,
|
||||
gsap.to(consoleTiles, {
|
||||
y: -12,
|
||||
autoAlpha: 0.9,
|
||||
ease: "none",
|
||||
stagger: { each: 0.035, from: "end" },
|
||||
scrollTrigger: {
|
||||
trigger: heroTerminal,
|
||||
trigger: heroConsole,
|
||||
start: "top 72%",
|
||||
end: "bottom 24%",
|
||||
scrub: true,
|
||||
|
||||
Reference in New Issue
Block a user