diff --git a/Iceshrimp.Frontend/Components/MfmText.razor.css b/Iceshrimp.Frontend/Components/MfmText.razor.css index 47693bc3..6a4439cf 100644 --- a/Iceshrimp.Frontend/Components/MfmText.razor.css +++ b/Iceshrimp.Frontend/Components/MfmText.razor.css @@ -146,6 +146,42 @@ } } +@keyframes fn-jelly { + 0% { + transform: scaleZ(1) + } + 30% { + transform: scale3d(1.25, .75, 1) + } + 40% { + transform: scale3d(.75, 1.25, 1) + } + 50% { + transform: scale3d(1.15, .85, 1) + } + 65% { + transform: scale3d(.95, 1.05, 1) + } + 75% { + transform: scale3d(1.05, .95, 1) + } + to { + transform: scaleZ(1) + } +} + +::deep { + .fn-jelly { + display: inline-block; + animation-delay: 0s; + animation-duration: 1s; + animation-fill-mode: both; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-name: fn-jelly; + } +} + ::deep { .fn-rotate { display: inline-block; diff --git a/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs b/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs index e4459172..3368327c 100644 --- a/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs +++ b/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs @@ -260,7 +260,7 @@ public static partial class MfmRenderer "x3" => MfmFnX(node.Name, document), "x4" => MfmFnX(node.Name, document), "blur" => MfmFnBlur(document), - "jelly" => throw new NotImplementedException($"{node.Name}"), + "jelly" => MfmFnJelly(args, document), "tada" => throw new NotImplementedException($"{node.Name}"), "jump" => throw new NotImplementedException($"{node.Name}"), "bounce" => throw new NotImplementedException($"{node.Name}"), @@ -331,6 +331,23 @@ public static partial class MfmRenderer return el; } + private static INode MfmFnJelly(Dictionary args, IDocument document) + { + var el = document.CreateElement("span"); + + el.ClassName = "fn-jelly"; + + var style = ""; + style += args.TryGetValue("speed", out var speed) ? $"animation-duration: {speed}; " : ""; + style += args.TryGetValue("delay", out var delay) ? $"animation-delay: {delay}; " : ""; + style += args.TryGetValue("loop", out var loop) ? $"animation-iteration-count: {loop}; " : ""; + + if (!string.IsNullOrWhiteSpace(style)) + el.SetAttribute("style", style.Trim()); + + return el; + } + private static INode MfmFnRotate(Dictionary args, IDocument document) { var el = document.CreateElement("span");