ErikGH/Creeer-Web
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(recorrido): un fotograma, una cosa

Browse Source 
La pregunta y la respuesta compartían fotograma: la tarjeta de creeer
entraba debajo de la del lector y se veían las dos a la vez. El flujo que
pidió la dueña es pregunta → scroll → respuesta → scroll → pregunta, con
una sola cosa en pantalla cada vez.

Las dos tarjetas pasan a ocupar la misma celda de la rejilla, así que la
segunda toma el escenario que deja la primera en vez de apilarse bajo
ella, y entran desde márgenes opuestos para que el cambio se lea como un
relevo. Verificado tiempo a tiempo: los doce muestran exactamente una.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
erikghandClaude Opus 5 committed 2026-08-03 12:18:23 -06:00
1 parent 379d80b915
commit 253ff26fa2
1 file changed
+43 -35
Download Patch File Download Diff File Expand all files Collapse all files
components/primitives/EscenaDialogo.tsx
+43 -35
View File
@@ -62,42 +62,50 @@ export function EscenaDialogo({
{n} {n}
</motion.span> </motion.span>
{/* The reader's card. It gives way a little once the answer lands: still {/* One card per frame — never both. Both live in the same grid cell so
legible, no longer the thing you are looking at. */} the second can take the stage the first leaves, instead of stacking
<motion.div under it: the question is asked, it goes, and then the answer is the
animate={{ only thing on screen. They come in from opposite sides so the swap
opacity: respondida ? 0.72 : 1, reads as one card replacing another, not as one fading into the same
rotate: respondida ? -1.8 : -0.6, spot. */}
y: respondida ? -14 : 0, <div className="grid">
}} <motion.div
transition={{ duration: 0.5, ease: EASE }} animate={{
className="relative z-10 max-w-xl rounded-xl border border-azul-profundo/10 bg-white p-7 shadow-[0_28px_70px_-32px_rgba(10,29,61,0.5)] md:p-9" opacity: respondida ? 0 : 1,
> y: respondida ? -52 : 0,
<p className="text-[0.65rem] font-black uppercase tracking-[0.34em] text-dorado"> rotate: respondida ? -3.4 : -0.8,
{n} · {name} scale: respondida ? 0.96 : 1,
</p> }}
<p className="mt-4 font-sans font-black leading-[1.12] text-azul-profundo text-2xl md:text-4xl"> transition={{ duration: 0.5, ease: EASE }}
«{situacion}» style={{ pointerEvents: respondida ? 'none' : 'auto' }}
</p> className="col-start-1 row-start-1 self-center justify-self-start max-w-xl rounded-xl border border-azul-profundo/10 bg-white p-7 shadow-[0_28px_70px_-32px_rgba(10,29,61,0.5)] md:p-9"
</motion.div> >
<p className="text-[0.65rem] font-black uppercase tracking-[0.34em] text-dorado">
{n} · {name}
</p>
<p className="mt-4 font-sans font-black leading-[1.12] text-azul-profundo text-2xl md:text-4xl">
«{situacion}»
</p>
</motion.div>
{/* creeer's card, handed back. Navy against the reader's white, tilted the {/* creeer's card, handed back: navy against the reader's white, tilted
other way, overlapping the corner — two cards on a table, not two the other way, and coming in from the opposite margin. */}
paragraphs in a column. */} <motion.div
<motion.div animate={{
animate={{ opacity: respondida ? 1 : 0,
opacity: respondida ? 1 : 0, y: respondida ? 0 : 64,
y: respondida ? 0 : 70, rotate: respondida ? 1.6 : 5,
scale: respondida ? 1 : 0.94, scale: respondida ? 1 : 0.95,
rotate: respondida ? 1.6 : 5.5, }}
}} transition={{ duration: 0.55, ease: EASE }}
transition={{ duration: 0.55, ease: EASE }} style={{ pointerEvents: respondida ? 'auto' : 'none' }}
className="relative z-20 -mt-5 ml-auto max-w-lg rounded-xl bg-azul-profundo p-7 shadow-[0_34px_80px_-30px_rgba(10,29,61,0.75)] md:-mt-8 md:mr-6 md:p-9" className="col-start-1 row-start-1 self-center justify-self-end max-w-xl rounded-xl bg-azul-profundo p-7 shadow-[0_34px_80px_-30px_rgba(10,29,61,0.75)] md:mr-6 md:p-9"
> >
<span aria-hidden="true" className="absolute left-0 top-7 h-10 w-[3px] rounded-r bg-dorado md:top-9" /> <span aria-hidden="true" className="absolute left-0 top-7 h-10 w-[3px] rounded-r bg-dorado md:top-9" />
<Wordmark size="sm" onDark /> <Wordmark size="sm" onDark />
<p className="mt-4 text-base leading-relaxed text-white/75 md:text-xl">{respuesta}</p> <p className="mt-4 text-base leading-relaxed text-white/75 md:text-xl">{respuesta}</p>
</motion.div> </motion.div>
</div>
</motion.li> </motion.li>
); );
} }