> ## Documentation Index
> Fetch the complete documentation index at: https://docs.into.space/llms.txt
> Use this file to discover all available pages before exploring further.

# Flywheel Mechanism

> How platform growth increases token value

export const SpaceFlywheel = () => {
  const [isVisible, setIsVisible] = useState(false);
  const containerRef = useRef(null);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
      }
    }, {
      threshold: 0.2
    });
    if (containerRef.current) {
      observer.observe(containerRef.current);
    }
    return () => observer.disconnect();
  }, []);
  const nodes = [{
    id: 0,
    label: 'More Trading\nVolume',
    angle: 0
  }, {
    id: 1,
    label: 'More Fees\nGenerated',
    angle: 45
  }, {
    id: 2,
    label: 'More $SPC\nBought Back',
    angle: 90
  }, {
    id: 3,
    label: 'More $SPC\nBurned',
    angle: 135
  }, {
    id: 4,
    label: 'Increased\nScarcity & Value',
    angle: 180
  }, {
    id: 5,
    label: 'Higher\nRewards',
    angle: 225
  }, {
    id: 6,
    label: 'More Attractive\nEconomics',
    angle: 270
  }, {
    id: 7,
    label: 'More Users\nJoin',
    angle: 315
  }];
  const baseBlue = {
    r: 44,
    g: 158,
    b: 221
  };
  const white = {
    r: 255,
    g: 255,
    b: 255
  };
  const getStrokeColor = index => {
    let t;
    if (index === 0) {
      t = 0;
    } else if (index === 1) {
      t = 1;
    } else {
      t = 1 - (index - 1) / 7;
    }
    const r = Math.round(baseBlue.r + (white.r - baseBlue.r) * t);
    const g = Math.round(baseBlue.g + (white.g - baseBlue.g) * t);
    const b = Math.round(baseBlue.b + (white.b - baseBlue.b) * t);
    return `rgb(${r}, ${g}, ${b})`;
  };
  const getGradientEndColor = index => {
    let t;
    if (index === 0) {
      t = 0;
    } else if (index === 1) {
      t = 1;
    } else {
      t = 1 - (index - 1) / 7;
    }
    const darkBlue = {
      r: 15,
      g: 31,
      b: 61
    };
    const lightColor = {
      r: 200,
      g: 200,
      b: 200
    };
    const r = Math.round(darkBlue.r + (lightColor.r - darkBlue.r) * t);
    const g = Math.round(darkBlue.g + (lightColor.g - darkBlue.g) * t);
    const b = Math.round(darkBlue.b + (lightColor.b - darkBlue.b) * t);
    return `rgb(${r}, ${g}, ${b})`;
  };
  const radius = 200;
  const centerX = 300;
  const centerY = 280;
  const nodeRadius = 55;
  const getPosition = angle => {
    const rad = (angle - 90) * Math.PI / 180;
    return {
      x: centerX + radius * Math.cos(rad),
      y: centerY + radius * Math.sin(rad)
    };
  };
  return <div ref={containerRef} className="w-full max-w-full">
      <div className="w-full">
        <svg width="100%" height="auto" viewBox="0 0 600 560" preserveAspectRatio="xMidYMid meet" className="bg-transparent w-full h-auto" style={{
    minHeight: '400px',
    maxHeight: '600px'
  }}>
          <defs>
            {nodes.map((node, i) => <radialGradient key={`gradient-${i}`} id={`nodeGradient-${i}`}>
                <stop offset="0%" stopColor="#000000" />
                <stop offset="100%" stopColor={getGradientEndColor(i)} />
              </radialGradient>)}
            <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
              <path d="M 60 0 L 0 0 0 60" fill="none" stroke="currentColor" strokeWidth="1" strokeDasharray="3,3" opacity="0.3" />
            </pattern>
          </defs>

          {}
          <circle cx={centerX} cy={centerY} r={radius + 60} fill="url(#grid)" opacity="1" />

          {}
          {nodes.map((node, i) => {
    const nextNode = nodes[(i + 1) % nodes.length];
    const currentPos = getPosition(node.angle);
    const nextPos = getPosition(nextNode.angle);
    const angleToNext = Math.atan2(nextPos.y - currentPos.y, nextPos.x - currentPos.x);
    const startX = currentPos.x + nodeRadius * Math.cos(angleToNext);
    const startY = currentPos.y + nodeRadius * Math.sin(angleToNext);
    const angleFromPrev = Math.atan2(currentPos.y - nextPos.y, currentPos.x - nextPos.x);
    const endX = nextPos.x + nodeRadius * Math.cos(angleFromPrev);
    const endY = nextPos.y + nodeRadius * Math.sin(angleFromPrev);
    const arrowAngle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
    const animationDelay = i * 0.25;
    return <g key={`connection-${i}`} style={{
      animation: isVisible ? `connectionPulse 4s ease-in-out ${animationDelay + 1.2}s infinite` : 'none',
      opacity: 0
    }}>
                <line x1={startX} y1={startY} x2={endX} y2={endY} stroke="#ffffff" strokeWidth="4" />
                <polygon points="-20,-10 0,0 -20,10" fill="#ffffff" transform={`translate(${endX}, ${endY}) rotate(${arrowAngle})`} />
              </g>;
  })}

          {}
          <text x={centerX} y={centerY - 15} fill="#ffffff" fontSize="22" fontWeight="600" textAnchor="middle" opacity={isVisible ? "1" : "0"} style={{
    transition: isVisible ? 'opacity 1s ease-out 2s' : 'none'
  }}>
            The Flywheel
          </text>
          <text x={centerX} y={centerY + 12} fill="#ffffff" fontSize="22" fontWeight="600" textAnchor="middle" opacity={isVisible ? "1" : "0"} style={{
    transition: isVisible ? 'opacity 1s ease-out 2s' : 'none'
  }}>
            Effect
          </text>
          <text x={centerX} y={centerY + 33} fill="currentColor" fontSize="12" textAnchor="middle" opacity={isVisible ? "0.6" : "0"} style={{
    transition: isVisible ? 'opacity 1s ease-out 2.3s' : 'none'
  }}>
            Self-Sustaining Growth
          </text>

          {}
          {nodes.map((node, i) => {
    const pos = getPosition(node.angle);
    const pulseDelay = 1.2 + i * 0.25;
    return <g key={node.id} opacity={isVisible ? "1" : "0"} style={{
      transition: isVisible ? `opacity 0.6s ease-out ${i * 0.15}s` : 'none',
      transformOrigin: `${pos.x}px ${pos.y}px`,
      animation: isVisible ? `nodePulse 0.4s ease-out ${pulseDelay}s infinite 4s` : 'none'
    }}>
                <circle cx={pos.x} cy={pos.y} r="55" fill={`url(#nodeGradient-${i})`} stroke={getStrokeColor(i)} strokeWidth="3" />
                <text x={pos.x} y={pos.y} fill="white" fontSize="13" fontWeight="600" textAnchor="middle" className="select-none">
                  {node.label.split('\n').map((line, idx) => <tspan key={idx} x={pos.x} dy={idx === 0 ? '-0.3em' : '1.2em'}>
                      {line}
                    </tspan>)}
                </text>
              </g>;
  })}
        </svg>
      </div>
      
      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        @keyframes connectionPulse {
          0% {
            opacity: 0;
          }
          20% {
            opacity: 1;
          }
          40% {
            opacity: 0;
          }
          100% {
            opacity: 0;
          }
        }
        @keyframes nodePulse {
          0%, 90% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.08);
          }
          100% {
            transform: scale(1);
          }
        }
      `}</style>
    </div>;
};

Space's Flywheel Mechanism creates a self-sustaining cycle that aligns platform growth with token value through an automated fee-to-value system. By channeling trading activity directly into \$SPC buybacks and burns, deflationary pressure is created which benefits all ecosystem participants.

<img src="https://mintcdn.com/space-e3c79028/ZR8y0qKNRGyVWSnU/images/flywheel.png?fit=max&auto=format&n=ZR8y0qKNRGyVWSnU&q=85&s=5fac7f8f2eb441aa720e5b8988bc8881" alt="Flywheel Pn" width="1920" height="800" data-path="images/flywheel.png" />

## Fee Distribution

All platform fees generated from trading activity are automatically split:

<CardGroup cols={2}>
  <Card title="Buyback & Burn $SPC" icon="fire" iconType="solid" color="#ec8d8d">
    50% of Revenue
  </Card>

  <Card title="Protocol Treasury" icon="building-columns" iconType="solid" color="#8dcbec">
    50% of Revenue
  </Card>
</CardGroup>

This allocation is fixed in the smart contract and provides:

* **Immediate value return** to token holders through supply reduction
* **Sustainable funding** for platform operations, development and security
* **Transparent allocation** with all transactions visible on-chain

<SpaceFlywheel />

Each component reinforces the others, creating compounding growth as the platform scales. The Flywheel Mechanism creates a virtuous cycle where platform success directly benefits token holders through:

* **Automated buybacks** using TWAP for optimal execution
* **Permanent burns** reducing supply continuously
* **Treasury funding** ensuring platform growth
* **Transparent operations** with public dashboard
* **Sustainable economics** balancing value return and development

As Space grows, the flywheel spins faster - more users generate more fees, driving larger burns, increasing scarcity, attracting more users, and perpetuating the cycle. This alignment of incentives between users, traders, liquidity providers, and token holders creates a foundation for Space’s long-term success.