Skip to content

Sticker assets

576 stickers, split by pack.

408 static WebP stickers and 168 transparent VP9 animations. Animated cards render a colored inline SVG first frame during SSR and request WebM only when scrolled into view.

Use the package

Prefer isolated component imports. The root entrypoint contains only pack descriptors; catalogs and full SVG manifests remain opt-in.

Install and copy media

bash
npm install @cofob/design-system-css @cofob/design-system-stickers
cf-stickers copy --out-dir public/stickers

React

tsx
import "@cofob/design-system-css/index.css";
import { AnimatedStickerToggle } from "@cofob/design-system-react";
import AnimatedChris001 from "@cofob/design-system-stickers/react/AnimatedChris001";

<AnimatedStickerToggle label="Animated stickers" />
<AnimatedChris001 alt="Chris reacting with surprise" />
<AnimatedChris001 alt="Still first frame of Chris" playback="static" />

Svelte

svelte
<script lang="ts">
  import "@cofob/design-system-css/index.css";
  import { AnimatedStickerToggle } from "@cofob/design-system-svelte";
  import AnimatedChris001 from "@cofob/design-system-stickers/svelte/AnimatedChris001";
</script>

<AnimatedStickerToggle label="Animated stickers" />
<AnimatedChris001 alt="Chris reacting with surprise" />
<AnimatedChris001 alt="Still first frame of Chris" playback="static" />

Metadata and raw assets

typescript
import { resolveStickerAsset } from "@cofob/design-system-stickers";
import { animatedChris001Sticker } from "@cofob/design-system-stickers/stickers/animated-chris-001";
import catalog from "@cofob/design-system-stickers/catalogs/animated-chris" with { type: "json" };

const mediaUrl = resolveStickerAsset(animatedChris001Sticker);
const firstCatalogEntry = catalog.stickers[0];
Animation is progressive

The generated component starts with an inline SVG for TGS or a WebP first frame for video stickers. It assigns the video URL on viewport intersection, removes the first frame after playback starts, pauses on the current video frame outside the viewport, and restores the first frame on reduced motion, load failure, rejected playback, or playback="static". Set data-cf-animated-stickers="disabled" on <html> or useAnimatedStickerToggle to persist the preference and unload every WebM globally; static SVG/WebP first frames and ordinary stickers remain available.

Sticker packs

Each route loads one small catalog and only that pack's first-frame manifests and media.