Library
Back to library

COMPONENT / NOUNS BACKGROUND

Noggle Pixel Sea

An exact 43 × 17 pixel Noggle rests inside a quiet signal field at the family's tighter scale. The field falls away around its authored silhouette while a restrained current and pointer highlight travel only across real cells. Noggles are the signature glasses of Nouns, an Ethereum experiment that auctions one Noun every day and directs its shared treasury through public, onchain governance.

Learn about Nouns at nouns.wtf Ready
LIVE RENDERERCanvas 2D · LIVE INSTANCE
RUNNING
Noggle Pixel Sea LIVE
DPR ≤ 2RESPONSIVEPOINTER SAFE
ThirdParty · NOASSERTIONSOURCE NOT DISTRIBUTED
SIMILAR SYSTEMS03 RELATED RELEASES
01 / Nouns BackgroundNoggle BounceOPEN SYSTEM
02 / Nouns BackgroundNoggle FlutterOPEN SYSTEM
03 / Nouns BackgroundNoggle OrbitOPEN SYSTEM
ThirdParty · NOASSERTION
RENDERERCanvas 2D
DEPENDENCIESReact + Canvas 2D
OUTPUTAdaptive live canvas
MOTIONReduced-safe
WHAT IT DOES

An exact 43 × 17 pixel Noggle rests inside a quiet signal field at the family's tighter scale. The field falls away around its authored silhouette while a restrained current and pointer highlight travel only across real cells. Noggles are the signature glasses of Nouns, an Ethereum experiment that auctions one Noun every day and directs its shared treasury through public, onchain governance.

BEST FOR
  • Product interfaces
  • Campaign systems
  • Editorial experiences
KEY FEATURES
  • The logo is sampled once from ART/noggles_pixel.svg on its exact 1096.742737 × 425.151198 viewBox
  • All 433 authored cells retain the SVG's 25.830444 pitch and 11.864097 square size
  • Current and pointer light change color only; the resting grid never shifts, stretches or invents cells
  • The shared 20% family scale restores negative space without weakening the mark's silhouette
  • Every control maps directly to this component's independent renderer contract
  • Full-size and compact previews use the same implementation and behavior
PERFORMANCE

Adaptive sampling, capped DPR and visibility-based suspension keep the renderer predictable. Test density on low-power mobile hardware before increasing it.

INTERACTION

Pointer and touch coordinates are container-scoped; offscreen renderers stop work and pixel ratio is capped.

ACCESSIBILITY

The visual canvas is decorative by default. Pair it with a semantic heading or description, and reduced motion holds a stable rendered frame.

BEHAVIOR

Built to move without taking over.

  • The logo is sampled once from ART/noggles_pixel.svg on its exact 1096.742737 × 425.151198 viewBox
  • All 433 authored cells retain the SVG's 25.830444 pitch and 11.864097 square size
  • Current and pointer light change color only; the resting grid never shifts, stretches or invents cells
  • The shared 20% family scale restores negative space without weakening the mark's silhouette
  • Every control maps directly to this component's independent renderer contract
  • Full-size and compact previews use the same implementation and behavior

SOURCE STATUS

Source is not distributed. Noggle artwork and redistribution rights are not included in the MIT package.