Runnable recipe · @scout-ui/sticker-trail

A bounded StickerTrail hero

Add one finite pointer flourish to a campaign message while the underlying content remains ordinary and selectable.

Live example

Bounded campaign region

Make the launch feel alive.

The message and link work without pointer decoration.

Read the implementation notes

Source

tsx

import { StickerTrail } from "@scout-ui/sticker-trail";

<StickerTrail maxActive={10} preset="scout" stickers={stickers}>
  <HeroContent />
</StickerTrail>

Dependencies

Install @scout-ui/sticker-trail and the shared @scout-ui/react/styles.css stylesheet. Artwork may come from @scout-ui/stickers or your own source.

Accessibility contract

The trail is decorative; the heading, copy, and native link carry the complete meaning.

Motion, touch, and adaptation

Reduced motion and coarse pointers keep the authored resting composition without a movement loop.