diff --git a/components/primitives/EscenaDialogo.tsx b/components/primitives/EscenaDialogo.tsx index 36a2c54..7fbccb1 100644 --- a/components/primitives/EscenaDialogo.tsx +++ b/components/primitives/EscenaDialogo.tsx @@ -3,19 +3,23 @@ import { motion, useTransform, type MotionValue } from 'framer-motion'; import { Wordmark } from '@/components/primitives/Wordmark'; -// One beat of the pinned conversation, staged as two calling cards laid on a -// table: the reader's, in white, and creeer's, in navy, handed back. +// One beat of the pinned conversation. Not a card on a page — the whole frame +// is the message: the reader's situation set large on the light ground, then +// creeer's answer set large on azul-profundo, the section's own background +// turning over with it. +// +// One thing per frame, never both. The two halves share a grid cell so the +// answer takes the stage the question leaves instead of stacking under it, and +// they arrive from opposite sides so the swap reads as a relay. // // The cards are driven by STATE, not by scroll position. Mapping opacity // straight onto scroll made every intermediate position a valid frame, so -// stopping mid-swipe left creeer's card as a half-transparent grey rectangle — -// it read as a rendering fault. Scroll now only decides which beat we are on; -// the cards animate to that beat over time and always land somewhere finished, -// wherever the reader lets go. +// stopping mid-swipe left the answer as a half-transparent slab that read as a +// rendering fault. Scroll now only picks the beat; the frame animates to it +// over time and always lands somewhere finished, wherever the reader lets go. // -// Every scene stays mounted and stacked in the same place. Mounting only the -// active one would animate more cheaply and would strip five sixths of the -// section out of the static export. +// Every scene stays mounted. Rendering only the active one would animate more +// cheaply and would strip five sixths of the section out of the static export. const EASE = [0.22, 1, 0.36, 1] as const; @@ -44,66 +48,63 @@ export function EscenaDialogo({ // The one thing still tied to scroll. A drifting numeral never looks broken // at any position it can be caught in, so it costs nothing and keeps the // stage from feeling frozen between beats. - const cifraY = useTransform(progreso, [i * paso - paso, (i + 1) * paso + paso], [60, -60]); + const cifraY = useTransform(progreso, [i * paso - paso, (i + 1) * paso + paso], [70, -70]); return ( - {/* One card per frame — never both. Both live in the same grid cell so - the second can take the stage the first leaves, instead of stacking - under it: the question is asked, it goes, and then the answer is the - only thing on screen. They come in from opposite sides so the swap - reads as one card replacing another, not as one fading into the same - spot. */} -
+
+ {/* The reader's situation. */} -

+

{n} · {name}

-

+

«{situacion}»

- {/* creeer's card, handed back: navy against the reader's white, tilted - the other way, and coming in from the opposite margin. */} + {/* creeer's answer, on the navy the whole frame turns to. The point + label repeats here on purpose: with the question gone from the + screen, it is the only thing tying the answer to what it answers. */} -
diff --git a/components/sections/PuntosInflexion.tsx b/components/sections/PuntosInflexion.tsx index 31767b8..377cd75 100644 --- a/components/sections/PuntosInflexion.tsx +++ b/components/sections/PuntosInflexion.tsx @@ -111,11 +111,21 @@ function Escenificado() { {/* One viewport of stage, six viewports of scroll to move through it. */}
-
+
+ {/* The frame itself turns over on the answer. The whole stage goes to + azul-profundo, not a panel inside it — the answer is not a card on + the reader's page, it is creeer's ground. */} +