Brand and content

AnimatedSticker

Converted Telegram animation with an inline SVG or optimized WebP first frame.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { AnimatedSticker } from "@cofob/design-system-react";

/**
 * Complete AnimatedSticker parameter reference.
 * @param sticker
 *   type: AnimatedStickerModel
 *   required
 *   example: {sticker}
 * @param alt
 *   type: string
 *   required
 *   example: "Ada Lovelace"
 * @param playback
 *   type: "auto" | "static"
 *   default: "auto"
 *   example: "static"
 * @param preload
 *   type: "none" | "metadata" | "auto" | ""
 *   default: "metadata"
 *   example: {preload}
 * @param span attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function AnimatedStickerExample() {
  return (
    <><AnimatedSticker sticker={manifest.sticker} alt="Animated cartoon rat Chris" /><AnimatedSticker sticker={manifest.sticker} alt="Static first frame" playback="static" /></>
  );
}

Svelte

<script lang="ts">
  import { AnimatedSticker } from "@cofob/design-system-svelte";

  // Complete AnimatedSticker parameter reference.
  // sticker
  //   type: AnimatedStickerModel
  //   required
  //   example: {sticker}
  // alt
  //   type: string
  //   required
  //   example: "Ada Lovelace"
  // playback
  //   type: "auto" | "static"
  //   default: "auto"
  //   example: "static"
  // preload
  //   type: "none" | "metadata" | "auto" | ""
  //   default: "metadata"
  //   example: {preload}
  // span attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<AnimatedSticker sticker={manifest.sticker} alt="Animated cartoon rat Chris" />
<AnimatedSticker sticker={manifest.sticker} alt="Static first frame" playback="static" />

HTML

<!--
  Complete AnimatedSticker parameter reference.
  sticker
    type: AnimatedStickerModel
    required
    example: {sticker}
  alt
    type: string
    required
    example: "Ada Lovelace"
  playback
    type: "auto" | "static"
    default: "auto"
    example: "static"
  preload
    type: "none" | "metadata" | "auto" | ""
    default: "metadata"
    example: {preload}
  span attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<span class="cf-animated-sticker" data-cf-animated-sticker data-playback="auto" role="img" aria-label="Animated cartoon rat Chris"><span class="cf-animated-sticker__skeleton" aria-hidden="true"><svg viewBox="0 0 512 512">…</svg></span><video data-cf-animated-sticker-video data-cf-animated-sticker-src="/sticker.hash.webm" muted loop playsinline preload="metadata" aria-hidden="true"></video></span>
<span class="cf-animated-sticker" data-playback="static" role="img" aria-label="Static first frame"><span class="cf-animated-sticker__skeleton" aria-hidden="true"><svg viewBox="0 0 512 512">…</svg></span></span>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-animated-sticker`
Adapters	Native · React · Svelte
Primary props	sticker · alt · playback · preload · span attributes
Documented states	loading · playing · offscreen paused · static SVG only · globally disabled · reduced motion · load/play fallback
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`sticker`required	`AnimatedStickerModel`	`required`	React · Svelte · HTML	`{sticker}`	Converted WebM URL, dimensions, and either a trusted sanitized skeletonSvg for vector animation or firstFrameSrc for a video-based WebP first frame. Never pass unchecked user SVG.
`alt`required	`string`	`required`	React · Svelte · HTML	`"Ada Lovelace"`	Alternative text; use an empty string when the image is decorative.
`playback`	`"auto" \| "static"`	`"auto"`	React · Svelte · HTML	`"static"`	Use "static" to render only the SVG/WebP first frame and omit video entirely, guaranteeing no WebM request.
`preload`	`"none" \| "metadata" \| "auto" \| ""`	`"metadata"`	React · Svelte · HTML	`{preload}`	Native video preload hint; the SVG/WebP first frame is present in SSR HTML and is removed from the DOM after playback starts. Auto playback pauses outside the viewport and resumes when visible again.
`span attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.