Replace the component name with any label shown below. The equivalent Svelte path uses/svelte/ instead of /react/.
tsx
import AnimatedChris001 from "@cofob/design-system-stickers/react/AnimatedChris001";<AnimatedChris001 alt="Describe this sticker in context" />
All stickers
Animated WebM is lazy: below-the-fold videos have no src until their card intersects the viewport, and playback pauses whenever a card leaves it. The global switch unloads animated WebM while keeping ordinary WebP stickers and SVG/WebP first frames visible. The preference is preserved across page reloads.
AnimatedChris001
AnimatedChris001tgs
import AnimatedChris001 from "@cofob/design-system-stickers/react/AnimatedChris001";
<AnimatedChris001 alt="Describe this sticker in context" /><script>
import AnimatedChris001 from "@cofob/design-system-stickers/svelte/AnimatedChris001";
</script>
<AnimatedChris001 alt="Describe this sticker in context" />
🤩
AnimatedChris002
AnimatedChris002tgs
import AnimatedChris002 from "@cofob/design-system-stickers/react/AnimatedChris002";
<AnimatedChris002 alt="Describe this sticker in context" /><script>
import AnimatedChris002 from "@cofob/design-system-stickers/svelte/AnimatedChris002";
</script>
<AnimatedChris002 alt="Describe this sticker in context" />
🤩
AnimatedChris003
AnimatedChris003tgs
import AnimatedChris003 from "@cofob/design-system-stickers/react/AnimatedChris003";
<AnimatedChris003 alt="Describe this sticker in context" /><script>
import AnimatedChris003 from "@cofob/design-system-stickers/svelte/AnimatedChris003";
</script>
<AnimatedChris003 alt="Describe this sticker in context" />
🤩
AnimatedChris004
AnimatedChris004tgs
import AnimatedChris004 from "@cofob/design-system-stickers/react/AnimatedChris004";
<AnimatedChris004 alt="Describe this sticker in context" /><script>
import AnimatedChris004 from "@cofob/design-system-stickers/svelte/AnimatedChris004";
</script>
<AnimatedChris004 alt="Describe this sticker in context" />
🤩
AnimatedChris005
AnimatedChris005tgs
import AnimatedChris005 from "@cofob/design-system-stickers/react/AnimatedChris005";
<AnimatedChris005 alt="Describe this sticker in context" /><script>
import AnimatedChris005 from "@cofob/design-system-stickers/svelte/AnimatedChris005";
</script>
<AnimatedChris005 alt="Describe this sticker in context" />
🤩
AnimatedChris006
AnimatedChris006tgs
import AnimatedChris006 from "@cofob/design-system-stickers/react/AnimatedChris006";
<AnimatedChris006 alt="Describe this sticker in context" /><script>
import AnimatedChris006 from "@cofob/design-system-stickers/svelte/AnimatedChris006";
</script>
<AnimatedChris006 alt="Describe this sticker in context" />
🤩
AnimatedChris007
AnimatedChris007tgs
import AnimatedChris007 from "@cofob/design-system-stickers/react/AnimatedChris007";
<AnimatedChris007 alt="Describe this sticker in context" /><script>
import AnimatedChris007 from "@cofob/design-system-stickers/svelte/AnimatedChris007";
</script>
<AnimatedChris007 alt="Describe this sticker in context" />
🤩
AnimatedChris008
AnimatedChris008tgs
import AnimatedChris008 from "@cofob/design-system-stickers/react/AnimatedChris008";
<AnimatedChris008 alt="Describe this sticker in context" /><script>
import AnimatedChris008 from "@cofob/design-system-stickers/svelte/AnimatedChris008";
</script>
<AnimatedChris008 alt="Describe this sticker in context" />
🤩
AnimatedChris009
AnimatedChris009tgs
import AnimatedChris009 from "@cofob/design-system-stickers/react/AnimatedChris009";
<AnimatedChris009 alt="Describe this sticker in context" /><script>
import AnimatedChris009 from "@cofob/design-system-stickers/svelte/AnimatedChris009";
</script>
<AnimatedChris009 alt="Describe this sticker in context" />
🤩
AnimatedChris010
AnimatedChris010tgs
import AnimatedChris010 from "@cofob/design-system-stickers/react/AnimatedChris010";
<AnimatedChris010 alt="Describe this sticker in context" /><script>
import AnimatedChris010 from "@cofob/design-system-stickers/svelte/AnimatedChris010";
</script>
<AnimatedChris010 alt="Describe this sticker in context" />
🤩
AnimatedChris011
AnimatedChris011tgs
import AnimatedChris011 from "@cofob/design-system-stickers/react/AnimatedChris011";
<AnimatedChris011 alt="Describe this sticker in context" /><script>
import AnimatedChris011 from "@cofob/design-system-stickers/svelte/AnimatedChris011";
</script>
<AnimatedChris011 alt="Describe this sticker in context" />
🤩
AnimatedChris012
AnimatedChris012tgs
import AnimatedChris012 from "@cofob/design-system-stickers/react/AnimatedChris012";
<AnimatedChris012 alt="Describe this sticker in context" /><script>
import AnimatedChris012 from "@cofob/design-system-stickers/svelte/AnimatedChris012";
</script>
<AnimatedChris012 alt="Describe this sticker in context" />
🤩
AnimatedChris013
AnimatedChris013tgs
import AnimatedChris013 from "@cofob/design-system-stickers/react/AnimatedChris013";
<AnimatedChris013 alt="Describe this sticker in context" /><script>
import AnimatedChris013 from "@cofob/design-system-stickers/svelte/AnimatedChris013";
</script>
<AnimatedChris013 alt="Describe this sticker in context" />
🤩
AnimatedChris014
AnimatedChris014tgs
import AnimatedChris014 from "@cofob/design-system-stickers/react/AnimatedChris014";
<AnimatedChris014 alt="Describe this sticker in context" /><script>
import AnimatedChris014 from "@cofob/design-system-stickers/svelte/AnimatedChris014";
</script>
<AnimatedChris014 alt="Describe this sticker in context" />
🤩
AnimatedChris015
AnimatedChris015tgs
import AnimatedChris015 from "@cofob/design-system-stickers/react/AnimatedChris015";
<AnimatedChris015 alt="Describe this sticker in context" /><script>
import AnimatedChris015 from "@cofob/design-system-stickers/svelte/AnimatedChris015";
</script>
<AnimatedChris015 alt="Describe this sticker in context" />
🤩
AnimatedChris016
AnimatedChris016tgs
import AnimatedChris016 from "@cofob/design-system-stickers/react/AnimatedChris016";
<AnimatedChris016 alt="Describe this sticker in context" /><script>
import AnimatedChris016 from "@cofob/design-system-stickers/svelte/AnimatedChris016";
</script>
<AnimatedChris016 alt="Describe this sticker in context" />
🤩
AnimatedChris017
AnimatedChris017tgs
import AnimatedChris017 from "@cofob/design-system-stickers/react/AnimatedChris017";
<AnimatedChris017 alt="Describe this sticker in context" /><script>
import AnimatedChris017 from "@cofob/design-system-stickers/svelte/AnimatedChris017";
</script>
<AnimatedChris017 alt="Describe this sticker in context" />
🤩
AnimatedChris018
AnimatedChris018tgs
import AnimatedChris018 from "@cofob/design-system-stickers/react/AnimatedChris018";
<AnimatedChris018 alt="Describe this sticker in context" /><script>
import AnimatedChris018 from "@cofob/design-system-stickers/svelte/AnimatedChris018";
</script>
<AnimatedChris018 alt="Describe this sticker in context" />
🤩
AnimatedChris019
AnimatedChris019tgs
import AnimatedChris019 from "@cofob/design-system-stickers/react/AnimatedChris019";
<AnimatedChris019 alt="Describe this sticker in context" /><script>
import AnimatedChris019 from "@cofob/design-system-stickers/svelte/AnimatedChris019";
</script>
<AnimatedChris019 alt="Describe this sticker in context" />
🤩
AnimatedChris020
AnimatedChris020tgs
import AnimatedChris020 from "@cofob/design-system-stickers/react/AnimatedChris020";
<AnimatedChris020 alt="Describe this sticker in context" /><script>
import AnimatedChris020 from "@cofob/design-system-stickers/svelte/AnimatedChris020";
</script>
<AnimatedChris020 alt="Describe this sticker in context" />
🤩
AnimatedChris021
AnimatedChris021tgs
import AnimatedChris021 from "@cofob/design-system-stickers/react/AnimatedChris021";
<AnimatedChris021 alt="Describe this sticker in context" /><script>
import AnimatedChris021 from "@cofob/design-system-stickers/svelte/AnimatedChris021";
</script>
<AnimatedChris021 alt="Describe this sticker in context" />
🤩
AnimatedChris022
AnimatedChris022tgs
import AnimatedChris022 from "@cofob/design-system-stickers/react/AnimatedChris022";
<AnimatedChris022 alt="Describe this sticker in context" /><script>
import AnimatedChris022 from "@cofob/design-system-stickers/svelte/AnimatedChris022";
</script>
<AnimatedChris022 alt="Describe this sticker in context" />
🤩
AnimatedChris023
AnimatedChris023tgs
import AnimatedChris023 from "@cofob/design-system-stickers/react/AnimatedChris023";
<AnimatedChris023 alt="Describe this sticker in context" /><script>
import AnimatedChris023 from "@cofob/design-system-stickers/svelte/AnimatedChris023";
</script>
<AnimatedChris023 alt="Describe this sticker in context" />
🤩
AnimatedChris024
AnimatedChris024tgs
import AnimatedChris024 from "@cofob/design-system-stickers/react/AnimatedChris024";
<AnimatedChris024 alt="Describe this sticker in context" /><script>
import AnimatedChris024 from "@cofob/design-system-stickers/svelte/AnimatedChris024";
</script>
<AnimatedChris024 alt="Describe this sticker in context" />
🤩
AnimatedChris025
AnimatedChris025tgs
import AnimatedChris025 from "@cofob/design-system-stickers/react/AnimatedChris025";
<AnimatedChris025 alt="Describe this sticker in context" /><script>
import AnimatedChris025 from "@cofob/design-system-stickers/svelte/AnimatedChris025";
</script>
<AnimatedChris025 alt="Describe this sticker in context" />
🤩
AnimatedChris026
AnimatedChris026tgs
import AnimatedChris026 from "@cofob/design-system-stickers/react/AnimatedChris026";
<AnimatedChris026 alt="Describe this sticker in context" /><script>
import AnimatedChris026 from "@cofob/design-system-stickers/svelte/AnimatedChris026";
</script>
<AnimatedChris026 alt="Describe this sticker in context" />
🤩
AnimatedChris027
AnimatedChris027tgs
import AnimatedChris027 from "@cofob/design-system-stickers/react/AnimatedChris027";
<AnimatedChris027 alt="Describe this sticker in context" /><script>
import AnimatedChris027 from "@cofob/design-system-stickers/svelte/AnimatedChris027";
</script>
<AnimatedChris027 alt="Describe this sticker in context" />
🤩
AnimatedChris028
AnimatedChris028tgs
import AnimatedChris028 from "@cofob/design-system-stickers/react/AnimatedChris028";
<AnimatedChris028 alt="Describe this sticker in context" /><script>
import AnimatedChris028 from "@cofob/design-system-stickers/svelte/AnimatedChris028";
</script>
<AnimatedChris028 alt="Describe this sticker in context" />
🤩
AnimatedChris029
AnimatedChris029tgs
import AnimatedChris029 from "@cofob/design-system-stickers/react/AnimatedChris029";
<AnimatedChris029 alt="Describe this sticker in context" /><script>
import AnimatedChris029 from "@cofob/design-system-stickers/svelte/AnimatedChris029";
</script>
<AnimatedChris029 alt="Describe this sticker in context" />
🤩
AnimatedChris030
AnimatedChris030tgs
import AnimatedChris030 from "@cofob/design-system-stickers/react/AnimatedChris030";
<AnimatedChris030 alt="Describe this sticker in context" /><script>
import AnimatedChris030 from "@cofob/design-system-stickers/svelte/AnimatedChris030";
</script>
<AnimatedChris030 alt="Describe this sticker in context" />
🤩
AnimatedChris031
AnimatedChris031tgs
import AnimatedChris031 from "@cofob/design-system-stickers/react/AnimatedChris031";
<AnimatedChris031 alt="Describe this sticker in context" /><script>
import AnimatedChris031 from "@cofob/design-system-stickers/svelte/AnimatedChris031";
</script>
<AnimatedChris031 alt="Describe this sticker in context" />
🤩
AnimatedChris032
AnimatedChris032tgs
import AnimatedChris032 from "@cofob/design-system-stickers/react/AnimatedChris032";
<AnimatedChris032 alt="Describe this sticker in context" /><script>
import AnimatedChris032 from "@cofob/design-system-stickers/svelte/AnimatedChris032";
</script>
<AnimatedChris032 alt="Describe this sticker in context" />
🤩
AnimatedChris033
AnimatedChris033tgs
import AnimatedChris033 from "@cofob/design-system-stickers/react/AnimatedChris033";
<AnimatedChris033 alt="Describe this sticker in context" /><script>
import AnimatedChris033 from "@cofob/design-system-stickers/svelte/AnimatedChris033";
</script>
<AnimatedChris033 alt="Describe this sticker in context" />
🤩
AnimatedChris034
AnimatedChris034tgs
import AnimatedChris034 from "@cofob/design-system-stickers/react/AnimatedChris034";
<AnimatedChris034 alt="Describe this sticker in context" /><script>
import AnimatedChris034 from "@cofob/design-system-stickers/svelte/AnimatedChris034";
</script>
<AnimatedChris034 alt="Describe this sticker in context" />
🤩
AnimatedChris035
AnimatedChris035tgs
import AnimatedChris035 from "@cofob/design-system-stickers/react/AnimatedChris035";
<AnimatedChris035 alt="Describe this sticker in context" /><script>
import AnimatedChris035 from "@cofob/design-system-stickers/svelte/AnimatedChris035";
</script>
<AnimatedChris035 alt="Describe this sticker in context" />
🤩
AnimatedChris036
AnimatedChris036video
import AnimatedChris036 from "@cofob/design-system-stickers/react/AnimatedChris036";
<AnimatedChris036 alt="Describe this sticker in context" /><script>
import AnimatedChris036 from "@cofob/design-system-stickers/svelte/AnimatedChris036";
</script>
<AnimatedChris036 alt="Describe this sticker in context" />
🤩
AnimatedChris037
AnimatedChris037webp
import AnimatedChris037 from "@cofob/design-system-stickers/react/AnimatedChris037";
<AnimatedChris037 alt="Describe this sticker in context" /><script>
import AnimatedChris037 from "@cofob/design-system-stickers/svelte/AnimatedChris037";
</script>
<AnimatedChris037 alt="Describe this sticker in context" />