ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 9 Pull Requests Projects Releases Activity

make 2 directions

Browse Source
This commit is contained in:
Ehab Hassan
2025-11-17 14:21:58 +02:00
parent 74dd974da5
commit 4f63c20aa6
3 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/magicui/infinite-moving-cards.tsx
View File

@@ -62,12 +62,9 @@ export const InfiniteMovingCards = ({
ref={scrollerRef} ref={scrollerRef}
className={cn( className={cn(
"flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap", "flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
start && "animate-scroll", start && (direction === "left" ? "animate-scroll-left" : "animate-scroll-right"),
pauseOnHover && "hover:[animation-play-state:paused]", pauseOnHover && "hover:[animation-play-state:paused]"
)} )}
style={{
"--animation-direction": direction === "left" ? "forwards" : "reverse",
} as React.CSSProperties}
> >
{items.map((item, idx) => ( {items.map((item, idx) => (
<li className="relative flex-shrink-0" key={idx}> <li className="relative flex-shrink-0" key={idx}>

4
src/pages/agents/AgentLogos.tsx
View File

@@ -36,7 +36,7 @@ export const AgentLogos = () => {
const rows = splitLogoRows(); const rows = splitLogoRows();
return ( return (
<section className="relative isolate overflow-hidden bg-black py-4"> <section className="relative isolate overflow-hidden bg-[#121212] py-4">
<div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-black to-transparent" /> <div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-black to-transparent" />
<div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-black to-transparent" /> <div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-black to-transparent" />
<div className="flex w-full flex-col gap-1 px-0"> <div className="flex w-full flex-col gap-1 px-0">
@@ -53,7 +53,7 @@ export const AgentLogos = () => {
</div> </div>
))} ))}
direction={idx % 2 === 0 ? "left" : "right"} direction={idx % 2 === 0 ? "left" : "right"}
speed={idx % 2 === 0 ? "fast" : "normal"} speed="slow"
pauseOnHover={true} pauseOnHover={true}
className="w-full" className="w-full"
/> />

19
src/styles/tailwind.css
View File

@@ -4,11 +4,24 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
@theme { @theme {
--animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite; --animate-scroll-left: scroll-left var(--animation-duration, 40s) linear infinite;
--animate-scroll-right: scroll-right var(--animation-duration, 40s) linear infinite;
@keyframes scroll { @keyframes scroll-left {
from {
transform: translateX(0);
}
to { to {
transform: translate(calc(-50% - 0.5rem)); transform: translateX(calc(-50% - 0.5rem));
}
}
@keyframes scroll-right {
from {
transform: translateX(calc(-50% - 0.5rem));
}
to {
transform: translateX(0);
} }
} }