WildcodeField

canvasanimationclient

A living wordmark grown through your lettering

A living wordmark: flowers, vines and critters grow through your lettering on an interactive canvas. Pointer-reactive, reduced-motion aware.

Playground

Tweak the props in the toolbox — the preview updates in realtime. “Copy code” gives you the exact JSX for the current tweaks.

Installation

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

bash

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

The command installs the component source (plus its engine / type files when the component ships one). No other dependencies — everything is dependency-free canvas, SVG and CSS.

Usage

Import the component and drop it in — every prop in the toolbox is a regular React prop:

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

Highlights

Hand-lettered shapes become a stencil while flowers, vines and little critters grow through them
A paint beam reveals the bloom — and your pointer is a second beam; click for shockwaves
The whole scene is a single imperative canvas; React never re-renders it
role="img" with aria-label, and prefers-reduced-motion renders a static full-bloom frame

Example — Clipped inside the letters

Tines-style: objects only exist inside the letter shapes — set the same knobs in the toolbox to preview it live.

example.tsx

<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.
flowerDensity	number	1	Multiplier on how many objects get placed.
vineCount	number	26	How many vines grow.
droneCount	number	4	How many critters roam.
sway	number	0.14	Sway amplitude in radians.
beamDur	number	6	Seconds for the grow sweep.
holdDur	number	5	Seconds for the full-bloom hold.

Notes

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.
The cycle runs GROW → HOLD → RETRACT → REST; restart it any time from the toolbox.