.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}

Pixel Flyer

gamesPro

A self-playing full-frame bird-and-pillars flyer for error pages. Tap or press Space to take over, with the score in bitmap digits and a pinned slot for a home link.

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.

pixel-flyer.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type PixelFlyerProps = {  children?: ReactNode  accent?: string  speed?: number  seed?: number  handbackAfter?: number  showScore?: boolean  onCrash?: (score: number) => void  label?: string  className?: string}export function PixelFlyer({  children,  accent = 'var(--primary)',  speed = 1,  seed,  handbackAfter = 3000,  showScore = true,  onCrash,  label = 'Flying game. It plays itself. Press Space or Arrow Up, or tap or click, to take over and flap the bird through the pillars.',  className,}: PixelFlyerProps) {  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

Pixel Flyer 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/pixel-flyer

MCP

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

PixelFlyerProps

Prop	Type	Default	What it does
`children`	`ReactNode`	–	Pinned to the bottom of the frame, e.g. a "Take me home" link. Its height is measured, and the playfield never draws under it.
`className`	`string`	–	Classes for the frame. It fills its parent, so give it a height (`h-[28rem]`, `min-h-dvh`, ...). Set the pillar colour with a text colour.
`accent`	`string`	`'var(--primary)'`	Colour of the bird, the score flash and the ground ticks. Any CSS colour, including `var(--x)`. Defaults to the primary token.
`speed`	`number`	`1`	Scroll speed multiplier. 1 is a relaxed pace.
`seed`	`number`	–	Seed for the pillar heights, so the same run plays out every time. Leave it out for a different run on each mount.
`handbackAfter`	`number`	`3000`	How long after the last real tap, click or key press the autopilot takes over again, in milliseconds.
`showScore`	`boolean`	`true`	Draw the score as 5x7 bitmap digits in the top centre.
`onCrash`	`(score: number) => void`	–	Called when the bird crashes, with the score of that run.
`label`	`string`	`'Flying game. It plays itself. Press Space or Arrow Up, or tap or click, to take over and flap the bird through the pillars.'`	Accessible name of the frame. It is a focusable group: it should say what the game is and how to play it. The canvas itself is hidden from assistive tech.

Preview

Code

The code is locked

Props

A11y