# ✦ Add a new ray Añadir un ray nuevo

Fill the form. Copy the generated HTML + CSS into blogy.html and you've got a new ray in the ✨ magic dropdown.Rellena el formulario. Copia el HTML + CSS generado en blogy.html y tendrás un ray nuevo en el desplegable ✨ magic.

Import existing ray block (paste & pre-fill)

Paste a `body:has(#X:checked){ … }` block from blogy.html. The fields below will be filled in.

loaded.
Identity

The ray ID is used as the radio input id (`my-labeler` → `#my-labeler`). Keep it short, lowercase, kebab-case.

Ray ID id="my-labeler"
Arm icon (visible in the magic dropdown)
📚 Pick from icon library…
📁 Upload your own

SVG or square PNG/JPG. Suggested: 64×64 px, transparent background, under 50 KB. Larger files are accepted but may slow rendering on small UI cells.

Arm label (small caption under the icon)
Topbar (logo · title · slogan)
Logo glyph --labeler-logo
Topbar title --labeler-title
Title size (1 = default) --labeler-title-scale
Slogan (typewriter line) --labeler-slogan
Show slogan
Notes section
Section title --labeler-section-title
Section tagline --labeler-section-tagline
Step panels (titles & intros)

Steps 2–5 in the stepper: Backgrounds, Animations, Text, Summary. Leave blank to keep the default.

Step 2 title --labeler-panel-2-title
Step 2 intro --labeler-panel-2-intro
Step 3 title --labeler-panel-3-title
Step 3 intro --labeler-panel-3-intro
Step 4 title --labeler-panel-4-title
Step 4 intro --labeler-panel-4-intro
Summary panel title --labeler-panel-5-title
Summary panel intro --labeler-panel-5-intro
Sounds panel title --labeler-panel-6-title
Stepper labels

Short lowercase labels under each step node. Only shown if the toggle below is on.

step 1
step 2
step 3
step 4
step 5
Show stepper labels
Action labels
Textarea italic hint --labeler-textarea-hint
Show textarea hint
"＋ Add" button label --labeler-add-label
Rater legend --labeler-rater-label
Rater emoji (4 cells)

Each cell shows a different reaction. Leave all blank to keep the default emoji.

Heart row
Fun row
Love row
Thoughts row
Swap the rater emojis
copied.
Display code
① HTML — radio input (paste near the other arm radios)

② HTML — arm cell (paste inside .magic-arms or .arm-list)

③ CSS — ray data block (paste inside the RAY DATA section)

copied.