hanzo.ai/app/(marketing)/blog/synthesis/page.tsx

import type { Metadata } from 'next'
import Link from 'next/link'
import { ArrowLeft, Calendar, Clock } from 'lucide-react'
import { phrase } from '@hanzo/i18n'
import { T } from '@hanzo/i18n/react'
import { Text, XStack, YStack } from '@/components/ui'
import { Band, Card } from '@/components/marketing/band'
import { Action, Chip, Display, Lede, TextLink, Title } from '@hanzo/ui/marketing'
import { Grid } from '@hanzo/ui/grid'
import { Glider } from '@/components/home/glider'

/**
 * The glider, what gliders build when they collide, and why that is how Hanzo
 * is made. Every fact about the Game of Life is in the sources listed at the
 * foot; every Hanzo part named is one the site already documents.
 */

/** The parts, each with its one job. */
const PARTS: readonly [string, string, string][] = [
  ['Zen', phrase('Generates'), phrase('Open models, served on our own hardware.')],
  ['Enso', phrase('Routes'), phrase('Each call to the model that answers it right for the least.')],
  ['Kai', phrase('Decides'), phrase('A probability for every option, and no text written.')],
  ['Gen', phrase('Runs'), phrase('Any coding agent on Hanzo’s tools and models.')],
  ['MCP', phrase('Acts'), phrase('The tools an agent reaches the world through.')],
  [phrase('IAM and KMS'), phrase('Keeps'), phrase('Who may do what, and the secrets they do it with.')],
]

/** The sources, as the page cites them. */
const SOURCES: readonly [string, string][] = [
  ['Glider (Conway’s Game of Life), Wikipedia', 'https://en.wikipedia.org/wiki/Glider_(Conway%27s_Game_of_Life)'],
  ['Glider, LifeWiki', 'https://conwaylife.com/wiki/Glider'],
  ['Salo and Törmä, “What can oracles teach us about the ultimate fate of life?” (2022)', 'https://arxiv.org/abs/2202.07346'],
  ['Eric S. Raymond, “The Glider: Proposal for a Hacker Emblem”', 'http://www.catb.org/hacker-emblem/'],
]

const TITLE = 'The Next Frontier Will Be Synthesis — Hanzo AI'
const DESCRIPTION = 'A glider is five cells. Collide enough of them and you can build a computer. We are building AI the same way.'

export const metadata: Metadata = {
  title: TITLE,
  description: DESCRIPTION,
  alternates: { canonical: 'https://hanzo.ai/blog/synthesis' },
  openGraph: { title: TITLE, description: DESCRIPTION, url: 'https://hanzo.ai/blog/synthesis', siteName: 'Hanzo AI', type: 'article' },
  twitter: { card: 'summary_large_image', title: TITLE, description: DESCRIPTION },
}

const BODY = { fontSize: '$3', color: 'var(--text-secondary)', '$platform-web': { lineHeight: '1.8em' } } as const

export default function SynthesisPage() {
  return (
    <YStack minH="100vh" bg="var(--background)">
      <Band rule={false} pad="$14" measure={860}>
        <YStack gap={24}>
          <XStack render={<Link href="/blog" />} items="center" gap={6}>
            <ArrowLeft size={14} color="var(--muted-foreground)" data-i18n-mirror />
            <Text fontSize="$1" color="var(--muted-foreground)">
              <T>Back to Blog</T>
            </Text>
          </XStack>

          <XStack items="center" justify="space-between" flexWrap="wrap" gap={12}>
            <Chip px={10} py={3} fontSize="$1" fontFamily="$mono" color="var(--foreground)" borderWidth={0} bg="var(--glass-strong)">
              <T>Synthesis</T>
            </Chip>
            <XStack items="center" gap={16}>
              <XStack items="center" gap={6}>
                <Calendar size={13} color="var(--muted-foreground)" />
                <Text fontSize="$1" color="var(--muted-foreground)">
                  October 18, 2026
                </Text>
              </XStack>
              <XStack items="center" gap={6}>
                <Clock size={13} color="var(--muted-foreground)" />
                <Text fontSize="$1" color="var(--muted-foreground)">
                  <T values={{ n: 5 }}>{'{n} min read'}</T>
                </Text>
              </XStack>
            </XStack>
          </XStack>

          <Display mb={0} text="left">
            <T>The Next Frontier Will Be Synthesis</T>
          </Display>

          <Lede mb={0} text="left">
            <T>{'A glider is five cells. Collide enough of them and you can build a computer. We are building AI the same way: small parts with one job each, made to be combined.'}</T>
          </Lede>
        </YStack>
      </Band>

      <Band rule={true} pad="$12" measure={860}>
        <YStack gap={40}>
          <YStack gap={16}>
            <Title quiet={false}><T>Five cells that walk</T></Title>
            <XStack gap={24} items="center" flexWrap="wrap">
              <Card p={8} bg="$panel" borderWidth={0} rounded="var(--radius-xl)">
                <Glider size={160} />
              </Card>
              <Text {...BODY} flex={1} minW={260}>
                <T>{"In John Conway's Game of Life, every cell on a grid lives or dies by its eight neighbours: a live cell with two or three stays alive, an empty cell with exactly three is born, and every other cell is empty next turn. That is all of it. Press the cells on the left to draw your own pattern and watch it run."}</T>
              </Text>
            </XStack>
            <Text {...BODY}>
              <T values={{ year: 1969 }}>
                {"The glider is the pattern above. Richard K. Guy first saw it in {year}, while Conway's group was tracing the R-pentomino. After two turns it is its own mirror image, a glide reflection, which is where the name comes from; after four it is itself again, one cell further along the diagonal. Nothing in the rules says anything about motion, yet the glider travels, at a quarter of the fastest speed the grid allows. It is the smallest pattern that does."}
              </T>
            </Text>
          </YStack>

          <YStack gap={16}>
            <Title quiet={false}><T>Collisions are construction</T></Title>
            <Text {...BODY}>
              <T>{'Gliders matter because of what happens when they meet. Aim two at each other just right and the debris settles into a block, a beehive or a blinker. Three can build the other small spaceships. Eight, positioned with care, collide into a Gosper glider gun, a machine that fires a new glider every thirty turns. Building a pattern this way has a name: glider synthesis.'}</T>
            </Text>
            <Text {...BODY}>
              <T values={{ year: 2022 }}>
                {'Shoot two gliders at a block and it moves one way; shoot three and it moves the other. That is a counter. Streams of gliders crossing each other make AND, OR and NOT. Put enough of these together and the Game of Life computes anything a computer can: it is Turing complete. In {year} a universal constructor was published that starts from fifteen gliders.'}
              </T>
            </Text>
            <Text {...BODY}>
              <T values={{ year: 2022, cells: 306 }}>
                {'It has limits, and they are worth knowing. It was long conjectured that every still pattern could be synthesized from gliders. In {year} Ilkka Törmä and Ville Salo built a {cells}-cell still life that can only have come from itself, so no collision of gliders will ever make it. Synthesis reaches almost everything, not everything.'}
              </T>
            </Text>
          </YStack>

          <YStack gap={16}>
            <Title quiet={false}><T>The emblem</T></Title>
            <Text {...BODY}>
              <T>{'Eric S. Raymond proposed the glider as the hacker emblem: the Game of Life appeals to people who build things, and the glider was born at almost the same time as the Internet and Unix. It stands for a way of working, small pieces, simple rules, and everything else built from them. That is why one walks across our home page.'}</T>
            </Text>
          </YStack>

          <YStack gap={16}>
            <Title quiet={false}><T>AI for AI</T></Title>
            <Text {...BODY}>
              <T>{'Hanzo is made of parts that each do one thing, with one interface at api.hanzo.ai, so they can be aimed at each other.'}</T>
            </Text>
            <Grid columns={{ min: 220, max: 3 }} gap={12}>
              {PARTS.map(([name, verb, does]) => (
                <Card key={name} p={18} bg="$panel" borderWidth={0} rounded="var(--radius-xl)">
                  <YStack gap={4}>
                    <Text fontSize="$1" fontFamily="$mono" color="var(--muted-foreground)">
                      <T>{verb}</T>
                    </Text>
                    <Text fontSize="$5" fontWeight="600" color="var(--foreground)">
                      <T>{name}</T>
                    </Text>
                    <Text fontSize="$2" color="var(--muted-foreground)">
                      <T>{does}</T>
                    </Text>
                  </YStack>
                </Card>
              ))}
            </Grid>
            <Text {...BODY}>
              <T>{"None of them is the product on its own. The products are collisions. Dev is Gen running an agent with Kai deciding each step and Zen or Enso answering. Enso is a router aimed at everyone's models, ours and the frontier labs'. Studio is workflows aimed at models that make images, sound and video. Each was built by pointing parts that already existed at one another, and each new part makes every earlier one worth more, the way one more glider stream adds a gate to every circuit already on the board."}</T>
            </Text>
            <Text {...BODY}>
              <T>{'The last frontier was scale: one larger model. The next is synthesis: parts small enough to understand, combined into systems no single part could be. We build those parts in the open, and the most interesting things made from them will not be ours.'}</T>
            </Text>
          </YStack>

          <Card p={36} bg="$panel" borderWidth={1} borderColor="var(--border)" rounded="var(--radius-2xl)" mt={8}>
            <YStack items="center" gap={16} $platform-web={{ textAlign: 'center' }}>
              <Text fontSize="$5" fontWeight="600" color="var(--foreground)">
                <T>Aim the parts at each other</T>
              </Text>
              <XStack items="center" justify="center" gap={12} flexWrap="wrap" mt={8}>
                <Action href="/gen" fill>
                  Hanzo Gen
                </Action>
                <Action href="/enso">Enso</Action>
                <Action href="/kai">Kai</Action>
                <Action href="/blog/pareto-frontier"><T>A New Pareto Frontier</T></Action>
              </XStack>
            </YStack>
          </Card>

          <YStack gap={10}>
            <Text fontSize="$1" fontFamily="$mono" color="var(--muted-foreground)">
              <T>Sources</T>
            </Text>
            {SOURCES.map(([label, href]) => (
              <TextLink key={href} href={href} target="_blank" rel="noopener noreferrer" fontSize="$2">
                {label}
              </TextLink>
            ))}
          </YStack>
        </YStack>
      </Band>
    </YStack>
  )
}