Remotion 2.0 - A virtual office for your hybrid team, right on your desktop | Product Hunt

Designing a custom, inclusive emoji picker

One of my favorite aspects of the Remotion software is the ability to send and receive Emojis to and from my colleagues.

Our emoji sending includes custom animation for certain characters (such as a bicycle 🚲 or rocket 🚀 moving from one side of its window to the other, or raised hands 🙌 moving up in celebration).

We even replaced certain emoji (e.g. fireworks 🎆, donuts 🍩) to take advantage of Apple’s particle animation engine for some spectacular effects.

Sending my teammate the fries emoji.

Sending emoji in Remotion is a great way to stay connected to your teammates throughout the day. Fun as a back-channel during a stand-up meeting or informal presentation, or just to say hello.

This week, Apple has released the version 12.3 update to its Monterey operating system, and with that update — along with the update to iOS version 15.4 — comes a new batch of emoji.  

We are proud to share that Remotion already contains support for these new emoji. As long as you and your colleagues are running this latest operating system, you can start sending each other melting faces, salutes, and so much more!

The newest batch of emoji.

We’re very interested in designing software for inclusion, so a new feature in our software is the support for multiple skin tones in our Emoji sending.

Much like other software that allows you to pick emoji, you can now choose a skin tone that reflects you. You can keep sending the generic yellow emojis representing people, or you can pick one of the five skin tones (light, medium light, medium, medium dark, and dark) and send your emojis that way!

Our emoji picker with medium-dark skin tone selected.
Our emoji picker with the skin-tone chooser visible and light skin tone currently selected.

We’re proud of our emoji picker — we’ve had to create our own custom picker for technical reasons. (Specifically, Apple’s picker only works for inserting emojis into editable text, so picking an emoji outside of that context isn’t possible).

One improvement we can offer over Apple’s emoji picker (which you use for inserting emoji into text) is that when it comes to the two-tone emoji — such as the brand-new handshake emoji — you can choose a handshake based on your chosen tone in combination with any of the five skin tones.

Notice the skin tone for the hand on the left matches the rest of the single-tone emoji, while the hand on the right varies from light to dark.

A closer look at the two skin tone emoji.

Because we’ve had to do some work under the hood to support our own emoji picker, we thought that it might be helpful to release some of our work to the developer community. So we are announcing our Emoji-Library-and-Utilities repository on GitHub. It’s open-source (MIT License) for developers to get an easy-to use set of emoji, along with Swift code (in the file EmojiUtilities.swift) for reading our data files and manipulating the emoji to add skin tones where appropriate.

The source code also includes methods for reading the latest versions of the Emoji data from the Unicode Consortium, so more advanced developers may wish to use this as a starting point for manipulating Emoji data for other purposes. (At this point, our repository includes the data and manipulation but not any UI components. Be sure to see the README.md file in the package for more details.)


︙
"🌄":["sunrise over mountains","morning mountain sun"],
"🌅":["sunrise","morning sun"],
"🌆":["cityscape at dusk","city evening landscape sunset"],
"🌇":["sunset","dusk sun buildings"]
︙

An excerpt of EmojiAnnotations.json, which you can use for captions or searching.


︙
💪,1
🦾,,12
🦿,,12
🦵,1
🦶,1
👂,1
︙

An excerpt of Categories.csv. Each line contains an emoji character with additional information such as whether it supports adding skin tones and what version of Emoji it is first available in.

We hope that this will help foster the sense of inclusiveness in more software! Tweet @danwood or @remotionco with any thoughts. And check out my blog post on why we're proud to be building a native macOS app.

The case for virtual coworking: build a connected remote culture.

Regularly coworking with your hybrid or remote team can help you build the social cohesion that makes work feel less like work.

Here are the biggest reasons we think coworking is an effective way to create a close-knit remote culture:

1. It fosters casual conversations.

Building a connected remote culture is all about fostering 1:1 or small group organic conversations. Virtual coworking makes space for those conversations. When you spend time together outside of agenda-driven meetings, spontaneous chats naturally occur, as they would in an office.

2. It's more inclusive than scheduled social events.

It can be draining for introverts to have to participate in scheduled, purely social conversations. Coworking allows the team to spend time together and occasionally chat without having to constantly be "on," making it more inclusive for introverts and extroverts alike.

3. It's easy to say yes to.

Purely social events are important, but if your team is busy or on a tight deadline, it's tough to find the time for social chats without it feeling like an obligation. Coworking is much easier to get your team onboard with because it doesn't take time away from getting work done.

4. It improves remote collaboration.

Coworking can lead to unblocking and shorter feedback loops. Quick questions get answered easily and in the moment, without a having to schedule a meeting or go back-and-forth in messages.

5. It's scalable.

Coworking works for teams of all sizes and is a great way to scale your remote culture as your team grows. It's helpful to create opportunities for teammates from different functions to get to know one another.

6. It creates shared momentum.

The feeling of togetherness is motivating!

Get started with virtual coworking: choose the type most aligned with your priorities.

It takes intentionality to make virtual coworking feel natural and energizing enough to stick—it's not as simple as leaving a Zoom call open all day.

Here are a few of the ways we've set coworking up for our team. We recommend choosing one to start with. If it works, make it routine and experiment with other types from there.

Best practices for virtual coworking.

Keep group sizes small.

Limit your coworking sessions to 4-6 people to keep things from getting distracting and help make introverted teammates comfortable chatting.

Signal boost coworking.

Set a norm of letting the entire team know when you're hopping into a coworking room or session.

Make it routine.

Once you've figured out what kind of coworking works for your team, make it a regular, opt-in event. Set up a recurring calendar event to do it at the same time each week to maximize the impact.

Set expectations ahead of time.

When you're first introducing coworking to your team, share what you're imagining in your calendar invite and at the top of each session to get everyone on the same page. For example:

Let's try virtual coworking! We'll work independently on our own projects with our cameras off, but we'll share space and listen to music together — like we might work side-by-side at the office.

Listen to music together.

Play music while you work to create a shared environment and add a little bit of personality to your coworking session.

Set up Coworking Rooms in Remotion.

Most of the above is doable with any video chat app, but much easier with Remotion—which we designed with a lightweight, smooth coworking experience in mind. Easily set up Remotion rooms that your teammates can hop into for different styles of coworking.

We'd love to hear how coworking goes for you, or what practices you've found helpful on your team — let us know @remotionco on Twitter.

Want to try coworking in Remotion, our virtual office? Get free access today.

Cowork like
everyone's together.