add optimization for animation via viewport IntersectionObserver

render/base.css

@@ -1,6 +1,6 @@
 @font-face {
 	font-family: "Noto Color Emoji";
-	src: url("./fonts/NotoColorEmoji/Noto-COLRv1-noflags.ttf");
+	src: url("./fonts/NotoColorEmoji/NotoColorEmoji-Regular.ttf");
 }
 @font-face {
 	font-family: "OpenMojiDemoFont";
@@ -10,10 +10,7 @@
 	font-family: "OpenMojiDemoFont";
 	src: url("OpenMoji-color-colr1_svg.woff2") format("woff2");
 }*/
-@font-face {
-	font-family: "Twemoji Mozilla Built";
-	src: url("./fonts/Mozilla/Twemoji.Mozilla.ttf");
-}
+
 
 
 html, body {
@@ -33,11 +30,11 @@ h1,h2,h3,h4,h5 {
 }
 
 .emoji {
-	/*font-family: "Twemoji Mozilla Built", sans-serif;*/
 	/*font-family: "Noto Color Emoji", sans-serif;*/
 	font-family: "OpenMojiDemoFont", sans-serif;
-	font-weight: 400;
-	font-style: normal;
+	/*font-weight: 400;
+	font-style: regular;
+	*/
 }
 .emoji:after {
 	font-variant-emoji: emoji; /* experimental and only in firefox :( */

render/index.js

@@ -39,10 +39,9 @@ function channelWithEmoji(value) {
 	}
 	const emoji = replacements[value];
 	if (emoji) {
-		return [
-			Tag('span', {"class": "emoji"}, emoji),
+		return [Tag('div', {"class": "emoji"}, emoji, [
 			Tag("span", {"class": "text-left-margin"}, value)
-		];
+		])];
 	} else {
 		return [];
 	}