.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Grid Serpent

gamesPro

A snake that plays itself on a pixel grid: it hunts food by pathfinding, grows endlessly, flashes and restarts when it corners itself. Tail fades into the board; cell size, gap, radius, colours, speed and growth are props.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

grid-serpent.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type GridSerpentProps = {  cellSize?: number  gap?: number  radius?: number  snakeColor?: string  foodColor?: string  boardColor?: string  flashColor?: string  speed?: number  growth?: number  maxFill?: number  seed?: number  feedable?: boolean  label?: string  className?: string}export function GridSerpent({  cellSize = 16,  gap = 3,  radius = 4,  snakeColor = 'var(--foreground)',  foodColor = 'var(--primary)',  boardColor = 'var(--muted)',  flashColor = 'var(--destructive)',  speed = 16,  growth = 4,  maxFill = 0.1,  seed = 7,  feedable = true,  label,  className,}: GridSerpentProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Grid Serpent is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

CLInpx shadcn@latest add @manniche-pro/grid-serpent

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

GridSerpentProps

Prop	Type	Default	What it does
`cellSize`	`number`	`16`	Side of one cell in CSS pixels. The board fills its container, so a smaller cell means a bigger grid.
`gap`	`number`	`3`	Space between cells in CSS pixels.
`radius`	`number`	`4`	Corner radius of a cell, in CSS pixels. Half the cell size makes dots, 0 makes square pixels.
`snakeColor`	`string`	`'var(--foreground)'`	Colour of the snake's head; the body fades from it towards the board. Any CSS colour, including `var(--x)`. Defaults to the foreground token.
`foodColor`	`string`	`'var(--primary)'`	Colour of the food. Defaults to the primary token.
`boardColor`	`string`	`'var(--muted)'`	Colour of the empty cells. Defaults to the muted token.
`flashColor`	`string`	`'var(--destructive)'`	Colour the snake blinks in when it corners itself. Defaults to the destructive token.
`speed`	`number`	`16`	Steps per second.
`growth`	`number`	`4`	Segments added to the snake for every piece of food.
`maxFill`	`number`	`0.1`	How full the board may get, from 0.02 to 0.9. Past this share of the cells the snake stops being careful, corners itself, flashes and starts again. Raise it for longer lives.
`seed`	`number`	`7`	Seed for the food placement, so every visit plays out the same.
`feedable`	`boolean`	`true`	Click or tap a free cell to drop the food there. Never blocks scrolling.
`label`	`string`	–	Accessible label. When set the board is exposed as an image, otherwise it is hidden from assistive technology.
`className`	`string`	–	Classes for the wrapper. It fills its parent, so give it a size or put it in a sized box.

Preview

Code

The code is locked

Props

A11y