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/NotoColorEmoji-Regular.ttf");
+	src: url("./fonts/NotoColorEmoji/Noto-COLRv1-noflags.ttf");
 }
 @font-face {
 	font-family: "OpenMojiDemoFont";
@@ -10,7 +10,10 @@
 	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 {
@@ -30,11 +33,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: regular;
-	*/
+	font-weight: 400;
+	font-style: normal;
 }
 .emoji:after {
 	font-variant-emoji: emoji; /* experimental and only in firefox :( */

render/index.js

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