Crossed Tapes

Written for the variant you picked above: Caution

Build a section that opens under two crossed tapes of rolling words. Props: words, eyebrow, title, lead, card {title, detail}, primary and secondary links {label, href}, palette {ground, ink, muted, line, a, aInk, b, bInk}, stripes, onNavigate and className. Helpers (pure functions): fold an offset into one repeat; a tape's pace — 46px/s boosted by the page's scroll speed up to five times (1 + min(4, |speed| / 500)); and a half-life of 0.25s that lets the measured scroll speed die away. The crossing is 21% of the width tall (190–280px). Two tapes 130% wide and 5% of the width tall (48–66px) cross in it: tape A rotated −4.5° on top, tape B rotated 3.5° under it, each with a soft shadow, and optional hazard stripes along both edges in the tape's ink. Each tape holds a track of four copies of the words, in heavy uppercase, alternately solid and outlined (text-stroke), separated by a ✦. A requestAnimationFrame loop — running only while the section is on screen — moves both tracks by the same offset, one left and one right, each wrapped by the measured width of one copy so they never jump. A capture-phase scroll listener on the document (so it hears any scrolling ancestor) measures scroll speed. The words also sit in a visually hidden line for screen readers. Reduced motion leaves the tapes still. Body (container queries): two columns — eyebrow, a heavy uppercase title and a muted lead on the left; on the right a card in tape A's colour, tilted 1.5°, with a bold heading, a detail line, a primary button in tape B's colours and an outlined secondary; buttons lift and tilt on hover. One column below 780px. Selected variant — Caution (caution): Caution tape: yellow #ffd400 with black words and hazard stripes crossed over black tape with yellow words, on off-white #f2efe6 with black ink. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Scroll and the tapes speed up; the links work as normal. Motion: Tapes roll at 46px/s in opposite directions, up to five times faster while scrolling. Reduced motion keeps them still. Accessibility: A labelled section with real links; the rolling tapes are hidden from screen readers and their words given once as text. Contrast holds on the tapes and the card. Responsive behavior: Tapes scale with the width; the body stacks below 780px. Touch: Touch scrolling speeds the tapes up the same way. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Scroll and the tapes speed up; the links work as normal.

Motion

Tapes roll at 46px/s in opposite directions, up to five times faster while scrolling. Reduced motion keeps them still.

Accessibility

A labelled section with real links; the rolling tapes are hidden from screen readers and their words given once as text. Contrast holds on the tapes and the card.

Responsive

Tapes scale with the width; the body stacks below 780px.

On touch

Touch scrolling speeds the tapes up the same way.