signature primitive
StickerTrail
Leave a bounded, performant trail inside one intentional region.
StickerTrail preview
Deterministic React output
Generated code
import { StickerTrail } from "@scout-ui/sticker-trail";
import { sparklePop } from "@scout-ui/stickers/definitions/sparkle-pop";
import { wonkyStar } from "@scout-ui/stickers/definitions/wonky-star";
import "@scout-ui/sticker-trail/styles.css";
export default function StickerTrailExample() {
return (
<StickerTrail
stickers={[sparklePop, wonkyStar]}
spacing={{ min: 32, max: 52 }}
>
<section style={{ minHeight: 320, padding: 32 }}>
<h2>Move inside this bounded region</h2>
<p>The trail stays decorative and pointer-safe.</p>
</section>
</StickerTrail>
);
}
Install
Scout UI is in alpha preflight and is not represented here as a public npm release. Inside the workspace, consume the frozen package contract by name.
import { StickerTrail } from "@scout-ui/sticker-trail";
import "@scout-ui/react/styles.css";Usage
Start with semantic content, then add the smallest expressive treatment the surrounding interface can support.
API
The public alpha surface is frozen. This page uses the same typed configuration definition as the full playground while keeping reference documentation in the reading flow.
Accessibility
Native semantics, visible focus, reduced motion, forced colors, and touch-safe interaction are release requirements—not optional examples.
Performance
High-frequency visual progress stays outside React state. This page hydrates only its navigation, utilities, and bounded preview.
Source
Inspect the implementation and tests in the public Scout UI repository. Code uses MIT licensing; official artwork uses its separately documented asset license.
Open Scout UI on GitHub ↗