WildcodeField

canvasclient component

A living wordmark: hand-lettered shapes become a stencil while flowers, vines and little critters grow through them — revealed by a paint beam that follows your pointer. The whole scene is a single imperative canvas; React never re-renders it.

Installation

Requires shadcn CLI. Run this from your project root — it writes the component, the engine and its types, then you import and go.

bash

npx shadcn@latest add "https://webcules.com/r/wildcode-field.json"

The command installs wildcode-field.tsx, wildcode-field-engine.js and its type declarations. No other dependencies — the engine is dependency-free canvas.

Playground

objects

critters

letters

clip objects inside letters

hover recolors

Move your pointer across the wordmark — it acts as a second paint beam. Click for shockwaves. The cycle runs GROW → HOLD → RETRACT → REST.

Usage

hero.tsx

import { WildcodeField } from "@webcules/ui/components/wildcode-field";

export function Hero() {
  return (
    <WildcodeField
      phrase="Start today"
      letterColor="#5839a8"
      spriteSet="flowers"   // flowers | stars | bubbles | hearts
      critterStyle="drone"  // drone | bee | ghost
      className="my-8"
    />
  );
}

Example — clipped inside the letters

clipped.tsx

// Tines-style: objects only exist inside the letter shapes
<WildcodeField
  phrase="Grow with us"
  spriteSet="stars"
  letterColor="#1d7a8c"
  clipFlowers
  seed={12}
/>

Props

Prop	Type	Default	Description
phrase	string	"Start today"	The wordmark text. Auto-fits, wraps, and rebuilds on change.
letterColor	string	"#5839a8"	Fill color of the base letters.
spriteSet	"flowers" \| "stars" \| "bubbles" \| "hearts"	"flowers"	Which object grows inside the letters.
critterStyle	"drone" \| "bee" \| "ghost"	"drone"	The roaming critters that carry the paint glows.
clipFlowers	boolean	false	Clip objects to the letter shapes. false lets them spill past the edges.
hoverRecolor	boolean	true	Hovering an object recolors it to a random palette family.
seed	number	7	Deterministic layouts: same seed, same garden.
beamDur / holdDur	number	6 / 5	Seconds for the grow sweep and the full-bloom hold.
flowerDensity	number	1	Multiplier on how many objects get placed.
vineCount / droneCount	number	26 / 4	How many vines grow and critters roam.
sway	number	0.14	Sway amplitude in radians.

Notes

Accessibility: the region is role="img" with an aria-label, and prefers-reduced-motion renders a static full-bloom frame instead of animating.
Performance: sprites are prerendered once, layers redraw only when dirty, and the loop pauses when scrolled offscreen.
The pointer replaces the native cursor over the wordmark — keep that in mind when layering clickable content inside it.