SWCharacter Saga

Stage 1c is a direct refinement of Stage 1b with the same functionality — color wells, alpha sliders, stroke weight, breathing, spinning, and hue cycling — but using a Bootstrap accordion inside the Character card to reduce initial panel height.

What Changed from Stage 1b

• Accordion replaces flat sections in the Character card — The Fill Color, Stroke / Border, and Placement Display sections are now collapsible accordion panels. Symbol, Font, and Size remain always visible since they are the most frequently changed properties.
• Fill Color starts open — The most commonly used section is expanded on load so it behaves exactly like 1b for the most common workflow.
• Stroke and Placement start collapsed — These are secondary customizations. They slide open on demand without any scrolling.
• Multiple sections can be open at once — There is no mutual-exclusion lock; you can expand all three simultaneously if you want to compare Fill and Stroke side by side.
• Animations card is now visible without scrolling — The shorter Character card means the Animations card is in view on most screens by the time the page loads.

Under the Hood

No sketch logic changed from Stage 1b. The accordion is pure Bootstrap 5 HTML — the data-bs-toggle="collapse" and data-bs-target attributes on each header button drive the open/close animation. All DOM IDs are identical to 1b so the companion sketch (swCharacter1cSketch.js) is nearly unchanged.

Design Trade-offs

• Pro — Less scrolling; Animations card is visible sooner; panel feels less overwhelming on first glance.
• Pro — Accordion headers act as clear section labels, reinforcing what each group of controls does.
• Con — An extra click is required to reach a collapsed section; this may be surprising for users who expect everything to be immediately accessible.
• Stage 1b vs Stage 1c — Use 1b when you want all controls on one uninterrupted scroll; use 1c when the panel height is a concern or you want to teach progressive disclosure.