ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-17 14:21:34 +02:00
parent 34bd6522e3
commit eb2ad2be3f
6 changed files with 531 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/components/UseCases.tsx
View File

@@ -23,128 +23,69 @@ interface Review {
}
const reviews: Array<Review> = [
{
title: 'FungiStor: Long-Term AI Memory',
body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
},
{
title: 'HeroDB: Active AI Memory',
body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
},
{
title: 'MOS Sandboxes: Secure Agent Workspaces',
body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
},
{
title: 'Mycelium Mesh: Secure Communication Network',
body: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
},
{
title: 'Deterministic Deployment: Verifiable Code Execution',
body: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
},
{
title: 'Agent Coordination: Sovereign Workflow Management',
body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
},
{
title: 'Universal Interface Layer: AI Service Gateway',
body: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
},
{
title: 'Semantic Index & Search: Navigable Knowledge Fabric',
body: 'Transforms data chaos into unified knowledge graphs. Goes beyond keywords to understand meaning and context.',
},
{ title: 'FungiStor: Long-Term AI Memory', body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.' },
{ title: 'HeroDB: Active AI Memory', body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.' },
{ title: 'MOS Sandboxes: Secure Agent Workspaces', body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.' },
{ title: 'Mycelium Mesh: Secure Communication Network', body: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.' },
{ title: 'Deterministic Deployment: Verifiable Code Execution', body: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.' },
{ title: 'Agent Coordination: Sovereign Workflow Management', body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.' },
{ title: 'Universal Interface Layer: AI Service Gateway', body: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.' },
{ title: 'Semantic Index & Search: Navigable Knowledge Fabric', body: 'Transforms data chaos into unified knowledge graphs. Goes beyond keywords to understand meaning and context.' },
]
function getReviewIcon(title: string) {
if (title.startsWith('FungiStor')) return ArchiveBoxIcon;
if (title.startsWith('HeroDB')) return CpuChipIcon;
if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon;
if (title.startsWith('Mycelium Mesh')) return ShareIcon;
if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon;
if (title.startsWith('Agent Coordination')) return UserGroupIcon;
if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon;
if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon;
return GlobeAltIcon; // default
if (title.startsWith('FungiStor')) return ArchiveBoxIcon
if (title.startsWith('HeroDB')) return CpuChipIcon
if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon
if (title.startsWith('Mycelium Mesh')) return ShareIcon
if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon
if (title.startsWith('Agent Coordination')) return UserGroupIcon
if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon
if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon
return GlobeAltIcon
}
function Review({
title,
body,
className,
...props
}: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
let animationDelay = useMemo(() => {
let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
return possibleAnimationDelays[
Math.floor(Math.random() * possibleAnimationDelays.length)
]
function Review({ title, body, className, ...props }: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
const animationDelay = useMemo(() => {
const delays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
return delays[Math.floor(Math.random() * delays.length)]
}, [])
return (
<figure
className={clsx(
'animate-fade-in rounded-3xl bg-gray-900/50 p-6 opacity-0 shadow-md shadow-gray-900/5',
className,
)}
className={clsx('animate-fade-in rounded-3xl bg-gray-900/50 p-6 opacity-0 shadow-md shadow-gray-900/5', className)}
style={{ animationDelay }}
{...props}
>
<blockquote className="text-white">
{React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-white mb-2" })}
<CT color="light" className="mt-4 text-lg/6 font-semibold">
{title}
</CT>
{React.createElement(getReviewIcon(title), { className: 'h-6 w-6 text-white mb-2' })}
<CT color="light" className="mt-4 text-lg/6 font-semibold">{title}</CT>
<CP color="light" className="mt-3 text-sm">{body}</CP>
</blockquote>
</figure>
)
}
function splitArray<T>(array: Array<T>, numParts: number) {
let result: Array<Array<T>> = []
const result: Array<Array<T>> = []
for (let i = 0; i < array.length; i++) {
let index = i % numParts
if (!result[index]) {
result[index] = []
}
const index = i % numParts
if (!result[index]) result[index] = []
result[index].push(array[i])
}
return result
}
function ReviewColumn({
reviews,
className,
reviewClassName,
msPerPixel = 0,
}: {
reviews: Array<Review>
className?: string
reviewClassName?: (reviewIndex: number) => string
msPerPixel?: number
}) {
let columnRef = useRef<React.ElementRef<'div'>>(null)
let [columnHeight, setColumnHeight] = useState(0)
let duration = `${columnHeight * msPerPixel}ms`
function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Array<Review>, className?: string, msPerPixel?: number }) {
const columnRef = useRef<React.ElementRef<'div'>>(null)
const [columnHeight, setColumnHeight] = useState(0)
const duration = `${columnHeight * msPerPixel}ms`
useEffect(() => {
if (!columnRef.current) {
return
}
let resizeObserver = new window.ResizeObserver(() => {
setColumnHeight(columnRef.current?.offsetHeight ?? 0)
})
if (!columnRef.current) return
const resizeObserver = new ResizeObserver(() => setColumnHeight(columnRef.current?.offsetHeight ?? 0))
resizeObserver.observe(columnRef.current)
return () => {
resizeObserver.disconnect()
}
return () => resizeObserver.disconnect()
}, [])
return (
@@ -153,98 +94,80 @@ function ReviewColumn({
className={clsx('animate-marquee space-y-8 py-4', className)}
style={{ '--marquee-duration': duration } as React.CSSProperties}
>
{reviews.concat(reviews).map((review, reviewIndex) => (
<Review
key={reviewIndex}
aria-hidden={reviewIndex >= reviews.length}
className={reviewClassName?.(reviewIndex % reviews.length)}
{...review}
/>
{reviews.concat(reviews).map((review, i) => (
<Review key={i} aria-hidden={i >= reviews.length} {...review} />
))}
</div>
)
}
function ReviewGrid() {
let containerRef = useRef<React.ElementRef<'div'>>(null)
let isInView = useInView(containerRef, { once: true, amount: 0.4 })
let columns = splitArray(reviews, 3)
let column1 = columns[0]
let column2 = columns[1]
let column3 = splitArray(columns[2], 2)
const containerRef = useRef<React.ElementRef<'div'>>(null)
const isInView = useInView(containerRef, { once: true, amount: 0.4 })
const columns = splitArray(reviews, 2)
return (
<div
ref={containerRef}
className="relative -mx-4 mt-0 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4 md:grid-cols-2 lg:grid-cols-3"
>
<div ref={containerRef} className="relative grid grid-cols-1 md:grid-cols-2 gap-8 overflow-hidden h-full">
{isInView && (
<>
<ReviewColumn
reviews={[...column1, ...column3.flat(), ...column2]}
reviewClassName={(reviewIndex) =>
clsx(
reviewIndex >= column1.length + column3[0].length &&
'md:hidden',
reviewIndex >= column1.length && 'lg:hidden',
)
}
msPerPixel={10}
/>
<ReviewColumn
reviews={[...column2, ...column3[1]]}
className="hidden md:block"
reviewClassName={(reviewIndex) =>
reviewIndex >= column2.length ? 'lg:hidden' : ''
}
msPerPixel={15}
/>
<ReviewColumn
reviews={column3.flat()}
className="hidden lg:block"
msPerPixel={10}
/>
<ReviewColumn reviews={columns[0]} msPerPixel={10} />
<ReviewColumn reviews={columns[1]} msPerPixel={15} />
</>
)}
<div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black" />
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-black" />
<div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black" />
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black" />
</div>
)
}
export function UseCases() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true });
const ref = useRef(null)
const isInView = useInView(ref, { once: true })
return (
<section
id="usecases"
ref={ref}
aria-labelledby="usecases-title"
className="bg-black py-24"
className="bg-black h-screen relative flex items-start py-12 -top-20"
>
<Container className=''>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.8, delay: 0.1 }}
className="mx-auto max-w-2xl lg:max-w-5xl"
>
<H2
id="usecases-title"
color="light"
className="text-center"
<Container className="h-full">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10 h-full">
{/* Left Column - Top Left Text */}
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
transition={{ duration: 0.8, delay: 0.1 }}
className="flex flex-col items-start justify-start pt-10 lg:pr-12"
>
Coming Soon: The Future of Mycelium
</H2>
<P className="mt-6 text-center" color="light">
Mycelium Cloud is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
</P>
</motion.div>
<H2 id="usecases-title" color="light" className="text-left">
Coming Soon: The Future of Mycelium
</H2>
<P className="mt-4 text-left" color="light">
Mycelium Cloud is evolving to bring even more powerful decentralized
features, designed to enhance your experience and expand possibilities.
Be the first to explore what's coming next by staying connected with our
latest updates.
</P>
</motion.div>
{/* Right Two Columns - Full Height Scrolling Cards */}
<motion.div
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 1, delay: 0.2 }}
className="lg:col-span-2 h-full"
>
<ReviewGrid />
</motion.div>
</div>
{/* Background Gradient */}
<motion.div
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 1, delay: 0.2 }}
transition={{ duration: 1, delay: 0.3 }}
aria-hidden="true"
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
>
@@ -256,7 +179,6 @@ export function UseCases() {
className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
/>
</motion.div>
<ReviewGrid />
</Container>
</section>
)