cradle

Inspiration**

Every product site has a widget in the corner. They all look the same. A chat bubble, maybe an avatar. But they are locked into specific platforms, hard to customize, and usually just route to a support desk. We wanted something that works the other way around: give your site a character that can do whatever you need it to. An open infrastructure, not another SaaS widget.

What it does

Cradle is open source character infrastructure for the web. It comes as a four-step Studio workflow: give it a URL, it crawls your site and pulls your brand assets. You review what it found, pick a character from the Petdex catalog (an open registry of animated sprites), and get an HTML snippet you paste into your site. The result is a <cradle-character> custom element with full Shadow DOM isolation, sprite animation, a visual state machine (idle, thinking, responding, etc.), and browser events you can hook into. You bring your own AI model, database, and conversation logic. Cradle just handles the character.

How we built it

We started with Codex and GPT-5.6 to scaffold the whole monorepo structure. The Studio UI, widget custom element, and Remotion video were all generated in Codex sessions. We would describe what we wanted, iterate on the output, and commit when it worked. The early product was a single massive Studio page and a 300-line widget file straight from Codex.

From there we built the API layer by hand. The runtime handles token signing, management key verification, CORS validation, and sprite asset storage. We wrote two database backends (Postgres for production, in-memory for dev) and a Firecrawl integration for site crawling. The Petdex package validates spritesheets against a strict atlas format and composites them into useable sprite maps. OpenBrand runs in parallel during site onboarding. We used Remotion for the launch video and ElevenLabs for narration.

Challenges we ran into

The sprite atlas format took a few tries. Petdex uses a Codex convention with 192x208 cells, 8 columns, 9 rows. Validation had to check dimensions, cell count, frame transparency, and chroma key removal in one pass without eating memory. Sharp pipelines on large WebP files are finicky.

The widget security model was another hard problem. Management keys are long-lived secrets returned once at installation. They never touch the browser. Widget tokens are HMAC-signed with 5-minute expiry, bound to a specific installation and origin. Getting that right meant timing-safe comparisons, careful hash storage, and a token verification flow that does not leak the management key.

The hardest decision was what not to build. We deliberately kept the conversation AI layer out of the open-source release. Cradle is infrastructure, not a chatbot. You bring your own model and logic. That constraint forced us to design clean browser events and a controller API that works with any backend.

Accomplishments that we're proud of

The widget works on any site. React, Vue, static HTML, WordPress. One script tag and a custom element. The character animates through states, responds to events, and does not leak styles or scripts into the host page.

The Petdex integration was the most fun to build. An open character marketplace with animated sprites, each one validated and composited on the fly. The state machine maps character animations to web interactions in a way that feels natural.

The video came together better than expected. Five scenes, 42 seconds, narrated with ElevenLabs. It says everything we needed it to say without being a feature walkthrough.

What we learned

Web components are underrated. The Shadow DOM isolation made embedding trivial. We did not need React or Vue to build a widget that works everywhere.

Sprite animation is harder than it looks. Getting frame timing right, respecting reduced motion, and loading spritesheets efficiently took more iterations than we expected.

Building API-first was the right call. The runtime is a set of clear endpoints that the Studio consumes. We could swap the Studio frontend entirely without touching the backend.

What's next for Cradle

The conversational AI layer that uses the knowledge base to answer visitor questions is the obvious next piece. We have the Vercel AI SDK wired in and the model config ready. The chat endpoint exists in the runtime, it is just not filled in yet.

Qualra integration for verified customer identity and long-term memory. More Petdex characters. A hosted version for people who do not want to self-host. And we want to get more contributors into the Petdex ecosystem so the character catalog grows.

Built With

• codex
• gpt5.6