signature primitive

StickerTrail

Leave a bounded, performant trail inside one intentional region.

alpha@scout-ui/sticker-trail

Code

Deterministic React output

Generated code

Plain TSX ready

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>
  );
}

Open full playground →

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.

tsx

import { StickerTrail } from "@scout-ui/sticker-trail";
import "@scout-ui/react/styles.css";

Usage

Scope Trail to one bounded region and supply your own sources or official definitions structurally.

tsx

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>
  );
}

Examples

Inspect a complete authored setting, then adapt it without copying private implementation details.

Open the related recipe →

API

StickerTrailProps / StickerTrailOptions is part of the frozen alpha surface. The table below is generated from the same typed schema that powers presets, preview, Copy Code, share URLs, and Copy AI Prompt.

Prop	Control	Default	Contract
`preset`	segmented	`"scout"`	Start from a bounded Trail preset.
`stickers`	sticker	`"sparkle-pop"`	Choose the first approved source in the authored sequence.
`enabled`	boolean	`true`	Run the bounded enhancement when capability policy permits.
`size`	range	`78`	Set the center of a safe size range.
`spacing`	range	`42`	Set the center of a velocity-aware spacing range.
`lifetime`	number	`1100`	Keep each pooled visual finite.
`maxActive`	range	`24`	Bound the fixed DOM pool below the engine hard ceiling.
`exit`	segmented	`"fade"`	Choose a finite exit treatment.
`sequence`	segmented	`"ordered"`	Use ordered or seeded random selection.
`touch`	segmented	`"none"`	Keep Trail off on touch or allow deliberate tap placement.
`clip`	boolean	`true`	Prevent effect overflow beyond the bounded preview.
`reducedMotion`	select	`"system"`	Honor the system or always suppress the trail.

Presets

DefaultBalanced Scout trail.
CalmWider and quieter.
Controlled chaosHigh variance with a bounded pool.

Accessibility

Trail is decorative and never announces spawns. Underlying links, buttons, and selectable text remain the complete interaction.

Motion and reduced motion

No pointer listener or movement loop is registered; caller-rendered content remains as the static experience.

Touch and small screens

Coarse pointers are off by default. Optional tap mode spawns only after a deliberate uncancelled tap and never captures scrolling.

SSR and React Server Components

The client leaf emits a deterministic inert pool for stable hydration. The standalone package root carries its narrow client directive.

Performance

Pointer samples are frame-coalesced, coordinates stay container-local, and a fixed recycled pool is capped by configured and hard limits.

Constraints

Avoid site-wide reading surfaces, data entry, unbounded node history, or using decorative spawns as required feedback.

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 the public source file ↗