Optimizing Animated Emoji Storage and Delivery in a Web Application | Remotion | Page 1

kind tree Dec 16, 2024, 3:50 PM

#

I'm working on implementing remotion animated emojis in my application. According to the documentation, these emojis need to be stored in the application's public folder. However, with a large collection of emojis, this approach would significantly increase the project size and make maintenance challenging. I'm looking for guidance on hosting these emojis on Amazon S3 and serving them through CloudFront CDN instead. How can I implement this alternative storage and delivery solution?

Also is there any way to give the codepoint as a prop not the name of the emoji?

kind tree Dec 17, 2024, 4:33 AM

#

Hi @glad canyon, seeking your help!

glad canyon Dec 17, 2024, 11:14 AM

#

kind tree Hi <@701030996430159872>, seeking your help!

true, you can also consider using <Lottie> component and referencing the lottie files from here https://googlefonts.github.io/noto-emoji-animation/

Animated Emoji

The official repository of all things related to animating Noto Emoji.

kind tree Dec 17, 2024, 11:15 AM

#

Thank you!

#

Could you please let me know which option is more compatible with Remotion: offthreadVideo or Lottie? Which would you recommend, and what are the best practices to follow tp render emojis on caption?

glad canyon Dec 17, 2024, 12:48 PM

#

kind tree Could you please let me know which option is more compatible with Remotion: offt...

I'm torn, I think I actually recommend lottie nowadays, it also gives a better render performance somehow

so, thinking about deprecating the animated emoji package

kind tree Dec 17, 2024, 2:06 PM

#

I'm working with Remotion and trying to render a remote Lottie animation. Here's my code:

import React from 'react';
import Lottie from 'lottie-react';

const RemoteLottie = () => {
  return <Lottie animationData={'https://fonts.gstatic.com/s/e/notoemoji/latest/1f600/lottie.json'} />;
};

I suspect that I need to first fetch the Lottie JSON before passing it to the component, but I’m not sure if I should be using useEffect inside a Remotion component, or if there’s a recommended approach for loading remote Lottie data. Any advice on how to handle this scenario effectively?

#Optimizing Animated Emoji Storage and Delivery in a Web Application