Ultron Workers

Component library

The marketing worker draws on a library of registered visual components: patterns, shaders, marquees, ripple effects, particle fields. Each component has an id the planner can reference, a default prop set, and a constraint on where it can be positioned. The component index lives in R2 so the planner can read summaries of every available component without inlining them in the prompt.

Updated today

Overview

At a glance

Registered components: 31
Registry file: cf-workers/marketing-swarm/carousel-engine/src/library-registrations.tsx
Component index (R2): carousel-engine-index/component-index.json
Themes file: cf-workers/marketing-swarm/carousel-engine/src/themes.ts
Default theme: editorial-premium

The component index

A JSON file in R2 enumerating every component the renderer knows how to draw.

r2://carousel-engine-index/component-index.jsonjson

1{

2 "components": [

3 {

4 "id": "magicui/dot-pattern",

5 "kind": "pattern",

6 "purpose": "subtle background grid",

7 "props": { "cr": "number, default 1", "width": "number, default 24", "height": "number, default 24" },

8 "slotAffinity": ["fullbleed-backdrop"],

9 "vibeTags": ["minimal", "editorial"]

10 },

11 {

12 "id": "shaders/aurora",

13 "kind": "shader",

14 "purpose": "animated colour wash for hero slides",

15 "props": { "speed": "number, default 0.8", "palette": "string, named" },

16 "slotAffinity": ["fullbleed-backdrop", "hero-overlay"],

17 "vibeTags": ["bold", "premium"]

18 }

19 // ...31 entries

20 ]

21}

Note

The index is generated by a build script that walks library-registrations.tsx, extracts each component's metadata, and enriches the purpose and vibe tags with a Gemma pass. The enriched index lets the planner pick components by feel rather than by exact name.

Registration

A component is registered by adding an import and an entry to library-registrations.tsx.

cf-workers/marketing-swarm/carousel-engine/src/library-registrations.tsxtsx

1import { DotPattern } from "@/registry/magicui/dot-pattern"

2import { Aurora } from "@/registry/shaders/aurora"

4registerLibraryComponent({

5 id: "magicui/dot-pattern",

6 kind: "pattern",

7 Component: DotPattern,

8 defaultProps: { cr: 1, width: 24, height: 24 },

9 slotAffinity: ["fullbleed-backdrop"],

10})

12registerLibraryComponent({

13 id: "shaders/aurora",

14 kind: "shader",

15 Component: Aurora,

16 defaultProps: { speed: 0.8, palette: "twilight" },

17 slotAffinity: ["fullbleed-backdrop", "hero-overlay"],

18})

Themes

A theme is a palette plus type scale plus rhythm. Slides inherit the active theme unless they override colours explicitly.

cf-workers/marketing-swarm/carousel-engine/src/themes.tsts

1export interface Theme {

2 id: string

3 palette: { bg: string; fg: string; accent: string; muted: string }

4 fonts: { display: string; body: string; mono: string }

5 typeScale: { hero: number; section: number; body: number; caption: number }

6 rhythm: { gridX: string; gridY: string } // CSS-percent units

7}

9export const editorialPremium: Theme = {

10 id: "editorial-premium",

11 palette: { bg: "#0a0a0a", fg: "#ffffff", accent: "#ffcc00", muted: "#444444" },

12 fonts: { display: "Tiempos", body: "Inter", mono: "JetBrains Mono" },

13 typeScale: { hero: 96, section: 56, body: 28, caption: 18 },

14 rhythm: { gridX: "4%", gridY: "4%" },

15}

Pattern components

Backdrops the planner reaches for first.

Component	Purpose
`magicui/dot-pattern`	Subtle dotted grid for hero slides
`magicui/grid-pattern`	Square grid backdrop
`magicui/animated-grid-pattern`	Grid with subtle animation
`magicui/flickering-grid`	Grid with flicker cells
`magicui/particles`	Sparse particle field
`magicui/meteors`	Sweeping meteor streaks
`magicui/retro-grid`	Perspective grid
`magicui/ripple`	Concentric ripple

Shader components

Paper Design WebGL-style shaders for premium-feel backgrounds.

Component	Purpose
`shaders/aurora`	Slow-moving colour wash
`shaders/mesh-gradient`	Gradient mesh that drifts

Primitives

Smaller library pieces used for accents and overlays.

Category	Examples
Borders and beams	border-beam, shine-border, neon-gradient-card
Cards	magic-card, neon-gradient-card
Marquees and orbits	marquee, orbiting-circles, icon-cloud
Globes and avatars	globe, avatar-circles
Text effects	animated-gradient-text, aurora-text, sparkles-text, line-shadow-text
Numbers	number-ticker
Buttons	shimmer-button, rainbow-button, pulsating-button

Tip

Text effects are rarely the right call for a carousel because they animate; carousel slides are static PNGs and an animated effect rasterises to a single frozen frame. Use text effects only when the frozen state of the effect is what you want.

File map

cf-workers/marketing-swarm/carousel-engine/src

library-registrations.tsximports + registerLibraryComponent calls

themes.tsTheme interface + editorialPremium

compile.tsxrenders each element kind through the registered Component

cf-workers/marketing-swarm

scripts

index-pass1-static.mjsextract metadata from library-registrations

index-pass2-enrich.mjsGemma enrich pass for purpose + vibe tags