boos/BoosAPI
2
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add light website intro motion

Browse Source
This commit is contained in:
boos
2026-06-06 18:29:10 +08:00
parent def8d7a204
commit 4b757b8250
4 changed files with 276 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app/BossAiMotion.tsx
+20 -12
View File
@@ -32,10 +32,11 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
const matchMedia = gsap.matchMedia();
matchMedia.add("(prefers-reduced-motion: reduce)", () => {
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line], .boot-screen", {
autoAlpha: 1,
clearProps: "transform",
});
gsap.set(".boot-screen", { display: "none" });
});
matchMedia.add("(prefers-reduced-motion: no-preference)", () => {
@@ -50,26 +51,33 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
const intro = gsap.timeline({ defaults: { ease: bossEase } });
intro
.from("[data-motion='nav']", { autoAlpha: 0, y: -18, duration: 0.7 })
.from(".section-kicker", { autoAlpha: 0, y: 18, duration: 0.56 }, "-=0.18")
.from(".boot-frame", { y: 20, scale: 0.985, duration: 0.42, ease: "power3.out" })
.from(".boot-mark", { scale: 0.72, rotate: -16, duration: 0.36 }, "-=0.18")
.from(".boot-brand strong", { x: -8, duration: 0.32 }, "-=0.24")
.fromTo(".boot-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.56, transformOrigin: "left center" }, "-=0.12")
.from(".boot-lines p", { y: 8, duration: 0.28, stagger: 0.07 }, "-=0.2")
.fromTo(".boot-progress span", { scaleX: 0 }, { scaleX: 1, duration: 0.72, transformOrigin: "left center" }, "-=0.08")
.to(".boot-screen", { autoAlpha: 0, yPercent: -4, duration: 0.62, ease: "power3.inOut", delay: 0.08 })
.set(".boot-screen", { display: "none" })
.from("[data-motion='nav']", { y: -14, duration: 0.7 })
.from(".section-kicker", { y: 14, duration: 0.56 }, "-=0.18")
.from(
splitTitle?.words ?? ".hero-copy h1",
{
autoAlpha: 0,
yPercent: 92,
rotateX: -18,
yPercent: 18,
rotateX: -6,
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");
.from(".hero-copy p", { y: 18, duration: 0.7 }, "-=0.5")
.from(".hero-actions > *", { y: 12, duration: 0.46, stagger: 0.08 }, "-=0.42")
.from(".hero-proof > div", { y: 12, duration: 0.5, stagger: 0.07 }, "-=0.28")
.from("[data-motion='hero-console']", { y: 26, rotateX: 4, duration: 0.9 }, "-=0.78")
.from("[data-motion='route-row']", { x: 14, duration: 0.55, stagger: 0.08 }, "-=0.48")
.from("[data-motion='node']", { scale: 0.96, duration: 0.45, stagger: 0.08 }, "-=0.3");
gsap.to("[data-motion-orbit]", {
rotate: 360,