### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [November 28, 2024, 11:31pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/1 "2024-11-28T23:31:53Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | Adds optional variations or animations to emojis. |
| š | **Preview** | [Preview on theme-creator.discourse.org](https://discourse.theme-creator.io/theme/Arkshine/fluff-emoji) |
| š | **Repository Link** | [https://github.com/arkshine/discourse-emoji-fluff](https://github.com/arkshine/discourse-emoji-fluff) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
ā¹ This component requires Discourse to be current as of 2024-11-26T23:00:00Z. \[1\]
## Description
Emoji Fluff allows users to put mirrored or animated emojis in their posts.
It allows users to post fancy emoji work such as:
You can choose these decorations from the emoji autocompletion pop-up, from the emoji picker, or by appending keywords directly after the emoji shortcode:
Examples: `:bike:f-slide` , `:smile:f-bounce`
Horizontal and vertical flips can be combined with other decorations.
Examples:
- `:horse:f-slide,flip:`
- `:spider:f-float,flip_v:`
## Screenshots
### Available emoji fluff
### How to add fluff to an emoji
#### From the emoji autocompletion pop-up
#### From the emoji picker
#### By typing manually the fluff suffix
## Features
- Horizontally or vertically mirrored emojis
- Animated emojis (bounce, rotate, pulse, etc)
- Setting to choose which emoji decorations should be available to users
- Setting to choose inserting a decorations selector in autocomplete or emoji picker.
- Allow admins to create new fluffs
## Settings
| Setting | Description |
| --- | --- |
| **enabled** | Turn on or off the componentās functionalities.
Default value: `true`
Disabling will prevent the emoji decoration from being applied.
This is useful if you want to pause or plan to remove the component but donāt want to see the decoration code, such as `šspin:`, in posts.
For more information, check out _Reverting emoji decorations_ in the topic. |
| **allow decorations** | List of allowed decorations.
Default value: `flip|flip_v|spin|pulse|bounce|wobble|float|slide|fade|negative|hue|gray` |
| **allow selector in** | Where the fluff selector should be available.
Default value: `both`
`none` ā disable the selectors.
`both` ā enable the selector in the autocomplete and the emoji picker.
`autocomplete` ā enable the selector only in the autocomplete.
`emoji-picker` ā enable the selector only in the emoji picker.
|
š Additionally, the theme component strings are translatable from the settings.
## Reverting emoji decorations
If you disable the component, these suffixes remain, resulting in emojis like this: šf-spin:
Due to theme component limitations and design choices, we add straightforward suffixes to emojis to give them these decorative effects. The fluff prefix `f-` helps identify these decorations, making them easy to remove through the script available below.
You can download and run a rake task to remove fluff suffixes definitely from posts.
```bash
wget -P lib/tasks/ https://raw.githubusercontent.com/Arkshine/discourse-emoji-fluff/refs/heads/main/tasks/fluff.rake
rake fluff:delete_all
```
ā¹ The rake task doesnāt create post revisions by default. You can add `false` as an argument to change this behavior: `rake fluff:delete_all[false]`
Read [Administrative Bulk Operations](https://meta.discourse.org/t/administrative-bulk-operations/118349) for instructions on entering the container to run the rake task.
ā **Always make a backup before running this task. There is no guarantee that it wonāt remove unwanted strings. Use it at your own risk, and review the code if in doubt.**
## Creating your fluffs
Fluff creation requires CSS knowledge.
When a fluff is added to an emoji inside a post, the emoji is wrapped by a `` tag with a `fluff` class:
```html
```
Add custom CSS to your theme or a new theme component to add new fluffs.
Here are two examples of new fluff:
### Tilt 90Ā° an emoji
```scss
.fluff--tilt img {
transform: rotate(90deg);
}
```
### Do a 3D spin effect
```scss
.fluff--spin3d img {
animation: f-spin3d 2s infinite linear;
}
@keyframes f-spin3d {
0% {
transform: perspective(50em) rotateY(0deg);
filter: brightness(1);
}
50% {
transform: perspective(50em) rotateY(90deg);
filter: brightness(0.85);
}
51% {
transform: perspective(50em) rotateY(91deg);
filter: brightness(1.15);
}
100% {
transform: perspective(50em) rotateY(180deg);
filter: brightness(1);
}
}
```
Then, you need to add the fluff suffix in the Emoji Fluff **allowed decorations** :
Thatās all; your new fluffs should now be available to users. Enjoy!
## Credit
- @Canapin: Original idea, general help preparing and testing this TC.
* * *
1. To be precise, TC requires at least a Discourse version after October 30, and specifically the support of emoji picker, a current version as of 2024-11-26T23:00:00Z (thanks to the team for adding a plugin outlet a few days ago!)
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [November 28, 2024, 11:40pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/2 "2024-11-28T23:40:02Z")
haha this is awesome! trĆØs bien! š¤©
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [November 29, 2024, 4:41am UTC](https://meta.discourse.org/t/emoji-fluff/339163/3 "2024-11-29T04:41:45Z")
I have a feeling that it conflicts with this component [Omit Emoji component](https://meta.discourse.org/t/omit-emoji-component/119562) causing the UI for the one that selects the emoji to not show the componentās magic wand
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [November 29, 2024, 8:53am UTC](https://meta.discourse.org/t/emoji-fluff/339163/4 "2024-11-29T08:53:32Z")
I donāt use that component, but Iām using iPad and drafting has done that couple times now ā Iām writing a help for users. Publishing fixes it.
---
### Author:  [@Bas](https://meta.discourse.org/u/Bas)
#### Post date: [November 29, 2024, 9:07am UTC](https://meta.discourse.org/t/emoji-fluff/339163/5 "2024-11-29T09:07:55Z")
This is amazing! Well done!! š¤©
(small nitpick, would ānegativeā be a better description than āinvertā?)
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [November 29, 2024, 9:28am UTC](https://meta.discourse.org/t/emoji-fluff/339163/6 "2024-11-29T09:28:51Z")
> [@Arkshine](#):
>
> ā¹ This component requires Discourse to be current as of 2024-11-26T23:00:00Z.
Did you update Discourse? You only receive a notification to update when a new beta is released, but new commits are added every day.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [November 29, 2024, 12:01pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/7 "2024-11-29T12:01:49Z")
> [@Bas](#):
>
> This is amazing! Well done!! š¤©
>
> (small nitpick, would ānegativeā be a better description than āinvertā?)
Thanks! š
Youāre right; it has been renamed now!
[https://github.com/Arkshine/discourse-emoji-fluff/commit/c6090b2ac295639249636b6c43a136010485ed1e](https://github.com/Arkshine/discourse-emoji-fluff/commit/c6090b2ac295639249636b6c43a136010485ed1e)
> [@Monikas](#):
>
> I have a feeling that it conflicts with this component [Omit Emoji component](https://meta.discourse.org/t/omit-emoji-component/119562) causing the UI for the one that selects the emoji to not show the componentās magic wand
As stated by Moin, you will need to update Discourse.
I looked at the Theme component code and tested it; once you update Discourse, they should work together without issues! š
---
### Author:  [@joo](https://meta.discourse.org/u/joo)
#### Post date: [January 22, 2025, 7:21pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/8 "2025-01-22T19:21:01Z")
Hi, I can no longer see the option to add the Emoji Fluff component. Is it still supported?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 22, 2025, 8:52pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/9 "2025-01-22T20:52:29Z")
Iāve pushed a partial [fix](https://github.com/Arkshine/discourse-emoji-fluff/commit/b776ec518b18c272f47227c8aba68987fc0f1799) to make it work with the latest Discourse version. However, this fix only addresses the autocomplete feature. š
Currently, I am unable to resolve the issue with the emoji picker. Recently, the team has unified the emoji picker with the chat in [https://github.com/discourse/discourse/pull/28277](https://github.com/discourse/discourse/pull/28277). Unfortunately, the plugin outlet in the emoji picker footer, which was previously used to insert a toggle, has been removed in the new version. At this moment, I do not have a solution. Sorry for the inconvenience! š
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 22, 2025, 9:18pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/10 "2025-01-22T21:18:25Z")
PR a new one? I believe they welcome such things?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 22, 2025, 9:33pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/11 "2025-01-22T21:33:15Z")
Yes, I will!
Iām still thinking of possible alternatives.
If you look at the new emoji picker, a few spaces are available. You probably donāt want to cut the placeholder text, but this is the only space that makes sense:
It might be okay for one icon. But I feel like making a plugin outlet here doesnāt seem reasonable. š
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 29, 2025, 11:16am UTC](https://meta.discourse.org/t/emoji-fluff/339163/12 "2025-01-29T11:16:23Z")
Great fun!
Stretch goal:
3D animation š
> [@Emojis, would it be prudent for Discourse to Fork Twemoji?](https://meta.discourse.org/t/emojis-would-it-be-prudent-for-discourse-to-fork-twemoji/272853/4):
>
> They have stopped, the last update [on the repo](https://github.com/twitter/twemoji) is 3 years old. The fork is up-to-date with recent official emojis absent from the original Twemoji set. Iām thinking of head_shaking_vertically and head_shaking_horizontally that I use in my everyday life, I miss them on Discourse! They currently render as head_shaking_vertically and head_shaking_horizontally.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 29, 2025, 4:14pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/13 "2025-01-29T16:14:03Z")
> [@merefield](#):
>
> PR a new one? I believe they welcome such things?
To answer this, I did here:
[https://github.com/discourse/discourse/pull/30976](https://github.com/discourse/discourse/pull/30976)
One of the good things about the unified emoji picker is that Fluff will work with chat!
Hopefully, the PR will get some attention!
> [@merefield](#):
>
> 3D animation š
>
> > [@](#):
> >
> > They have stopped, the last update [on the repo](https://github.com/twitter/twemoji) is 3 years old. The fork is up-to-date with recent official emojis absent from the original Twemoji set. Iām thinking of slightly\_smiling\_faceāāļø and slightly\_smiling\_faceāāļø that I use in my everyday life, I miss them on Discourse! They currently render as slightly\_smiling\_faceāarrow\_up\_down and slightly\_smiling\_faceāā.
By 3D animation, do you mean pure CSS with 3D transformation?
Like that:
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 29, 2025, 4:17pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/14 "2025-01-29T16:17:28Z")
No, I meant a fully 3D effect of someone shaking their head which of course is not trivial.
Possibly better addressed by using stickers?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 29, 2025, 4:21pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/15 "2025-01-29T16:21:37Z")
More like that then?
> **[Animated Emoji](https://googlefonts.github.io/noto-emoji-animation/)**
>
> The official repository of all things related to animating Noto Emoji.
* * *
EDIT:
Oh, @merefield, I see what you mean by [Plugin for animated stickers](https://meta.discourse.org/t/plugin-for-animated-stickers/123212)!
I guess that would be out of the scope for this TC. It would not be easy to find the 3D version of every emoji.
I really like the falcoās sticker idea!
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 3, 2025, 9:21pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/16 "2025-03-03T21:21:10Z")
The TC has been updated to make it fully compatible with the latest Discourse version.
This adds chat support as well!
[https://github.com/Arkshine/discourse-emoji-fluff/pull/4](https://github.com/Arkshine/discourse-emoji-fluff/pull/4)
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 4, 2025, 2:58am UTC](https://meta.discourse.org/t/emoji-fluff/339163/17 "2025-03-04T02:58:58Z")
Create new TC ,āEmoji-fluff Extrasā and added your 2 new fluff effects
Added the spin3d and tilt to allowable emoji fluff list. The sample new emoji fluff is not working. Added the CSS to common in the custom TC. Ensured to added to all themes.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 4, 2025, 4:39am UTC](https://meta.discourse.org/t/emoji-fluff/339163/18 "2025-03-04T04:39:02Z")
If you added, for example, `tilt` to the setting, and the fluff is not working, itās most likely the CSS is not available unless you made a typo. Can you check again your CSS?
(I wanted to look at your forum but canāt log in. I donāt get any email and canāt even log in with Steam (for some reason, it still asks me to check my email))
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 4, 2025, 7:23am UTC](https://meta.discourse.org/t/emoji-fluff/339163/19 "2025-03-04T07:23:11Z")
I have activated your account
Will have to look into the email sending. You would need to have an account before being able to add steam login.
The CSS was copied using the quick copy on your code blocks.
All zi did with tilt was to clone it twice changing it to ātilt45ā & ātilt90ā. āspin3dā no changes
Emoji fluff setting
Emoji-fluff extras CSS content in Common
```plaintext
.fluff--tilt45 img {
transform: rotate(45deg);
}
.fluff--tilt90 img {
transform: rotate(90deg);
}
.fluff--spin3d img {
animation: f-spin3d 2s infinite linear;
}
@keyframes f-spin3d {
0% {
transform: perspective(50em) rotateY(0deg);
filter: brightness(1);
}
50% {
transform: perspective(50em) rotateY(90deg);
filter: brightness(0.85);
}
51% {
transform: perspective(50em) rotateY(91deg);
filter: brightness(1.15);
}
100% {
transform: perspective(50em) rotateY(180deg);
filter: brightness(1);
}
}
```
**Note** Email sending issue identified. I am over my 300)day limit by just over a 109. Will have to soon enough upgrade to a paid plan. Thanks for the heads up
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 4, 2025, 12:42pm UTC](https://meta.discourse.org/t/emoji-fluff/339163/20 "2025-03-04T12:42:06Z")
Did you fix your issue?
It is working for me:
[Next page](https://meta.discourse.org/t/emoji-fluff/339163.md?page=2)