Pull Quote Reveal

Build an editorial pull-quote reveal. Structure: a vertical accent bar on the reading side, and next to it the quote: a giant decorative quotation mark sitting behind the text at ~16% accent opacity (serif, ~3x the text size), 2 short lines of heavy display text, and a small monospace citation underneath. The choreography, on scroll into view (once), four beats: 1. The accent bar draws itself downward (scaleY from 0, transform-origin top, 0.55s, decisive ease) 2. The ghost quotation mark springs in behind (scale from 0 with a -14deg tilt settling to 0, soft spring: stiffness ~300, damping ~18, delay ~0.15s) 3. The quote lines rise out of individual overflow-hidden masks (y from 115% to 0, 0.55s each, 130ms stagger, starting ~0.25s) 4. The citation fades in last (~0.7s in) Total sequence ~1.1s - assertive, not slow. Keep the mark behind the text (z-order), never overlapping legibility; it's texture, not content. Accessibility: use a real blockquote and cite; the decorative mark is aria-hidden. Under prefers-reduced-motion the whole quote renders assembled. Colors as tokens: ink text, one accent for bar and mark, muted citation. Two lines max - a pull quote is a punch, not a paragraph. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.