Pixel UI
Controls

Tracked Butterfly Ascii

Preview
Reduced motion

Simulates prefers-reduced-motion for the demo. Off follows your system setting.

Keyboard stepping

Steps focus through the demo with ] and [. Tab, arrows, and Escape stay native so the component behaves as shipped.

Tracked Butterfly Ascii
Move to aim the target, click to send a ring across the wings

Tracked Butterfly Ascii

A butterfly drawn in WebGL as a fine grid of glowing cells, under a motion tracking overlay that marks points on its wings.

Installation

npx shadcn@latest add ikislay/pixel-ui/tracked-butterfly-ascii

How to use

import { TrackedButterflyAscii } from "@/components/ui/tracked-butterfly-ascii"


export function Demo() {
  return <TrackedButterflyAscii className="h-96 w-full rounded-2xl" />
}

Source Code

// Loading…

Props

Options you can pass to customize this component.

Prop
Type
Description
className
string

Classes applied to the root. Give it a height; the butterfly scales to fit.

Credits

  • •Inspired by navedux on Threads