refactor: simplify infinite-moving-cards and redesign agents page layout

- Removed getDirection callback in favor of inline style calculation for cleaner animation control
- Replaced BentoSection and AgentComponents with unified AgentBento component featuring video backgrounds and updated card structure
- Standardized border styling across CallToAction components (gray-700 → gray-800) for consistent visual hierarchy

src/components/magicui/infinite-moving-cards.tsx

@@ -20,15 +20,6 @@ export const InfiniteMovingCards = ({
   const scrollerRef = React.useRef<HTMLUListElement>(null);
   const [start, setStart] = useState(false);
 
-  const getDirection = useCallback(() => {
-    if (containerRef.current) {
-      if (direction === "left") {
-        containerRef.current.style.setProperty("--animation-direction", "forwards");
-      } else {
-        containerRef.current.style.setProperty("--animation-direction", "reverse");
-      }
-    }
-  }, [direction]);
 
   const getSpeed = useCallback(() => {
     if (containerRef.current) {
@@ -53,11 +44,10 @@ export const InfiniteMovingCards = ({
         }
       });
 
-      getDirection();
       getSpeed();
       setStart(true);
     }
-  }, [getDirection, getSpeed]);
+  }, [getSpeed]);
 
   useEffect(() => {
     addAnimation();
@@ -75,6 +65,9 @@ export const InfiniteMovingCards = ({
           start && "animate-scroll",
           pauseOnHover && "hover:[animation-play-state:paused]",
         )}
+        style={{
+          "--animation-direction": direction === "left" ? "forwards" : "reverse",
+        } as React.CSSProperties}
       >
         {items.map((item, idx) => (
           <li className="relative flex-shrink-0" key={idx}>

src/pages/agents/AgentBento.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+const bentos = [
+  {
+    id: "core",
+    eyebrow: "ARCHITECTURE",
+    title: "Deterministic by Design",
+    description:
+      "Every workload runs exactly as declared: no drift, no hidden state, no surprises.",
+    video: null,
+    colSpan: "lg:col-span-3",
+    rowSpan: "lg:row-span-1",
+    custom: true,
+    noBorder: true,
+  },
+
+  // ✅ Updated Bento Cards
+  {
+    id: "fungistor",
+    title: "FungiStor",
+    subtitle: "Long-Term AI Memory",
+    description:
+      "Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.",
+    video: "/videos/fungistor.mp4",
+    colSpan: "lg:col-span-3",
+    rowSpan: "lg:row-span-1",
+  },
+  {
+    id: "herodb",
+    title: "HeroDB",
+    subtitle: "Active AI Memory",
+    description:
+      "Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.",
+    video: "/videos/herodb.mp4",
+    colSpan: "lg:col-span-3",
+    rowSpan: "lg:row-span-1",
+  },
+  {
+    id: "mos",
+    title: "MOS Sandboxes",
+    subtitle: "Secure Agent Workspaces",
+    description:
+      "Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.",
+    video: "/videos/herodb.mp4",
+    colSpan: "lg:col-span-3",
+    rowSpan: "lg:row-span-1",
+  },
+  {
+    id: "mesh",
+    title: "Mycelium Mesh",
+    subtitle: "Secure Communication Network",
+    description:
+      "A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.",
+    video: "/videos/mesh.mp4",
+    colSpan: "lg:col-span-2",
+    rowSpan: "lg:row-span-1",
+  },
+  {
+    id: "deterministic",
+    title: "Deterministic Deployment",
+    subtitle: "Verifiable Code Execution",
+    description:
+      "Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.",
+    video: "/videos/deterministic.mp4",
+    colSpan: "lg:col-span-2",
+    rowSpan: "lg:row-span-1",
+  },
+  {
+    id: "agent-coordination",
+    title: "Agent Coordination",
+    subtitle: "Sovereign Workflow Management",
+    description:
+      "Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.",
+    video: "/videos/agent.mp4",
+    colSpan: "lg:col-span-2",
+    rowSpan: "lg:row-span-1",
+  },
+];
+
+export function AgentBento() {
+  return (
+    <section className="relative w-full bg-[#121212] overflow-hidden">
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className="mx-auto bg-[#111111] max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-800">
+        <div className="grid grid-cols-1 gap-6 pt-6 lg:grid-cols-6 lg:grid-rows-3 pb-6">
+          {bentos.map((card) => (
+            <div
+              key={card.id}
+              className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
+            >
+              {!card.noBorder && (
+                <div
+                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${card.rounded}`}
+                />
+              )}
+
+              <div
+                className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
+              >
+                {/* ✅ VIDEO instead of animation */}
+                {card.video ? (
+                  <div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center">
+                    <video
+                      src={card.video}
+                      autoPlay
+                      loop
+                      muted
+                      playsInline
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="h-48 w-full flex items-center justify-center bg-transparent" />
+                )}
+
+                <div className="px-8 pt-4 pb-6">
+                  {card.custom ? (
+                    <>
+                      {card.eyebrow && <Eyebrow>{card.eyebrow}</Eyebrow>}
+                      <H3 className="mt-2 text-white">{card.title}</H3>
+                      <P className="mt-4 max-w-lg text-gray-200">{card.description}</P>
+                    </>
+                  ) : (
+                    <>
+                     {/* ✅ NEW SUBTITLE */}
+                      <p className="text-sm text-cyan-400">{card.subtitle}</p>
+
+                      <p className="mt-1 text-lg font-medium lg:text-xl tracking-tight text-white">
+                        {card.title}
+                      </p>
+
+                     
+
+                      <p className="mt-1 max-w-lg text-sm/6 text-gray-200">
+                        {card.description}
+                      </p>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {!card.noBorder && (
+                <div
+                  className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/agents/AgentsPage.tsx

@@ -2,10 +2,9 @@ import { AnimatedSection } from '../../components/AnimatedSection'
 import { DeploySection } from './DeploySection'
 import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
-import { BentoSection } from './BentoSection'
+import { AgentBento } from './AgentBento'
 import { AgentHeroAlt } from './AgentHeroAlt'
 import { CallToAction } from './CallToAction'
-import { AgentComponents } from './AgentComponents'
 
 export default function AgentsPage() {
   return (
@@ -27,11 +26,7 @@ export default function AgentsPage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <BentoSection />
+        <AgentBento />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <AgentComponents />
       </AnimatedSection>
 
       <AnimatedSection>

src/pages/agents/CallToAction.tsx

@@ -1,59 +1,57 @@
-import { CircleBackground } from '../../components/CircleBackground'
+"use client";
-import { Container } from '@/components/Container'
+
-import { Button } from '@/components/Button'
+import { Container } from "@/components/Container";
+import { Button } from "@/components/Button";
 
 export function CallToAction() {
   return (
-    <section
+    <section className="relative overflow-hidden bg-[#121212]">
-      id="get-started"
+      {/* ✅ Top horizontal line with spacing */}
-      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
-    >
+      <div className="w-full border-t border-l border-r border-gray-800" />
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
-      </div>
 
+      {/* ✅ Main boxed area */}
+      <div
+        id="get-started"
+        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
+      >
         <Container className="relative">
-        <div className="mx-auto max-w-2xl text-center">
+          <div className="mx-auto max-w-3xl text-center">
             <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
               Start Building the Future of Sovereign AI
             </h2>
+
             <p className="mt-6 text-lg text-gray-300">
-            Use today’s components — models, storage, compute, mesh — 
+              Use today’s components — models, storage, compute, mesh — and step into agents as they arrive.
-            and step into agents as they arrive.
             </p>
 
-          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
+            {/* ✅ Two cards, stacked center with spacing */}
-            <Button
+            <div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
-              as="a"
+              <div className="flex flex-col items-center text-center max-w-xs">
-              to="/deploy"
+                <Button to="/deploy" variant="solid" color="cyan" className="mt-4">
-              variant="solid"
-              color="white"
-            >
                   Deploy a Model
                 </Button>
+              </div>
 
-            <Button
+              <div className="flex flex-col items-center text-center max-w-xs">
-              as="a"
+                <Button to="/host" as="a" variant="outline" color="white" className="mt-4">
-              to="/host"
-              variant="outline"
-              color="white"
-            >
                   Host a Node
                 </Button>
+              </div>
 
-            <Button
+              <div className="flex flex-col items-center text-center max-w-xs">
-              as="a"
+                <Button to="https://threefold.info/mycelium_network/docs/" as="a" target="_blank" variant="outline" color="white" className="mt-4">
-              to="https://threefold.info/mycelium_network/docs/"
-              target="_blank"
-              rel="noreferrer"
-              variant="outline"
-              color="white"
-            >
                   Follow Development
                 </Button>
               </div>
             </div>
+          </div>
         </Container>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
-  )
+  );
 }

src/pages/agents/Companies.tsx

@@ -39,23 +39,8 @@ const row2 = logos.slice(6);
 
 export function Companies() {
   return (
-    <div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased  py-4 mb-12">
+    <div id="companies" className="relative bg-[#121212] flex flex-col items-center justify-center w-full overflow-hidden antialiased  py-4 mb-12">
-      <div className="relative z-10 mx-auto w-full max-w-6xl p-4">
+      <div className="relative z-10 mx-auto w-full max-w-7xl p-4">
-
-        {/* Heading */}
-        <motion.div
-          className="flex flex-col justify-center max-w-4xl items-center mb-8 mx-auto"
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, amount: 0.3 }}
-          transition={{ duration: 0.6, ease: "easeOut" }}
-        >
-          <Eyebrow color="accent"></Eyebrow>
-          <P className="hidden min-xl:text-gray-100 text-center mb-6">
-            Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
-          </P>
-        </motion.div>
-
         {/* Logos grid */}
         <div className="flex flex-col items-center gap-y-6 text-white ">
           <InfiniteMovingCards

src/pages/agents/DeploySection.tsx

@@ -46,8 +46,12 @@ const features = [
 
 export function DeploySection() {
   return (
-    <section id="benefits" className="relative bg-black px-4 pb-4 pt-12 text-white lg:px-12 lg:pt-24">
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
-      <div className="relative px-6 lg:px-12">
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className="relative px-6 lg:px-12 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -90,6 +94,8 @@ export function DeploySection() {
           ))}
         </motion.ul>
       </div>
+      <div className="w-full border-b border-gray-800 bg-[#121212]" />
+      
     </section>
   );
 }

src/pages/cloud/CalltoAction.tsx

@@ -7,13 +7,13 @@ export function CallToAction() {
   return (
     <section className="relative overflow-hidden bg-gray-900">
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-700"></div>
+      <div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
-      <div className="w-full border-t border-l border-r border-gray-700" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
 
       {/* ✅ Main boxed area */}
       <div
         id="get-started"
-        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-700"
+        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
       >
     
 
@@ -48,8 +48,8 @@ export function CallToAction() {
       </div>
 
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b border-gray-700" />
+      <div className="w-full border-b border-gray-800" />
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-700 bg-transparent" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
   );
 }

src/pages/compute/CallToAction.tsx

@@ -7,13 +7,13 @@ export function CallToAction() {
   return (
     <section className="relative overflow-hidden bg-gray-900">
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-700"></div>
+      <div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
-      <div className="w-full border-t border-l border-r border-gray-700" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
 
       {/* ✅ Main boxed area */}
       <div
         id="get-started"
-        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-700"
+        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
       >
     
 
@@ -48,8 +48,8 @@ export function CallToAction() {
       </div>
 
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b border-gray-700" />
+      <div className="w-full border-b border-gray-800" />
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-700 bg-transparent" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
   );
 }

src/pages/compute/ComputeCapabilitiesNew.tsx

@@ -86,14 +86,14 @@ export function ComputeCapabilitiesNew() {
                     </a>
                     <button
                       onClick={scrollLeft}
-                      className="h-8 w-8 flex items-center justify-center border border-gray-700 rounded-md hover:border-cyan-500 transition-colors"
+                      className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
                     >
                       <IoArrowBackOutline className="text-gray-300" size={16} />
                     </button>
 
                     <button
                       onClick={scrollRight}
-                      className="h-8 w-8 flex items-center justify-center border border-gray-700 rounded-md hover:border-cyan-500 transition-colors"
+                      className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
                     >
                       <IoArrowForwardOutline className="text-gray-300" size={16} />
                     </button>

src/pages/download/DevHub.tsx

@@ -54,7 +54,7 @@ export function DevHub() {
                 href={feature.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="block rounded-2xl border border-gray-700 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
+                className="block rounded-2xl border border-gray-800 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
               >
                 <feature.icon aria-hidden="true" className="mb-4 h-6 w-6 flex-none text-cyan-500" />
                 <dt className="font-semibold text-white">{feature.name}</dt>

src/pages/home/archive/HomeFeaturesDark.tsx

@@ -42,7 +42,7 @@ export function HomeFeaturesDark() {
         <div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
           <div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
             {features.map((feature) => (
-                                          <div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-700 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
+                                          <div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-800 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
                                                 <div className="w-20 h-20 bg-gray-800/80 rounded-full flex items-center justify-center">
                   <feature.icon className="h-12 w-12 text-cyan-500" />
                 </div>

src/pages/network/CallToAction.tsx

@@ -7,13 +7,13 @@ export function CallToAction() {
   return (
     <section className="relative overflow-hidden bg-[#121212]">
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-700"></div>
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
-      <div className="w-full border-t border-l border-r border-gray-700" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
 
       {/* ✅ Main boxed area */}
       <div
         id="get-started"
-        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-700"
+        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
       >
     
 
@@ -46,8 +46,8 @@ export function CallToAction() {
       </div>
 
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b border-gray-700" />
+      <div className="w-full border-b border-gray-800" />
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-700 bg-transparent" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
   );
 }

src/pages/storage/CallToAction.tsx

@@ -7,13 +7,13 @@ export function CallToAction() {
   return (
     <section className="relative overflow-hidden bg-gray-900">
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl  mx-auto py-6 border border-t-0 border-b-0 border-gray-700"></div>
+      <div className="max-w-7xl  mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
-      <div className="w-full border-t border-l border-r border-gray-700" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
 
       {/* ✅ Main boxed area */}
       <div
         id="get-started"
-        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-700"
+        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
       >
         <Container className="relative">
           <div className="mx-auto max-w-3xl text-center">
@@ -59,8 +59,8 @@ export function CallToAction() {
       </div>
 
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b border-gray-700" />
+      <div className="w-full border-b border-gray-800" />
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-700 bg-transparent" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
   );
 }

src/pages/storage/StorageCapabilitiesNew.tsx

@@ -78,14 +78,14 @@ export function StorageCapabilitiesNew() {
                       </a>
                       <button
                         onClick={scrollLeft}
-                        className="h-8 w-8 flex items-center justify-center border border-gray-700 rounded-md hover:border-cyan-500 transition-colors"
+                        className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
                       >
                         <IoArrowBackOutline className="text-gray-300" size={16} />
                       </button>
 
                       <button
                         onClick={scrollRight}
-                        className="h-8 w-8 flex items-center justify-center border border-gray-700 rounded-md hover:border-cyan-500 transition-colors"
+                        className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
                       >
                         <IoArrowForwardOutline className="text-gray-300" size={16} />
                       </button>

tailwind.config.js

@@ -10,6 +10,11 @@ export default {
         sans: ['Mulish', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
       },
       keyframes: {
+        scroll: {
+          to: {
+            transform: "translate(calc(-100% - var(--gap)))",
+          },
+        },
         logoScroll: {
           '0%': { transform: 'translateX(0)' },
           '100%': { transform: 'translateX(-50%)' },
@@ -30,6 +35,8 @@ export default {
         },
       },
       animation: {
+        scroll:
+          "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
         logoScroll: 'logoScroll 16s linear infinite',
         'glitch-1': 'glitch-1 1s infinite',
         'glitch-2': 'glitch-2 1s infinite',