.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

En slange, der spiller sig selv på et pixelgitter: den jager mad med stifinding, vokser uendeligt og blinker og starter forfra, når den spærrer sig selv inde. Halen toner ud i brættet. Cellestørrelse, mellemrum, radius, farver, fart og vækst er props.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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)} />}

Koden er låst

Grid Serpent er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`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

Kode

Koden er låst

Props

A11y