Hesoyam

Marquee

An infinite ticker with Scroller-style edge fades. Hover pauses the motion.

Default

Slot chips, logos, or a line of copy. Extra copies fill the rail so the loop has no seam.

Edge
Serverless
ISR
Middleware
Images
Analytics

        

          1
          
          <Marquee>
        

          2
          
            <Badge variant="blue">Edge</Badge>
        

          3
          
            <Badge variant="green">Serverless</Badge>
        

          4
          
          </Marquee>

Reverse

reverse runs the rail the other way.

Edge
Serverless
ISR
Middleware
Images
Analytics

        

          1
          
          <Marquee reverse>
        

          2
          
            <Badge variant="blue">Edge</Badge>
        

          3
          
          </Marquee>

Duration

duration is seconds for one copy to travel its own width. Smaller is faster. Default is 40.

Edge
Serverless
ISR
Middleware
Images
Analytics

        

          1
          
          <Marquee :duration="20">
        

          2
          
            <Badge variant="blue">Edge</Badge>
        

          3
          
          </Marquee>

Pause on hover

pause-on-hover is on by default. Set it false only when the row is decorative and never contains a control.

Edge
Serverless
ISR
Middleware
Images
Analytics

        

          1
          
          <Marquee :pause-on-hover="false">
        

          2
          
            <Badge variant="blue">Edge</Badge>
        

          3
          
          </Marquee>

Text

A single line of copy also works. Keep it one sentence.

Deploy preview is live · Checks passed · Promote when ready

        

          1
          
          <Marquee>
        

          2
          
            <span>Deploy preview is live. Checks passed.</span>
        

          3
          
          </Marquee>

Best practices

  • Use Marquee for logos, status chips, or a short announcement rail — not for a list the user must read in order.
  • Keep pause-on-hover on when the slot has links or buttons so a pointer can hit the target.
  • Fades sit on both edges automatically. Do not add a second mask or box-shadow.
  • Tune speed with duration, not a custom keyframe. Keep item widths and the gap even so the loop does not hitch.
  • prefers-reduced-motion stops the animation. Do not re-enable it.
  • Duplicate nodes are aria-hidden. Put the real content in the default slot once.