Skip to content

Velocity Marquee

Closing call-to-action with giant text rows that speed up, reverse and skew with your scroll velocity.

  • scroll-velocity marquee
  • direction flip on scroll up
  • velocity skew
  • infinite wrap
velocity-marquee.prompt.md
# Build: "Velocity Marquee" call-to-action section

You are a senior creative front-end engineer. Build this closing CTA section exactly as specified.

## Target stack
React + Tailwind CSS v4 + Framer Motion

## Concept
Two rows of giant uppercase text scroll endlessly in opposite directions. Page scrolling speeds them up, scrolling up reverses their direction, and the text skews with the scroll velocity, so the section reacts physically to the reader. Under the rows sit a short CTA line and a button.

## Content (use verbatim)
- Row 1: "Design that moves" followed by the separator "✦", repeated
- Row 2: "Code that ships" followed by the separator "✦", repeated (row 2 is outlined: transparent fill with a 2px stroke in the text color; separators stay solid)
- CTA line: "Your next landing page is ten minutes away."
- Button: "Browse the blocks" followed by an arrow that bobs 5px right and back every 1.4s

## Layout
- Full-bleed rows with no side padding. Text size `clamp(3rem, 12cqw, 10rem)` (container-query width), weight 900, uppercase, line-height 1, tight tracking.
- Below the rows: on desktop, the CTA line on the left and the button on the right (max-width ~1024px); centered and stacked on mobile.
- Button: 56px tall pill, filled with the text color, label in the background color.

## Design tokens
- Background: #D7FF3A · Text: #0A0A0A

## Motion (the core of this block)
- Render four copies of the text in a flex track and translate the track on x by `wrap(-25%, 0%, baseX)` for a seamless loop.
- On every animation frame: `move = direction × baseVelocity × dt`. Base velocity is −3%/s for row 1 and +3%/s for row 2.
- Scroll factor: pass the page scroll velocity through a spring (damping 50, stiffness 400), then map 0…1000px/s to 0…5 without clamping. If the factor is negative, direction = −1; if positive, direction = 1. Then `move += direction × move × factor`, and `baseX += move`.
- Skew: map the smoothed velocity −2000…2000 to −10°…10° and apply it as `skewX` on the track.
- Button: on hover, scale 1.05 and rotate −2°; on press, scale 0.95 (spring stiffness 400, damping 15).

## Accessibility
- The rows are decorative (`aria-hidden`). The CTA line and button carry the meaning.
- Under `prefers-reduced-motion`, stop the frame loop.

## Deliverable
One self-contained component with a config object holding every value above.
0