Accordion Morph

Uso

<AccordionMorph items={[{ question: '...', answer: '...' }]} startOpen={0} />
// + una vez por pagina:
useEffect(() => initAccordionMorph(), []);

Props

Gotchas

• react

  El componente NO anima solo: emparejar con initAccordionMorph() de @atom-uikit/animations (gsap + CustomEase + SplitText globales). Sin el behavior es un disclosure estatico cerrado.

• css-modules

  Pildora y panel pintan su fondo con --card + --border y el texto usa --card-foreground + opacity: siguen al tema (blanco en light, oscuro en dark). El liquido va en --secondary. No sobreescribir esos fondos: son el rol crisp que tapa el wobble del filtro.

• a11y

  FUNCIONAL: reduced-motion y data-motion-exempt abren/cierran instantaneo via DOM directo — el disclosure jamas depende de gsap. aria-expanded/aria-hidden/inert los escribe el behavior.

• layout

  El filtro SVG viaja como HtmlEmbed en el paste. El goo exige gsap+CustomEase en el footer del site; SplitText es opcional (sin el, la respuesta hace fade en vez de reveal por lineas).

Anatomía CSS

<div class="accordion-morph">
  <span class="accordion-morph__answer"></span>
  <span class="accordion-morph__answer-line"></span>
  <span class="accordion-morph__filter-svg"></span>
  <span class="accordion-morph__goo"></span>
  <span class="accordion-morph__goo-panel"></span>
  <span class="accordion-morph__goo-pill"></span>
  <span class="accordion-morph__icon"></span>
  <span class="accordion-morph__index"></span>
  <span class="accordion-morph__list"></span>
  <span class="accordion-morph__panel"></span>
  <span class="accordion-morph__panel-inner"></span>
  <span class="accordion-morph__question"></span>
  <span class="accordion-morph__row"></span>
  <span class="accordion-morph__trigger"></span>
</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS (@atom-uikit/css/components.css</code>, <code>@atom-uikit/tokens/tokens.css).

/* -------------------------------------------------------------------------
   Accordion Morph

   FAQ accordion donde la respuesta "se vierte" de la pildora como liquido
   (filtro goo). CSS es dueno del estado ESTATICO: pildora y panel pintan su
   propio fondo (por eso no hay twins "crisp" — ver accordion-morph.ts). El
   motion vive integro en packages/animations/src/accordion-morph.ts.

   La capa goo arranca invisible: solo el behavior la enciende. Sin JS (o con
   reduced-motion) el componente es un disclosure normal y completo.

   Colores: superficie = card + border (blanco en light, oscuro en dark — el
   bloque SIGUE al tema, decision Karen 2026-08-03; primary lo invertia).
   Jerarquia del texto via opacity tokens, no colores nuevos.

   Parts: .accordion-morph, __list, __row, __goo, __goo-pill, __goo-panel,
          __trigger, __index, __question, __icon, __panel, __panel-inner,
          __answer, __answer-line, __filter-svg
   ------------------------------------------------------------------------- */

/* Sin max-width propio: el ancho lo decide el layout que lo contenga
   (structure-only) — el 560px del original era el marco de su demo. */
.accordion-morph {
  position: relative;
  width: 100%;
}

.accordion-morph__filter-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.accordion-morph__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accordion-morph__row {
  position: relative;
}

/* Capa filtrada: SOLO formas solidas — el filtro goo destruye el texto.
   Invisible hasta que el behavior la enciende (estado estatico sin halos). */
.accordion-morph__goo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

/* El liquido va en secondary, un paso mas oscuro que card y background en
   ambos temas: el cuello del vertido se lee como puente sutil, no invisible
   (card sobre background casi no contrasta) ni como mancha (primary gritaba). */
.accordion-morph__goo-pill,
.accordion-morph__goo-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #efefef;
  will-change: transform;
}

/* Radio constante — NUNCA se anima; el behavior lo aparca con inset detras
   de la capsula para que sus esquinas no asomen en reposo. */
.accordion-morph__goo-panel {
  border-radius: 16px;
}

/* La pildora pinta su propio fondo: elemento real y opaco ENCIMA del filtro,
   asi el wobble del blur queda tapado salvo en el cuello liquido. */
.accordion-morph__trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 16px 20px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 9999px;
  cursor: pointer;
  text-align: left;
  color: #0a0a0a;
  font-family: inherit;
  box-sizing: border-box;
}

.accordion-morph__trigger:hover {
  background-color: #f5f5f5;
}

.accordion-morph__trigger:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.accordion-morph__index {
  flex-shrink: 0;
  min-width: 24px;
  font-size: 12.8px;
  font-weight: 500;
  color: #0a0a0a;
  opacity: 0.5;
}

.accordion-morph__question {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: #0a0a0a;
}

.accordion-morph__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #0a0a0a;
  opacity: 0.8;
  transform-origin: 50% 50%;
  will-change: transform;
}

.accordion-morph__panel {
  position: relative;
  z-index: 1;
  height: 0;
  overflow: hidden;
  will-change: height;
}

/* El panel tambien pinta su fondo (mismo rol crisp que la pildora). El
   margin-top ES el gap que el goo puentea — el behavior lo lee de
   --spacing-3 en runtime: cambiar el token mueve ambos a la vez. */
.accordion-morph__panel-inner {
  margin-top: 12px;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
}

.accordion-morph__answer {
  margin: 0;
  font-size: 12.8px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  opacity: 0.8;
}

/* Mascara de linea para el reveal de SplitText: el clip vertical corta el
   texto que sube; el respiro em evita decapitar descendentes. */
.accordion-morph__answer-line {
  overflow-x: visible;
  overflow-y: clip;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

@media (max-width: 767px) {
  .accordion-morph__trigger {
    padding: 12px 16px;
    gap: 12px;
  }

  .accordion-morph__panel-inner {
    padding: 16px;
  }
}

@media (max-width: 479px) {
  .accordion-morph__index {
    display: none;
  }
}